-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwoocommerce.html
More file actions
360 lines (350 loc) · 37.8 KB
/
woocommerce.html
File metadata and controls
360 lines (350 loc) · 37.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>WooCommerce розробник — Теми, Плагіни, LiqPay, Monobank | Roman Matviy</title>
<meta name="description" content="Розробка WooCommerce магазинів: кастомні теми pixel-perfect по Figma, власні плагіни, інтеграція LiqPay, Monobank, Stripe, Nova Poshta. 5+ років, 25+ магазинів. Від $20/год.">
<meta name="keywords" content="WooCommerce розробник Україна, кастомна тема WooCommerce Figma, плагін WooCommerce, WooCommerce LiqPay Monobank, Nova Poshta WooCommerce, WooCommerce developer Ukraine hire">
<meta name="author" content="Roman Matviy"><meta name="robots" content="index,follow">
<link rel="canonical" href="https://hirewebdeveloper.pp.ua/services/woocommerce.html">
<link rel="alternate" hreflang="uk" href="https://hirewebdeveloper.pp.ua/services/woocommerce.html">
<link rel="alternate" hreflang="en" href="https://hirewebdeveloper.pp.ua/en/services/woocommerce.html">
<meta property="og:title" content="WooCommerce розробник — Теми, Плагіни, LiqPay, Monobank | Roman Matviy">
<meta property="og:description" content="Розробка WooCommerce магазинів: кастомні теми pixel-perfect по Figma, власні плагіни, інтеграція LiqPay, Monobank, Stripe, Nova Poshta. 5+ років, 25+ магазинів. Від $20/год.">
<meta property="og:url" content="https://hirewebdeveloper.pp.ua/services/woocommerce.html">
<meta property="og:type" content="website">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Service","name":"WooCommerce розробник — Теми, Плагіни, LiqPay, Monobank | Roman Matviy","provider":{"@type":"Person","name":"Roman Matviy","url":"https://hirewebdeveloper.pp.ua"},"url":"https://hirewebdeveloper.pp.ua/services/woocommerce.html"}</script>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#00f5d4">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@300;400;600&display=swap" rel="stylesheet">
<style> :root {
--bg: #03050d; --bg2: #070d1a; --bg3: #0a1428;
--cyan: #00f5d4; --orange: #ff6b35; --blue: #3b82f6;
--purple: #8b5cf6; --green: #22c55e;
--text: #e8edf5; --muted: #5a6a85;
--card: rgba(255,255,255,0.04);
--border: rgba(0,245,212,0.12);
--font-display: 'Syne', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font-mono); overflow-x: hidden; line-height: 1.7; cursor: none; }
a { color: inherit; text-decoration: none; } ul { list-style: none; }
/* CURSOR */
.cur { width: 8px; height: 8px; background: var(--cyan); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; mix-blend-mode: screen; transition: transform 0.08s ease; }
.cur-ring { width: 36px; height: 36px; border: 1.5px solid var(--cyan); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; transition: all 0.18s ease; opacity: 0.4; }
.cur-ring.hovered { transform: scale(2) !important; opacity: 0.15; }
/* SCROLL PROGRESS */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; z-index: 600; background: linear-gradient(90deg, var(--cyan), var(--orange)); transition: width 0.1s linear; }
/* GRID BG */
.bg-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(0,245,212,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0,245,212,0.025) 1px, transparent 1px); background-size: 70px 70px; }
/* BLOBS */
.bg-blob { position: fixed; pointer-events: none; z-index: 0; border-radius: 50%; filter: blur(130px); }
@keyframes floatBlob { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-60px) scale(1.1)} 66%{transform:translate(-30px,40px) scale(0.95)} }
/* NAV */
nav.main-nav { position: fixed; top: 0; inset-inline: 0; z-index: 500; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 5vw; background: rgba(3,5,13,0.88); backdrop-filter: blur(24px) saturate(1.4); border-bottom: 1px solid var(--border); }
.nav-logo { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--text); letter-spacing: -0.03em; }
.nav-logo em { color: var(--cyan); font-style: normal; }
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); transition: color 0.3s; }
.nav-links a:hover, .nav-links a.active { color: var(--cyan); }
.nav-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.6rem; background: linear-gradient(135deg, var(--cyan), var(--blue)); color: var(--bg); font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; border-radius: 2px; clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%); transition: all 0.3s; white-space: nowrap; }
.nav-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.nav-menu-btn { display: none; background: none; border: none; cursor: pointer; color: var(--text); }
/* MOBILE NAV */
.mobile-nav { position: fixed; inset: 0; z-index: 400; background: var(--bg); padding: 5rem 2rem 2rem; display: none; flex-direction: column; gap: 2rem; }
.mobile-nav.open { display: flex; }
.mobile-nav a { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--text); }
.mobile-nav a:hover { color: var(--cyan); }
.mobile-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; }
/* BREADCRUMB */
.breadcrumb { position: relative; z-index: 1; padding: 6.5rem 5vw 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.68rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); transition: color 0.2s; }
.breadcrumb a:hover, .breadcrumb span { color: var(--cyan); }
/* PAGE HERO */
.page-hero { position: relative; z-index: 1; padding: 2.5rem 5vw 5rem; overflow: hidden; }
.page-badge { display: inline-flex; align-items: center; gap: 0.6rem; border: 1px solid var(--border); padding: 0.4rem 1rem; border-radius: 100px; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1.2rem; }
.page-badge::before { content: ''; width: 6px; height: 6px; background: var(--green); border-radius: 50%; animation: blink 2s ease infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.page-h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: 1.02; letter-spacing: -0.04em; margin-bottom: 0.5rem; }
.page-tagline { font-family: var(--font-display); font-size: clamp(0.9rem, 2vw, 1.2rem); color: var(--orange); font-weight: 600; margin-bottom: 1.5rem; }
.page-desc { font-size: 0.88rem; color: var(--muted); max-width: 680px; line-height: 1.9; margin-bottom: 2.5rem; }
.page-desc strong { color: var(--text); }
.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
/* BUTTONS */
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-p { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2rem; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; border-radius: 2px; transition: all 0.3s; letter-spacing: 0.03em; }
.btn-primary { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: var(--bg); clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%); }
.btn-primary:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,245,212,0.25); }
.btn-secondary { border: 1px solid rgba(255,107,53,0.35); color: var(--orange); clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%); }
.btn-secondary:hover { background: rgba(255,107,53,0.08); transform: translateY(-2px); }
/* STATS */
.stats-row { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.stat-val { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; color: var(--cyan); line-height: 1; }
.stat-label { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.25rem; }
/* SECTIONS */
section { position: relative; z-index: 1; padding: 5.5rem 5vw; }
section.dark { background: var(--bg2); }
.section-label { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); margin-bottom: 0.8rem; }
.section-label::before { content: '// '; color: var(--muted); }
.section-h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3.5vw, 3rem); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 1rem; }
.section-h2 em { color: var(--cyan); font-style: normal; }
.section-sub { font-size: 0.86rem; color: var(--muted); max-width: 580px; line-height: 1.85; margin-bottom: 3.5rem; }
/* REVEAL */
.reveal { opacity: 0; transform: translateY(36px); transition: all 0.65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* FEATURES GRID */
.features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.2rem; }
.feat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; padding: 2rem 1.8rem; transition: all 0.35s; position: relative; overflow: hidden; }
.feat-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s; }
.feat-card:hover { border-color: rgba(0,245,212,0.25); }
.feat-card:hover::after { transform: scaleX(1); }
.feat-icon { width: 44px; height: 44px; background: rgba(0,245,212,0.07); border: 1px solid var(--border); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 1.2rem; }
.feat-title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; margin-bottom: 0.5rem; }
.feat-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.8; }
/* TECH GRID */
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.8rem; }
.tech-item { background: var(--card); border: 1px solid var(--border); border-radius: 3px; padding: 1.2rem 1rem; text-align: center; transition: all 0.3s; cursor: default; }
.tech-item:hover { border-color: var(--cyan); background: rgba(0,245,212,0.05); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.tech-icon { font-size: 1.8rem; margin-bottom: 0.5rem; }
.tech-name { font-size: 0.72rem; font-weight: 600; color: var(--text); }
.tech-sub { font-size: 0.62rem; color: var(--muted); margin-top: 0.2rem; }
/* PROCESS */
.process-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5px; background: var(--border); border: 1px solid var(--border); }
.process-step { background: var(--bg2); padding: 2.2rem 1.8rem; position: relative; transition: background 0.3s; }
.process-step:hover { background: var(--bg3); }
.step-num { font-family: var(--font-display); font-weight: 800; font-size: 3.5rem; line-height: 1; color: rgba(0,245,212,0.07); position: absolute; top: 1.2rem; right: 1.5rem; }
.step-icon { font-size: 1.6rem; margin-bottom: 1rem; }
.step-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; }
.step-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.8; }
/* FAQ */
.faq-list { display: grid; gap: 0; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 1.8rem; cursor: pointer; background: var(--bg2); transition: background 0.2s; font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; gap: 1rem; }
.faq-q:hover { background: var(--bg3); }
.faq-toggle { width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; flex-shrink: 0; color: var(--cyan); transition: transform 0.3s, background 0.3s; }
.faq-item.open .faq-toggle { transform: rotate(45deg); background: rgba(0,245,212,0.1); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; padding: 0 1.8rem; }
.faq-item.open .faq-a { max-height: 400px; padding: 1rem 1.8rem 1.6rem; }
.faq-a p { font-size: 0.82rem; color: var(--muted); line-height: 1.85; }
/* SERVICES MEGA GRID */
.services-mega { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.5px; background: var(--border); border: 1px solid var(--border); margin-top: 3rem; }
.svc-card { background: var(--bg2); padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 0.8rem; position: relative; transition: background 0.3s; overflow: hidden; }
.svc-card:hover { background: var(--bg3); }
.svc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s; }
.svc-card:hover::before { transform: scaleX(1); }
.svc-icon { width: 52px; height: 52px; background: rgba(0,245,212,0.07); border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.svc-title { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.svc-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.85; flex: 1; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.svc-tag { font-size: 0.62rem; padding: 0.22rem 0.6rem; background: rgba(0,245,212,0.06); border: 1px solid rgba(0,245,212,0.14); border-radius: 2px; color: var(--cyan); }
.svc-price { font-family: var(--font-display); font-size: 0.75rem; color: var(--muted); margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); }
.svc-price span { color: var(--cyan); font-weight: 700; }
.svc-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--cyan); font-size: 0.76rem; transition: gap 0.2s; }
.svc-link:hover { gap: 0.7rem; }
/* RELATED */
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.related-card { display: flex; flex-direction: column; gap: 0.5rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; padding: 1.5rem; transition: all 0.3s; }
.related-card:hover { border-color: rgba(0,245,212,0.3); transform: translateY(-3px); }
.related-icon { font-size: 1.4rem; }
.related-title { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; }
.related-desc { font-size: 0.72rem; color: var(--muted); line-height: 1.7; flex: 1; }
.related-link { font-size: 0.7rem; color: var(--cyan); margin-top: 0.3rem; }
/* CTA SECTION */
.cta-section { position: relative; z-index: 1; background: linear-gradient(135deg, var(--bg3) 0%, rgba(0,245,212,0.04) 50%, var(--bg3) 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6rem 5vw; text-align: center; overflow: hidden; }
.cta-bg { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: var(--cyan); filter: blur(160px); opacity: 0.04; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.cta-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3.5vw, 3.2rem); letter-spacing: -0.03em; margin-bottom: 1rem; position: relative; }
.cta-sub { font-size: 0.88rem; color: var(--muted); max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.85; position: relative; }
.cta-btns { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; position: relative; }
.promo-pill { display: inline-flex; align-items: center; gap: 0.6rem; border: 1px dashed rgba(0,245,212,0.3); padding: 0.5rem 1.2rem; border-radius: 100px; font-size: 0.72rem; color: var(--cyan); margin-bottom: 2rem; position: relative; }
/* CODE WINDOW */
.code-window { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; font-size: 0.78rem; }
.code-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); }
.code-dot { width: 10px; height: 10px; border-radius: 50%; }
.code-body { padding: 1.5rem; line-height: 2; overflow-x: auto; white-space: pre; }
.kw{color:#ff79c6} .fn{color:#50fa7b} .str{color:#f1fa8c} .cm{color:#6272a4;font-style:italic} .cl{color:#00f5d4} .vr{color:#bd93f9} .tg{color:#ff6b6b} .at{color:#50fa7b}
/* QUICK FORM */
.quick-form { display: grid; gap: 0.9rem; }
.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.qf-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); display: block; margin-bottom: 0.3rem; }
.qf-input, .qf-textarea { width: 100%; background: var(--card); border: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); font-size: 0.8rem; padding: 0.75rem; border-radius: 2px; outline: none; transition: border 0.3s; }
.qf-input:focus, .qf-textarea:focus { border-color: var(--cyan); }
.qf-textarea { resize: none; min-height: 110px; }
.qf-btn { padding: 0.85rem; background: linear-gradient(135deg, var(--cyan), var(--blue)); color: var(--bg); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; border: none; border-radius: 2px; cursor: pointer; clip-path: polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%); transition: all 0.3s; width: 100%; }
.qf-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.qf-ok { display: none; text-align: center; color: var(--green); font-size: 0.8rem; padding: 0.5rem; }
/* FOOTER */
footer.main-footer { position: relative; z-index: 1; border-top: 1px solid var(--border); padding: 1.8rem 5vw; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-copy { font-size: 0.7rem; color: var(--muted); }
.footer-copy a { color: var(--cyan); }
.footer-nav { display: flex; gap: 2rem; flex-wrap: wrap; }
.footer-nav a { font-size: 0.68rem; color: var(--muted); transition: color 0.2s; }
.footer-nav a:hover { color: var(--cyan); }
/* RESPONSIVE */
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } }
@media (max-width: 768px) { nav.main-nav .nav-links { display: none; } .nav-menu-btn { display: flex; } section { padding: 4rem 5vw; } .qf-row { grid-template-columns: 1fr; } }
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;margin-top:2.5rem;}
.code-win{background:var(--bg3);border:1px solid var(--border);border-radius:4px;overflow:hidden;}
.code-bar{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border);}
.dot{width:10px;height:10px;border-radius:50%;}
.ct{font-size:.64rem;color:var(--muted);margin-left:.3rem;}
.code-body{padding:1.2rem 1.4rem;font-size:.69rem;line-height:1.95;overflow-x:auto;font-family:var(--font-mono);}
.ck{color:#ff7c7c;}.cv{color:#00f5d4;}.cs{color:#ffd76d;}.cm{color:#9ca3af;font-style:italic;}.cb{color:#c084fc;}.co{color:#ff6b35;}
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--border);border:1px solid var(--border);margin-top:2.5rem;}
.proc-card{background:var(--bg2);padding:1.7rem 1.4rem;transition:background .3s;}.proc-card:hover{background:var(--bg3);}
.proc-num{font-family:var(--font-display);font-weight:900;font-size:2.3rem;color:rgba(0,245,212,.1);line-height:1;margin-bottom:.5rem;}
.proc-title{font-family:var(--font-display);font-weight:700;font-size:.88rem;color:var(--cyan);margin-bottom:.4rem;}
.proc-desc{font-size:.73rem;color:var(--muted);line-height:1.75;}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem;}
.pill{padding:.35rem .85rem;font-size:.69rem;font-family:var(--font-mono);border:1px solid var(--border);color:var(--muted);border-radius:2px;transition:all .25s;}
.pill:hover,.pill.h{border-color:rgba(0,245,212,.32);color:var(--cyan);}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.5px;background:var(--border);border:1px solid var(--border);margin-top:2rem;}
.rel-card{display:block;background:var(--bg2);padding:1.4rem 1.2rem;text-decoration:none;transition:all .3s;}
.rel-card:hover{background:var(--bg3);transform:translateY(-3px);}
.rel-icon{font-size:1.4rem;margin-bottom:.5rem;}
.rel-name{font-family:var(--font-display);font-weight:700;font-size:.86rem;color:var(--text);margin-bottom:.2rem;}
.rel-desc{font-size:.69rem;color:var(--muted);}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;}.proc-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.proc-grid{grid-template-columns:1fr;}.features-grid{grid-template-columns:1fr;}}
</style>
</head>
<body>
<div class="scroll-progress" id="sp"></div>
<div class="cur" id="cur"></div><div class="cur-ring" id="curRing"></div>
<div class="bg-grid"></div>
<div class="bg-blob" style="width:650px;height:650px;top:-180px;right:-120px;background:var(--blue);opacity:.07;animation:floatBlob 22s ease-in-out infinite;"></div>
<div class="bg-blob" style="width:400px;height:400px;bottom:-100px;left:-80px;background:var(--cyan);opacity:.05;animation:floatBlob 28s ease-in-out infinite reverse;"></div>
<nav class="mobile-nav" id="mobileNav">
<button class="mobile-close" id="mobileClose">✕</button><a href="/">Головна</a><a href="/about.html">Про мене</a><a href="/services/">Послуги</a><a href="/pricing.html">Ціни</a><a href="/en/services/woocommerce.html" style="color:var(--muted);">EN 🇬🇧</a>
</nav>
<nav class="main-nav">
<a href="/" class="nav-logo">Roman<em>Dev</em></a>
<ul class="nav-links"><li><a href="/">Головна</a></li><li><a href="/about.html">Про мене</a></li><li><a href="/services/">Послуги</a></li><li><a href="/pricing.html">Ціни</a></li><li><a href="/services/" class="active">Послуги</a></li>
<li><a href="/en/services/woocommerce.html" style="color:var(--muted);font-size:.63rem;border:1px solid var(--border);padding:.27rem .6rem;border-radius:100px;">EN 🇬🇧</a></li>
</ul>
<a href="https://t.me/RomanMatviy" class="nav-btn" target="_blank" rel="noopener">⚡ Найняти</a>
<button class="nav-menu-btn" id="menuBtn"><svg width="22" height="16" viewBox="0 0 22 16"><rect y="0" width="22" height="2" rx="1" fill="currentColor"/><rect y="7" width="16" height="2" rx="1" fill="currentColor"/><rect y="14" width="22" height="2" rx="1" fill="currentColor"/></svg></button>
</nav>
<nav class="breadcrumb"><a href="/">Головна</a> › <a href="/services/">Services</a> › <span>WooCommerce</span></nav>
<header class="page-hero">
<div class="page-badge">WooCommerce · Custom Themes · Plugins · Payments</div>
<h1 class="page-h1">WooCommerce <em style="color:var(--cyan)">Developer</em></h1>
<p class="page-tagline">Кастомні теми, плагіни, платіжні шлюзи, доставка, оптимізація</p>
<p class="page-desc">WooCommerce — моя основна e-commerce платформа поряд з PrestaShop. 5+ років і 25+ магазинів. Кастомні теми по Figma, власні payment gateways, Nova Poshta, CRM інтеграції.</p>
<div class="hero-ctas">
<a href="https://t.me/RomanMatviy" class="btn-p btn-primary" target="_blank" rel="noopener">
💬 Написати в Telegram
</a>
<a href="/pricing.html" class="btn-p btn-secondary">
📄 Ціни
</a>
</div>
</header>
<section>
<div class="hero-grid reveal">
<div>
<div class="section-label">Що отримаєте</div>
<h2 class="section-h2"><em>Ключові можливості</em></h2>
<p style="font-size:.79rem;color:var(--muted);line-height:1.9;margin:1rem 0 1.5rem">WooCommerce — моя основна e-commerce платформа поряд з PrestaShop. 5+ років і 25+ магазинів. Кастомні теми по Figma, власні payment gateways, Nova Poshta, CRM інтеграції.</p>
<div class="pills reveal"><span class="pill h">WooCommerce</span><span class="pill">WordPress</span><span class="pill">PHP 8.2</span><span class="pill">ACF Pro</span><span class="pill">WC Hooks & Filters</span><span class="pill">Custom Post Types</span><span class="pill h">LiqPay API</span><span class="pill h">Monobank API</span></div>
</div>
<div class="code-win">
<div class="code-bar">
<span class="dot" style="background:#ff5f57"></span>
<span class="dot" style="background:#febc2e"></span>
<span class="dot" style="background:#28c840"></span>
<span class="ct">class-roman-liqpay-gateway.php</span>
</div>
<div class="code-body"><span class="ck">class</span> <span class="cv">Roman_LiqPay_Gateway</span><br>
<span class="ck">extends</span> <span class="co">WC_Payment_Gateway</span><br>
{<br>
<span class="ck">public function</span> <span class="cv">__construct</span>()<br>
{<br>
<span class="cs">$this</span>-><span class="cv">id</span> = <span class="cs">'roman_liqpay'</span>;<br>
<span class="cs">$this</span>-><span class="cv">supports</span> = [<span class="cs">'products'</span>, <span class="cs">'refunds'</span>];<br>
<span class="cs">$this</span>-><span class="cv">init_settings</span>();<br>
}<br><br>
<span class="ck">public function</span> <span class="cv">process_payment</span>(<span class="cs">$order_id</span>)<br>
{<br>
<span class="co">$order</span> = <span class="cv">wc_get_order</span>(<span class="cs">$order_id</span>);<br>
<span class="co">$link</span> = <span class="cs">$this</span>-><span class="cv">get_liqpay_link</span>(<span class="co">$order</span>);<br>
<span class="ck">return</span> [<span class="cs">'result'</span> => <span class="cs">'success'</span>,<br>
<span class="cs">'redirect'</span> => <span class="co">$link</span>];<br>
}<br>
}</div>
</div>
</div>
</section>
<section class="dark">
<div class="section-label">Ключові можливості</div>
<h2 class="section-h2 reveal"><em>Ключові можливості</em></h2>
<div class="features-grid"><div class="feat-card reveal"><div class="feat-icon">🎨</div><h3 class="feat-title">Кастомні теми по Figma</h3><p class="feat-desc">Pixel-perfect теми з нуля: сторінка товару, каталог, кошик, checkout, order-received, my-account. Адаптивна верстка, швидке завантаження.</p></div><div class="feat-card reveal"><div class="feat-icon">🔌</div><h3 class="feat-title">Кастомні плагіни</h3><p class="feat-desc">Власні WooCommerce розширення через hooks і filters: типи продуктів, product configurators, нестандартний checkout, програми лояльності.</p></div><div class="feat-card reveal"><div class="feat-icon">💳</div><h3 class="feat-title">Платіжні шлюзи</h3><p class="feat-desc">LiqPay, Monobank (MonoPay), PrivatBank, WayForPay, Stripe, PayPal. Webhook callback, підтвердження оплати, повернення коштів через API.</p></div><div class="feat-card reveal"><div class="feat-icon">🚚</div><h3 class="feat-title">Доставка Nova Poshta</h3><p class="feat-desc">Автоматичний розрахунок вартості, вибір відділення/поштомату, формування ТТН. Укрпошта, DHL, FedEx для міжнародних замовлень.</p></div><div class="feat-card reveal"><div class="feat-icon">⚡</div><h3 class="feat-title">Оптимізація продуктивності</h3><p class="feat-desc">Redis object cache, критичний CSS, lazy load, WebP конвертація, LiteSpeed/Nginx cache. PageSpeed 90+. Profiling slow queries.</p></div><div class="feat-card reveal"><div class="feat-icon">🔄</div><h3 class="feat-title">Міграції</h3><p class="feat-desc">Перенесення каталогу, замовлень і клієнтів з PrestaShop, OpenCart, Magento, Shopify — зі збереженням URL і SEO.</p></div></div>
</section>
<section>
<div class="section-label">Технологічний стек</div>
<h2 class="section-h2 reveal"><em>Технологічний стек</em></h2>
<div class="pills reveal"><span class="pill h">WooCommerce</span><span class="pill">WordPress</span><span class="pill">PHP 8.2</span><span class="pill">ACF Pro</span><span class="pill">WC Hooks & Filters</span><span class="pill">Custom Post Types</span><span class="pill h">LiqPay API</span><span class="pill h">Monobank API</span><span class="pill">Stripe API</span><span class="pill h">Nova Poshta API</span><span class="pill">WP REST API</span><span class="pill">MySQL 8</span><span class="pill">Redis</span><span class="pill">SCSS</span><span class="pill">jQuery</span><span class="pill">Figma</span><span class="pill">Docker</span></div>
</section>
<section class="dark">
<div class="section-label">Процес</div>
<h2 class="section-h2 reveal"><em>Процес</em></h2>
<div class="proc-grid"><div class="proc-card reveal"><div class="proc-num">01</div><div class="proc-title">Аналіз</div><div class="proc-desc">Аудит наявного або аналіз нового магазину. Типи продуктів, варіації, категорії.</div></div><div class="proc-card reveal"><div class="proc-num">02</div><div class="proc-title">WC конфігурація</div><div class="proc-desc">Зони доставки, платіжні методи, податки, email-шаблони, валюти.</div></div><div class="proc-card reveal"><div class="proc-num">03</div><div class="proc-title">Розробка теми</div><div class="proc-desc">Child theme або нова тема по Figma. Всі сторінки: shop, product, cart, checkout, account.</div></div><div class="proc-card reveal"><div class="proc-num">04</div><div class="proc-title">Плагіни і хуки</div><div class="proc-desc">Кастомна бізнес-логіка через hooks/filters. Ніяких правок ядра WooCommerce.</div></div><div class="proc-card reveal"><div class="proc-num">05</div><div class="proc-title">Інтеграції</div><div class="proc-desc">Payment gateways, доставка, CRM, Google Analytics 4, Facebook Pixel, Meta Conversions API.</div></div><div class="proc-card reveal"><div class="proc-num">06</div><div class="proc-title">Запуск і SEO</div><div class="proc-desc">Performance tuning, Yoast/RankMath, редиректи, тестування перед запуском.</div></div></div>
</section>
<section>
<div class="section-label">Питання та відповіді</div>
<h2 class="section-h2 reveal"><em>Питання та відповіді</em></h2>
<div class="faq-list reveal"><div class="faq-item"><div class="faq-q">Чим відрізняєтесь від звичайного WordPress розробника?<div class="faq-toggle">+</div></div><div class="faq-a"><p>WooCommerce — окрема e-commerce система з власним data layer, order lifecycle, payment API і 700+ хуками. Я спеціалізуюсь на WooCommerce як платформі, а не просто встановлюю плагін.</p></div></div><div class="faq-item"><div class="faq-q">Чи інтегруєте LiqPay і Monobank?<div class="faq-toggle">+</div></div><div class="faq-a"><p>Так. Розробляю власні WC_Payment_Gateway класи для LiqPay, Monobank (MonoPay) і PrivatBank. Webhook для підтвердження, часткові повернення і тестовий sandbox режим.</p></div></div><div class="faq-item"><div class="faq-q">Скільки коштує кастомна WooCommerce тема?<div class="faq-toggle">+</div></div><div class="faq-a"><p>Кастомна тема по Figma — від $600. Кастомні плагіни — від $200 кожен. Повний магазин з темою, payment gateway і доставкою — від $1200. Погодинно: $20/год.</p></div></div><div class="faq-item"><div class="faq-q">Чи прискорите повільний магазин?<div class="faq-toggle">+</div></div><div class="faq-a"><p>Так. Profiling через EXPLAIN ANALYZE, DB індекси, Redis object cache, WebP lazy load, зменшення кількості плагінів. Зазвичай результат — 2–4x швидше.</p></div></div></div>
</section>
<section class="dark">
<div class="section-label">Схожі послуги</div>
<h2 class="section-h2 reveal"><em>Схожі послуги</em></h2>
<div class="rel-grid"><a href="/services/wordpress.html" class="rel-card reveal"><div class="rel-icon">🔷</div><div class="rel-name">WordPress</div><div class="rel-desc">Теми, плагіни, Multisite</div></a><a href="/services/prestashop.html" class="rel-card reveal"><div class="rel-icon">🛒</div><div class="rel-name">PrestaShop</div><div class="rel-desc">Альтернативна e-commerce</div></a><a href="/services/api.html" class="rel-card reveal"><div class="rel-icon">🔌</div><div class="rel-name">REST API</div><div class="rel-desc">Headless WooCommerce через API</div></a><a href="/en/services/woocommerce.html" class="rel-card reveal"><div class="rel-icon">🇬🇧</div><div class="rel-name">English version</div><div class="rel-desc">WooCommerce Developer in English</div></a></div>
</section>
<div class="cta-section reveal">
<div class="cta-bg"></div>
<div class="promo-pill">🎁 <strong>HireRomanDev</strong> — 10% знижки на перший проєкт</div>
<h2 class="cta-title">Готові розпочати <em>проєкт?</em></h2>
<p class="cta-sub">Опишіть задачу — відповім з оцінкою протягом кількох годин.</p>
<div class="cta-btns">
<a href="https://t.me/RomanMatviy" class="btn-p btn-primary" target="_blank" rel="noopener">💬 Написати в Telegram</a>
<a href="/pricing.html" class="btn-p btn-secondary">📄 Переглянути ціни</a>
</div>
</div>
<footer class="main-footer">
<div class="footer-copy">© 2018–2026 <a href="/">Roman Matviy</a> · FullStack Developer · Lviv, Ukraine 🇺🇦</div>
<nav class="footer-nav">
<a href="/">Головна</a><a href="/about.html">Про мене</a>
<a href="/services/">Services</a><a href="/pricing.html">Pricing</a><a href="/stack/">Stack</a>
</nav>
</footer>
<script>
(function(){
var c=document.getElementById('cur'),r=document.getElementById('curRing');
if(c&&r){var mx=0,my=0,rx=0,ry=0;
document.addEventListener('mousemove',function(e){mx=e.clientX;my=e.clientY;c.style.transform='translate('+(mx-4)+'px,'+(my-4)+'px)';});
(function lp(){rx+=(mx-rx)*.12;ry+=(my-ry)*.12;r.style.transform='translate('+(rx-18)+'px,'+(ry-18)+'px)';requestAnimationFrame(lp);})();
document.querySelectorAll('a,button').forEach(function(el){
el.addEventListener('mouseenter',function(){r.classList.add('hovered');});
el.addEventListener('mouseleave',function(){r.classList.remove('hovered');});
});}
var sp=document.getElementById('sp');
if(sp)window.addEventListener('scroll',function(){sp.style.width=(window.scrollY/(document.documentElement.scrollHeight-window.innerHeight)*100)+'%';});
var obs=new IntersectionObserver(function(en){en.forEach(function(e){if(e.isIntersecting)e.target.classList.add('visible');});},{threshold:0.07,rootMargin:'0px 0px -30px 0px'});
document.querySelectorAll('.reveal').forEach(function(el){obs.observe(el);});
var mb=document.getElementById('menuBtn'),mn=document.getElementById('mobileNav'),mc=document.getElementById('mobileClose');
if(mb&&mn&&mc){mb.addEventListener('click',function(){mn.classList.add('open');});mc.addEventListener('click',function(){mn.classList.remove('open');});mn.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){mn.classList.remove('open');});});}
document.querySelectorAll('.faq-q').forEach(function(q){q.addEventListener('click',function(){
var it=q.parentElement,was=it.classList.contains('open');
document.querySelectorAll('.faq-item.open').forEach(function(i){i.classList.remove('open');});
if(!was)it.classList.add('open');
});});
})();
</script>
</body></html>