PluginProbe ʕ •ᴥ•ʔ
ShopEngine Elementor WooCommerce Builder Addon – All in One WooCommerce Solution / 4.8.5
ShopEngine Elementor WooCommerce Builder Addon – All in One WooCommerce Solution v4.8.5
4.9.2 4.9.1 4.9.0 2.0.0 2.1.0 2.2.0 2.2.1 2.2.2 2.3.0 2.4.0 2.5.0 2.5.1 3.0.0 3.1.0 3.1.1 4.0.0 4.0.1 4.1.0 4.1.1 4.2.0 4.2.1 4.3.0 4.3.1 4.4.0 4.5.0 4.5.1 4.6.0 4.6.1 4.6.2 4.6.3 4.6.4 4.6.5 4.6.6 4.6.7 4.6.8 4.6.9 4.7.0 4.7.1 4.7.2 4.7.3 4.7.4 4.7.5 4.7.6 4.7.7 4.7.8 4.7.9 4.8.0 4.8.1 4.8.2 4.8.3 4.8.4 4.8.5 4.8.6 4.8.7 4.8.8 4.8.9 trunk 0.1.2-beta 0.1.3-beta 0.1.4-beta 1.0.0 1.1.0 1.1.1 1.1.2 1.1.3 1.2.0 1.2.1 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.4.0 1.4.1 1.5.0 1.5.1 1.6.0 1.6.1 1.7.0 1.8.0 1.8.1 1.9.0
shopengine / widgets / product-list / product-list.php
shopengine / widgets / product-list Last commit date
screens 3 years ago product-list-config.php 4 years ago product-list.php 2 years ago
product-list.php
1989 lines
1 <?php
2
3 namespace Elementor;
4
5 use ShopEngine\Core\Elementor_Controls\Controls_Manager as ShopEngine_Controls_Manager;
6 use ShopEngine\Widgets\Products;
7
8 defined('ABSPATH') || exit;
9
10
11 class ShopEngine_Product_List extends \ShopEngine\Base\Widget {
12
13 public function config() {
14 return new ShopEngine_Product_List_Config();
15 }
16
17 protected function register_controls() {
18
19 // GENERAL - SECTION
20 $this->start_controls_section(
21 'general',
22 [
23 'label' => esc_html__('General', 'shopengine'),
24 'tab' => Controls_Manager::TAB_CONTENT,
25 ]
26 );
27
28 $this->add_control(
29 'product_view_style',
30 [
31 'label' => esc_html__( 'View Style', 'shopengine' ),
32 'type' => \Elementor\Controls_Manager::CHOOSE,
33 'options' => [
34 'grid' => [
35 'title' => esc_html__( 'Grid', 'shopengine' ),
36 'icon' => 'eicon-gallery-grid',
37 ],
38 'list' => [
39 'title' => esc_html__( 'List', 'shopengine' ),
40 'icon' => 'eicon-editor-list-ul',
41 ]
42 ],
43 'default' => 'grid',
44 'toggle' => true,
45 ]
46 );
47
48 $this->add_control(
49 'products_per_page',
50 [
51 'label' => esc_html__('Products Per Page', 'shopengine'),
52 'type' => Controls_Manager::NUMBER,
53 'default' => 12,
54 ]
55 );
56
57 $this->add_control(
58 'product_order',
59 [
60 'label' => esc_html__('Order', 'shopengine'),
61 'type' => Controls_Manager::SELECT,
62 'default' => 'DESC',
63 'options' => [
64 'ASC' => esc_html__('ASC', 'shopengine'),
65 'DESC' => esc_html__('DESC', 'shopengine'),
66 ],
67 ]
68 );
69
70 $this->add_control(
71 'product_orderby',
72 [
73 'label' => esc_html__('Order By', 'shopengine'),
74 'type' => Controls_Manager::SELECT,
75 'default' => 'date',
76 'options' => $this->config()->product_order_by(),
77 ]
78 );
79
80 $this->add_responsive_control(
81 'column',
82 [
83 'label' => esc_html__('Column', 'shopengine'),
84 'type' => Controls_Manager::NUMBER,
85 'min' => 1,
86 'max' => 12,
87 'step' => 1,
88 'desktop_default' => 3,
89 'tablet_default' => 2,
90 'mobile_default' => 1,
91 'selectors' => [
92 '{{WRAPPER}} .shopengine-product-list .product-list-grid' => 'grid-template-columns: repeat({{VALUE}}, 1fr)',
93 ],
94 ]
95 );
96
97 $this->add_control(
98 'product_by',
99 [
100 'label' => esc_html__('Product Query By', 'shopengine'),
101 'type' => Controls_Manager::SELECT2,
102 'options' => $this->config()->product_query_by(),
103 'default' => 'product',
104 'seperator' => 'before',
105 ]
106 );
107
108 $this->add_control(
109 'term_list',
110 [
111 'label' => esc_html__('Select Categories', 'shopengine'),
112 'type' => ShopEngine_Controls_Manager::AJAXSELECT2,
113 'options' => 'shopengine_ajaxselect2/product_cat',
114 'multiple' => true,
115 'label_block' => true,
116 'condition' => [
117 'product_by' => 'category',
118 ],
119 ]
120 );
121
122 $this->add_control(
123 'tag_lists',
124 [
125 'label' => esc_html__('Select Tags', 'shopengine'),
126 'type' => ShopEngine_Controls_Manager::AJAXSELECT2,
127 'options' => 'shopengine_ajaxselect2/product_tags',
128 'multiple' => true,
129 'label_block' => true,
130 'condition' => [
131 'product_by' => 'tag',
132 ],
133 ]
134 );
135
136 $this->add_control(
137 'product_list',
138 [
139 'label' => esc_html__('Select Products', 'shopengine'),
140 'type' => ShopEngine_Controls_Manager::AJAXSELECT2,
141 'options' => 'shopengine_ajaxselect2/product_list',
142 'multiple' => true,
143 'label_block' => true,
144 'condition' => [
145 'product_by' => 'product',
146 ],
147 ]
148 );
149
150 $this->add_control(
151 'rating_list',
152 [
153 'label' => esc_html__('Select Rating', 'shopengine'),
154 'type' => Controls_Manager::SELECT2,
155 'options' => [
156 '1' => esc_html__('1 star', 'shopengine'),
157 '2' => esc_html__('2 star', 'shopengine'),
158 '3' => esc_html__('3 star', 'shopengine'),
159 '4' => esc_html__('4 star', 'shopengine'),
160 '5' => esc_html__('5 star', 'shopengine'),
161 ],
162 'multiple' => true,
163 'label_block' => true,
164 'default' => [5],
165 'condition' => [
166 'product_by' => 'rating',
167 ],
168 ]
169 );
170
171 $this->add_control(
172 'pa_attribute_list',
173 [
174 'label' => esc_html__('Select Attributes', 'shopengine'),
175 'type' => ShopEngine_Controls_Manager::AJAXSELECT2,
176 'options' => 'shopengine_ajaxselect2/product_pa_list',
177 'multiple' => true,
178 'label_block' => true,
179 'condition' => [
180 'product_by' => 'attribute',
181 ],
182 ]
183 );
184
185 $this->add_control(
186 'author_list',
187 [
188 'label' => esc_html__('Select Authors', 'shopengine'),
189 'type' => ShopEngine_Controls_Manager::AJAXSELECT2,
190 'options' => 'shopengine_ajaxselect2/product_authors',
191 'multiple' => true,
192 'label_block' => true,
193 'condition' => [
194 'product_by' => 'author',
195 ],
196 ]
197 );
198
199 $this->end_controls_section();
200
201 // SETTINGS - SECTION
202 $this->start_controls_section(
203 'settings',
204 [
205 'label' => esc_html__('Settings', 'shopengine'),
206 'tab' => Controls_Manager::TAB_CONTENT,
207 ]
208 );
209
210 // SETTINGS - BADGE
211 $this->add_control(
212 'badge_settings',
213 [
214 'label' => esc_html__('Badge', 'shopengine'),
215 'type' => Controls_Manager::HEADING,
216 'separator' => 'before',
217 ]
218 );
219
220 $this->add_control(
221 'show_sale',
222 [
223 'label' => esc_html__('Show Sale Badge?', 'shopengine'),
224 'type' => Controls_Manager::SWITCHER,
225 'label_on' => esc_html__('Yes', 'shopengine'),
226 'label_off' => esc_html__('No', 'shopengine'),
227 'return_value' => 'yes',
228 'default' => 'yes',
229 ]
230 );
231
232 $this->add_control(
233 'show_off',
234 [
235 'label' => esc_html__('Show Discount Percentage', 'shopengine'),
236 'type' => Controls_Manager::SWITCHER,
237 'label_on' => esc_html__('Yes', 'shopengine'),
238 'label_off' => esc_html__('No', 'shopengine'),
239 'return_value' => 'yes',
240 'default' => 'yes',
241 ]
242 );
243
244 $this->add_control(
245 'show_tag',
246 [
247 'label' => esc_html__('Show Tag', 'shopengine'),
248 'type' => Controls_Manager::SWITCHER,
249 'label_on' => esc_html__('Yes', 'shopengine'),
250 'label_off' => esc_html__('No', 'shopengine'),
251 'return_value' => 'yes',
252 'default' => 'yes',
253 ]
254 );
255
256 $this->add_control(
257 'show_stock_out_badge',
258 [
259 'label' => esc_html__('Show Stock Out Badge', 'shopengine'),
260 'type' => Controls_Manager::SWITCHER,
261 'label_on' => esc_html__('Yes', 'shopengine'),
262 'label_off' => esc_html__('No', 'shopengine'),
263 'return_value' => 'yes',
264 'default' => '',
265 ]
266 );
267
268 $this->add_control(
269 'out_of_stock_product_visibility',
270 [
271 'label' => esc_html__('Out of Stock Visibility', 'shopengine'),
272 'type' => Controls_Manager::SELECT,
273 'default' => 'default',
274 'options' => [
275 'default' => esc_html__('Default', 'shopengine'),
276 'show' => esc_html__('Show', 'shopengine'),
277 'hide' => esc_html__('Hide', 'shopengine')
278 ]
279 ]
280 );
281
282 $this->add_control(
283 'badge_position',
284 [
285 'label' => esc_html__('Badge Position', 'shopengine'),
286 'type' => Controls_Manager::CHOOSE,
287 'options' => [
288 'top-left' => [
289 'title' => esc_html__('Top Left', 'shopengine'),
290 'icon' => 'eicon-h-align-left',
291 ],
292 'top-right' => [
293 'title' => esc_html__('Top Right', 'shopengine'),
294 'icon' => 'eicon-h-align-right',
295 ],
296 'custom' => [
297 'title' => esc_html__('Custom', 'shopengine'),
298 'icon' => 'eicon-settings',
299 ],
300 ],
301 'default' => 'top-right',
302 'toggle' => false,
303 'conditions' => [
304 'relation' => 'or',
305 'terms' => [
306 [
307 'name' => 'show_sale',
308 'operator' => '===',
309 'value' => 'yes',
310 ],
311 [
312 'name' => 'show_off',
313 'operator' => '===',
314 'value' => 'yes',
315 ],
316 ],
317 ],
318 ]
319 );
320
321 $this->add_control(
322 'badge_position_x_axis',
323 [
324 'label' => esc_html__('Badge Position (X axis)', 'shopengine'),
325 'type' => Controls_Manager::SLIDER,
326 'size_units' => ['px', '%'],
327 'range' => [
328 'px' => [
329 'min' => 0,
330 'max' => 1000,
331 'step' => 1,
332 ],
333 '%' => [
334 'min' => 0,
335 'max' => 100,
336 ],
337 ],
338 'default' => [
339 'unit' => '%',
340 'size' => 4,
341 ],
342 'selectors' => [
343 '{{WRAPPER}} .product-tag-sale-badge' => 'left: {{SIZE}}{{UNIT}};',
344 '.rtl {{WRAPPER}} .product-tag-sale-badge' => 'right: {{SIZE}}{{UNIT}};',
345 ],
346 'condition' => [
347 'badge_position' => 'custom',
348 ],
349 ]
350 );
351
352 $this->add_control(
353 'badge_position_y_axis',
354 [
355 'label' => esc_html__('Badge Position (Y axis)', 'shopengine'),
356 'type' => Controls_Manager::SLIDER,
357 'size_units' => ['px', '%'],
358 'range' => [
359 'px' => [
360 'min' => 0,
361 'max' => 1000,
362 'step' => 1,
363 ],
364 '%' => [
365 'min' => 0,
366 'max' => 100,
367 ],
368 ],
369 'default' => [
370 'unit' => '%',
371 'size' => 4,
372 ],
373 'selectors' => [
374 '{{WRAPPER}} .product-tag-sale-badge' => 'top: {{SIZE}}{{UNIT}};',
375 ],
376 'condition' => [
377 'badge_position' => 'custom',
378 ],
379 ]
380 );
381
382 $this->add_control(
383 'badge_align',
384 [
385 'label' => esc_html__('Badge Align', 'shopengine'),
386 'type' => Controls_Manager::CHOOSE,
387 'options' => [
388 'vertical' => [
389 'title' => esc_html__('Vertical', 'shopengine'),
390 'icon' => 'eicon-navigation-vertical',
391 ],
392 'horizontal' => [
393 'title' => esc_html__('Horizontal', 'shopengine'),
394 'icon' => 'eicon-navigation-horizontal',
395 ],
396 ],
397 'default' => 'horizontal',
398 'toggle' => false,
399 'conditions' => [
400 'relation' => 'or',
401 'terms' => [
402 [
403 'name' => 'show_sale',
404 'operator' => '===',
405 'value' => 'yes',
406 ],
407 [
408 'name' => 'show_off',
409 'operator' => '===',
410 'value' => 'yes',
411 ],
412 ],
413 ],
414 ]
415 );
416
417 // SETTINGS - TITLE
418 $this->add_control(
419 'title_settings',
420 [
421 'label' => esc_html__('Title', 'shopengine'),
422 'type' => Controls_Manager::HEADING,
423 'separator' => 'before',
424 ]
425 );
426
427 $this->add_control(
428 'title_character',
429 [
430 'label' => esc_html__('Chracter to Show', 'shopengine'),
431 'description' => esc_html__('Chracter to show in the product title', 'shopengine'),
432 'type' => Controls_Manager::NUMBER,
433 'return_value' => 'yes',
434 'default' => 30,
435 ]
436 );
437
438 // SETTINGS - HOVER
439 $this->add_control(
440 'product_hover_overlay_settings',
441 [
442 'label' => esc_html__('Product Hover', 'shopengine'),
443 'type' => Controls_Manager::HEADING,
444 'separator' => 'before',
445 ]
446 );
447
448 $this->add_control(
449 'show_product_hover_overlay',
450 [
451 'label' => esc_html__('Show Product Hover', 'shopengine'),
452 'description' => esc_html__('Styling controls are in the style tab', 'shopengine'),
453 'type' => Controls_Manager::SWITCHER,
454 'label_on' => esc_html__('Yes', 'shopengine'),
455 'label_off' => esc_html__('No', 'shopengine'),
456 'default' => 'yes',
457 'return_value' => 'yes',
458 'selectors' => [
459 '{{WRAPPER}} .shopengine-product-list .overlay-add-to-cart' => 'display: flex;',
460 ],
461 ]
462 );
463
464 $this->add_control(
465 'product_hover_overlay_position',
466 [
467 'label' => esc_html__('Position', 'shopengine'),
468 'type' => Controls_Manager::CHOOSE,
469 'options' => [
470 'left' => [
471 'title' => esc_html__('Left', 'shopengine'),
472 'icon' => 'eicon-h-align-left',
473 ],
474 'right' => [
475 'title' => esc_html__('Right', 'shopengine'),
476 'icon' => 'eicon-h-align-right',
477 ],
478 'bottom' => [
479 'title' => esc_html__('Bottom', 'shopengine'),
480 'icon' => 'eicon-v-align-bottom',
481 ],
482 'center' => [
483 'title' => esc_html__('Center', 'shopengine'),
484 'icon' => 'eicon-h-align-center',
485 ],
486 ],
487 'default' => 'bottom',
488 'toggle' => false,
489 'condition' => [
490 'show_product_hover_overlay' => 'yes',
491 ],
492 ]
493 );
494
495 // SETTINGS - PRICE
496 $this->add_control(
497 'price_settings',
498 [
499 'label' => esc_html__('Price', 'shopengine'),
500 'type' => Controls_Manager::HEADING,
501 'separator' => 'before',
502 ]
503 );
504
505 $this->add_control(
506 'price_alignment',
507 [
508 'label' => esc_html__('Alignment', 'shopengine'),
509 'type' => Controls_Manager::SELECT,
510 'default' => 'flex-start',
511 'options' => [
512 'flex-start' => esc_html__('Start', 'shopengine'),
513 'center' => esc_html__('Center', 'shopengine'),
514 'flex-end' => esc_html__('End', 'shopengine'),
515 'space-around' => esc_html__('Space Around', 'shopengine'),
516 'space-between' => esc_html__('Space Between', 'shopengine'),
517 'space-evenly' => esc_html__('Space Evenly', 'shopengine'),
518 ],
519 'selectors' => [
520 '{{WRAPPER}} .shopengine-product-list .product-price .price' => 'justify-content: {{VALUE}}',
521 ],
522 ]
523 );
524
525 $this->add_control(
526 'show_off_price_tag',
527 [
528 'label' => esc_html__('Show Off Tag', 'shopengine'),
529 'description' => esc_html__('Styling controls are in the style tab', 'shopengine'),
530 'type' => Controls_Manager::SWITCHER,
531 'label_on' => esc_html__('Yes', 'shopengine'),
532 'label_off' => esc_html__('No', 'shopengine'),
533 'return_value' => 'yes',
534 'default' => 'yes',
535 'selectors' => [
536 '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'display: inline-block;',
537 ],
538 ]
539 );
540
541 // SETTINGS - CATEGORY
542 $this->add_control(
543 'category_settings',
544 [
545 'label' => esc_html__('Category', 'shopengine'),
546 'type' => Controls_Manager::HEADING,
547 'separator' => 'before',
548 ]
549 );
550
551 $this->add_control(
552 'show_category',
553 [
554 'label' => esc_html__('Show Category?', 'shopengine'),
555 'type' => Controls_Manager::SWITCHER,
556 'label_on' => esc_html__('Yes', 'shopengine'),
557 'label_off' => esc_html__('No', 'shopengine'),
558 'return_value' => 'yes',
559 'default' => 'yes',
560 'selectors' => [
561 '{{WRAPPER}} .shopengine-product-list .product-category' => 'display: inline-block;',
562 ],
563 ]
564 );
565
566 $this->add_control(
567 'category_limit',
568 [
569 'label' => esc_html__('Category Limit', 'shopengine'),
570 'type' => Controls_Manager::NUMBER,
571 'default' => 1,
572 'min' => 1,
573 'max' => 100,
574 'step' => 1,
575 'condition' => [
576 'show_category' => 'yes',
577 ],
578 ]
579 );
580
581 // SETTINGS - RATTING
582 $this->add_control(
583 'show_rating',
584 [
585 'label' => esc_html__('Show Rating?', 'shopengine'),
586 'description' => esc_html__('Styling controls are in the style tab', 'shopengine'),
587 'type' => Controls_Manager::SWITCHER,
588 'label_on' => esc_html__('Yes', 'shopengine'),
589 'label_off' => esc_html__('No', 'shopengine'),
590 'default' => 'yes',
591 'selectors' => [
592 '{{WRAPPER}} .shopengine-product-list .product-rating' => 'display: block;',
593 ],
594 'separator' => 'before',
595 ]
596 );
597
598 $this->end_controls_section();
599
600 // STYLE - PRODUCT WRAP
601 $this->start_controls_section(
602 'product_wrap_style_section',
603 [
604 'label' => esc_html__('Product Wrap', 'shopengine'),
605 'tab' => Controls_Manager::TAB_STYLE,
606 ]
607 );
608
609 $this->add_responsive_control(
610 'product_content_align',
611 [
612 'label' => esc_html__('Content Alignment', 'shopengine'),
613 'type' => Controls_Manager::CHOOSE,
614 'options' => [
615 'left' => [
616 'description' => esc_html__('Left', 'shopengine'),
617 'icon' => 'eicon-text-align-left',
618 ],
619 'center' => [
620 'description' => esc_html__('Center', 'shopengine'),
621 'icon' => 'eicon-text-align-center',
622 ],
623 'right' => [
624 'description' => esc_html__('Right', 'shopengine'),
625 'icon' => 'eicon-text-align-right',
626 ],
627 ],
628 'prefix_class' => 'elementor-align-',
629 'selectors_dictionary' => [
630 'left' => 'text-align :left; align-items: flex-start;',
631 'right' => 'text-align :right; align-items: flex-end;',
632 'center' => 'text-align :center; align-items: center;'
633 ],
634 'selectors' => [
635 '{{WRAPPER}} .product-list-grid .shopengine-single-product-item' => '{{VALUE}};',
636 '{{WRAPPER}} .product-list-view .shopengine-single-product-item .list-view-wrapper-contents' => '{{VALUE}};',
637 '.rtl {{WRAPPER}}.elementor-align-left .shopengine-single-product-item' => 'text-align: right;',
638 '.rtl {{WRAPPER}}.elementor-align-right .shopengine-single-product-item' => 'text-align: left;',
639 ],
640 ]
641 );
642
643 $this->add_control(
644 'product_item_bg_color',
645 [
646 'label' => esc_html__('Background Color', 'shopengine'),
647 'type' => Controls_Manager::COLOR,
648 'default' => '#fff',
649 'alpha' => false,
650 'selectors' => [
651 '{{WRAPPER}} .shopengine-single-product-item' => 'background-color: {{VALUE}};',
652 ],
653 ]
654 );
655
656 $this->add_responsive_control(
657 'list_view_product_width',
658 [
659 'label' => esc_html__('List View Product Width(%)', 'shopengine'),
660 'type' => Controls_Manager::SLIDER,
661 'size_units' => ['%','px'],
662 'range' => [
663 '%' => [
664 'min' => 0,
665 'max' => 100
666 ],
667 'px' => [
668 'min' => 0,
669 'max' => 1000
670 ]
671 ],
672 'default' => [
673 'unit' => '%',
674 'size' => '100',
675 ],
676 'selectors' => [
677 '{{WRAPPER}} .shopengine-widget .shopengine-product-list .product-list-view' => 'max-width: {{SIZE}}{{UNIT}}',
678 ],
679 'condition' => [
680 'product_view_style' => 'list'
681 ]
682 ]
683 );
684
685 $this->add_responsive_control(
686 'list_view_product_height',
687 [
688 'label' => esc_html__('List View Product Height (px)', 'shopengine'),
689 'type' => Controls_Manager::SLIDER,
690 'size_units' => ['px'],
691 'range' => [
692 'px' => [
693 'min' => 0,
694 'max' => 1000
695 ],
696 ],
697 'default' => [
698 'unit' => 'px',
699 'size' => '400',
700 ],
701 'selectors' => [
702 '{{WRAPPER}} .shopengine-widget .shopengine-product-list .product-list-view .shopengine-single-product-item' => 'min-height: {{SIZE}}{{UNIT}}',
703 '{{WRAPPER}} .shopengine-widget .shopengine-product-list .product-list-view .shopengine-single-product-item .product-thumb' => 'height: {{SIZE}}{{UNIT}};flex-basis:{{SIZE}}{{UNIT}};',
704 ],
705 'condition' => [
706 'product_view_style' => 'list'
707 ]
708 ]
709 );
710
711 $this->add_responsive_control(
712 'product_item_column_gap',
713 [
714 'label' => esc_html__('Column Gap (px)', 'shopengine'),
715 'type' => Controls_Manager::SLIDER,
716 'size_units' => ['px'],
717 'range' => [
718 'px' => [
719 'min' => 0,
720 'max' => 200,
721 ],
722 ],
723 'default' => [
724 'unit' => 'px',
725 'size' => '20',
726 ],
727 'selectors' => [
728 '{{WRAPPER}} .shopengine-product-list .product-list-grid' => 'grid-column-gap: {{SIZE}}{{UNIT}}',
729 '{{WRAPPER}} .shopengine-widget .shopengine-product-list .product-list-view .shopengine-single-product-item' => 'gap: {{SIZE}}{{UNIT}}',
730 ],
731 ]
732 );
733
734 $this->add_responsive_control(
735 'product_item_row_gap',
736 [
737 'label' => esc_html__('Row Gap (px)', 'shopengine'),
738 'type' => Controls_Manager::SLIDER,
739 'size_units' => ['px'],
740 'range' => [
741 'px' => [
742 'min' => 0,
743 'max' => 200,
744 ],
745 ],
746 'default' => [
747 'unit' => 'px',
748 'size' => '20',
749 ],
750 'selectors' => [
751 '{{WRAPPER}} .shopengine-product-list .product-list-grid' => 'grid-row-gap: {{SIZE}}{{UNIT}}',
752 '{{WRAPPER}} .shopengine-widget .shopengine-product-list .product-list-view' => 'grid-row-gap: {{SIZE}}{{UNIT}}',
753 ],
754 ]
755 );
756
757 $this->add_responsive_control(
758 'product_wrap_padding',
759 [
760 'label' => esc_html__('Padding (px)', 'shopengine'),
761 'type' => Controls_Manager::DIMENSIONS,
762 'size_units' => ['px'],
763 'default' => [
764 'top' => '15',
765 'right' => '15',
766 'bottom' => '15',
767 'left' => '15',
768 'unit' => 'px',
769 'isLinked' => true,
770 ],
771 'selectors' => [
772 '{{WRAPPER}} .shopengine-single-product-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
773 '.rtl {{WRAPPER}} .shopengine-single-product-item' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
774 ],
775 'separator' => 'before',
776 ]
777 );
778
779 $this->add_group_control(
780 Group_Control_Border::get_type(),
781 [
782 'name' => 'product_wrap_border',
783 'label' => esc_html__('Border', 'shopengine'),
784 'selector' => '{{WRAPPER}} .shopengine-single-product-item',
785 'fields_options' => [
786 'width' => [
787 'selectors' => [
788 '{{WRAPPER}} .shopengine-single-product-item' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
789 '.rtl {{WRAPPER}} .shopengine-single-product-item' => 'border-width: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
790 ],
791 ]
792 ],
793 'separator' => 'before',
794 ]
795 );
796
797 $this->end_controls_section();
798
799 // STYLE - PRODUCT IMAGE
800 $this->start_controls_section(
801 'product_image_style',
802 [
803 'label' => esc_html__('Product Image', 'shopengine'),
804 'tab' => Controls_Manager::TAB_STYLE,
805 ]
806 );
807
808 $this->add_control(
809 'product_image_bg',
810 [
811 'label' => esc_html__('Image Background', 'shopengine'),
812 'type' => Controls_Manager::COLOR,
813 'alpha' => false,
814 'selectors' => [
815 '{{WRAPPER}} .product-thumb' => 'background: {{VALUE}}',
816 ],
817 ]
818 );
819
820 $this->add_responsive_control(
821 'product_image_margin',
822 [
823 'label' => esc_html__('Margin (px)', 'shopengine'),
824 'type' => Controls_Manager::DIMENSIONS,
825 'size_units' => ['px'],
826 'default' => [
827 'top' => '0',
828 'right' => '0',
829 'bottom' => '15',
830 'left' => '0',
831 'unit' => 'px',
832 'isLinked' => false,
833 ],
834 'selectors' => [
835 '{{WRAPPER}} .product-thumb' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
836 '.rtl {{WRAPPER}} .product-thumb' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
837 ],
838 'separator' => 'before',
839 ]
840 );
841
842 $this->end_controls_section();
843
844 // STYLE - PRODUCT BADGE
845 $this->start_controls_section(
846 'product_badge_style_section',
847 [
848 'label' => esc_html__('Product Badge', 'shopengine'),
849 'tab' => Controls_Manager::TAB_STYLE,
850 'conditions' => [
851 'relation' => 'or',
852 'terms' => [
853 [
854 'name' => 'show_sale',
855 'operator' => '===',
856 'value' => 'yes',
857 ],
858 [
859 'name' => 'show_off',
860 'operator' => '===',
861 'value' => 'yes',
862 ],
863 ],
864 ],
865 ]
866 );
867
868 $this->add_group_control(
869 Group_Control_Typography::get_type(),
870 [
871 'name' => 'product_badge_typography',
872 'label' => esc_html__('Typography', 'shopengine'),
873 'selector' => '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link',
874 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
875 'fields_options' => [
876 'typography' => [
877 'default' => 'custom',
878 ],
879 'font_weight' => [
880 'default' => '700',
881 ],
882 'font_size' => [
883 'default' => [
884 'size' => '12',
885 'unit' => 'px',
886 ],
887 'label' => esc_html__('Font Size (px)', 'shopengine'),
888 'size_units' => ['px'],
889 ],
890 'line_height' => [
891 'default' => [
892 'size' => '24',
893 'unit' => 'px',
894 ],
895 'size_units' => ['px'], // enable only px
896 'responsive' => false,
897 ],
898 ],
899 ]
900 );
901
902 $this->add_control(
903 'product_badge_color',
904 [
905 'label' => esc_html__('Color', 'shopengine'),
906 'type' => Controls_Manager::COLOR,
907 'default' => '#ffffff',
908 'alpha' => false,
909 'selectors' => [
910 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'color: {{VALUE}}',
911 ],
912 ]
913 );
914
915 $this->add_control(
916 'product_badge_bg',
917 [
918 'label' => esc_html__('Badge Background', 'shopengine'),
919 'type' => Controls_Manager::COLOR,
920 'alpha' => false,
921 'default' => '#f03d3f',
922 'selectors' => [
923 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'background: {{VALUE}}',
924 ],
925 ]
926 );
927
928 $this->add_control(
929 'product_percentage_badge_bg',
930 [
931 'label' => esc_html__('Percentage Badge Background', 'shopengine'),
932 'type' => Controls_Manager::COLOR,
933 'alpha' => false,
934 'selectors' => [
935 '{{WRAPPER}} .product-tag-sale-badge .off' => 'background: {{VALUE}}',
936 ],
937 'condition' => [
938 'show_off' => 'yes',
939 ],
940 ]
941 );
942
943 $this->add_control(
944 'product_tag_badge_bg',
945 [
946 'label' => esc_html__('Tag Badge Background', 'shopengine'),
947 'type' => Controls_Manager::COLOR,
948 'alpha' => false,
949 'selectors' => [
950 '{{WRAPPER}} .product-tag-sale-badge .tag a' => 'background: {{VALUE}}',
951 ],
952 'condition' => [
953 'show_tag' => 'yes',
954 ],
955 ]
956 );
957
958 $this->add_control(
959 'stock_out_badge_bg',
960 [
961 'label' => esc_html__('Stock Out Badge Background', 'shopengine'),
962 'type' => Controls_Manager::COLOR,
963 'alpha' => false,
964 'selectors' => [
965 '{{WRAPPER}} .product-tag-sale-badge .out-of-stock' => 'background: {{VALUE}}',
966 ],
967 'condition' => [
968 'show_stock_out_badge' => 'yes',
969 ],
970 ]
971 );
972
973 $this->add_responsive_control(
974 'product_badge_space_between',
975 [
976 'label' => esc_html__('Space In-between Badge (px)', 'shopengine'),
977 'type' => Controls_Manager::SLIDER,
978 'size_units' => ['px'],
979 'range' => [
980 'px' => [
981 'min' => 0,
982 'max' => 200,
983 ],
984 ],
985 'default' => [
986 'unit' => 'px',
987 'size' => 5,
988 ],
989 'selectors' => [
990 '{{WRAPPER}} .product-tag-sale-badge ul' => 'display:flex;gap: {{SIZE}}{{UNIT}};',
991 '{{WRAPPER}} .product-tag-sale-badge.align-vertical ul li:not(:last-child)' => 'gap: {{SIZE}}{{UNIT}} 0;',
992 ],
993 'separator' => 'before',
994 ]
995 );
996
997 $this->add_responsive_control(
998 'product_badge_padding',
999 [
1000 'label' => esc_html__('Padding (px)', 'shopengine'),
1001 'type' => Controls_Manager::DIMENSIONS,
1002 'size_units' => ['px'],
1003 'default' => [
1004 'top' => '0',
1005 'right' => '10',
1006 'bottom' => '0',
1007 'left' => '10',
1008 'unit' => 'px',
1009 'isLinked' => false,
1010 ],
1011 'selectors' => [
1012 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1013 '.rtl {{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1014 ],
1015 'separator' => 'before',
1016 ]
1017 );
1018
1019 $this->add_responsive_control(
1020 'product_badge_margin',
1021 [
1022 'label' => esc_html__('Margin (px)', 'shopengine'),
1023 'type' => Controls_Manager::DIMENSIONS,
1024 'size_units' => ['px'],
1025 'selectors' => [
1026 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1027 '.rtl {{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1028 ],
1029 'separator' => 'before',
1030 ]
1031 );
1032
1033 $this->add_group_control(
1034 Group_Control_Border::get_type(),
1035 [
1036 'name' => 'badge_border',
1037 'label' => esc_html__('Border', 'shopengine'),
1038 'selector' => '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link ,{{WRAPPER}} .product-tag-sale-badge .no-link.out-of-stock',
1039 'fields_options' => [
1040 'width' => [
1041 'selectors' => [
1042 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link ,{{WRAPPER}} .product-tag-sale-badge .no-link.out-of-stock' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1043 '.rtl {{WRAPPER}} .product-tag-sale-badge .tag a,.rtl {{WRAPPER}} .product-tag-sale-badge .no-link ,.rtl {{WRAPPER}} .product-tag-sale-badge .no-link.out-of-stock' => 'border-width: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1044 ],
1045 ]
1046 ],
1047 'separator' => 'before',
1048 ]
1049 );
1050
1051 $this->add_responsive_control(
1052 'badge_border_radius',
1053 [
1054 'label' => esc_html__('Border Radius', 'shopengine'),
1055 'type' => Controls_Manager::DIMENSIONS,
1056 'size_units' => ['px'],
1057 'default' => [
1058 'top' => '3',
1059 'right' => '3',
1060 'bottom' => '3',
1061 'left' => '3',
1062 ],
1063 'selectors' => [
1064 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1065 '.rtl {{WRAPPER}} .product-tag-sale-badge .tag a,.rtl {{WRAPPER}} .product-tag-sale-badge .no-link' => 'border-radius: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1066 ],
1067 ]
1068 );
1069
1070 $this->end_controls_section();
1071
1072 // STYLE - PRODUCT CATEGORY
1073 $this->start_controls_section(
1074 'product_category_style_section',
1075 [
1076 'label' => esc_html__('Product Category', 'shopengine'),
1077 'tab' => Controls_Manager::TAB_STYLE,
1078 'condition' => [
1079 'show_category' => 'yes',
1080 ],
1081 ]
1082 );
1083
1084 $this->add_group_control(
1085 Group_Control_Typography::get_type(),
1086 [
1087 'name' => 'product_category_typography',
1088 'label' => esc_html__('Typography', 'shopengine'),
1089 'selector' => '{{WRAPPER}} .product-category ul li a',
1090 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
1091 'fields_options' => [
1092 'typography' => [
1093 'default' => 'custom',
1094 ],
1095 'font_weight' => [
1096 'default' => '400',
1097 ],
1098 'font_size' => [
1099 'default' => [
1100 'size' => '13',
1101 'unit' => 'px',
1102 ],
1103 'label' => esc_html__('Font Size (px)', 'shopengine'),
1104 'size_units' => ['px'],
1105 ],
1106 'line_height' => [
1107 'default' => [
1108 'size' => '20',
1109 'unit' => 'px',
1110 ],
1111 'size_units' => ['px'], // enable only px
1112 'responsive' => false,
1113 ],
1114 ],
1115 'separator' => 'after',
1116 ]
1117 );
1118
1119 $this->start_controls_tabs(
1120 'product_category_tabs'
1121 );
1122
1123 $this->start_controls_tab(
1124 'product_category_normal_tab',
1125 [
1126 'label' => esc_html__('Normal', 'shopengine'),
1127 ]
1128 );
1129
1130 $this->add_control(
1131 'product_category_color',
1132 [
1133 'label' => esc_html__('Color', 'shopengine'),
1134 'type' => Controls_Manager::COLOR,
1135 'default' => '#858585',
1136 'alpha' => false,
1137 'selectors' => [
1138 '{{WRAPPER}} .product-category ul li a' => 'color: {{VALUE}};',
1139 ],
1140 ]
1141 );
1142
1143 $this->end_controls_tab();
1144
1145 $this->start_controls_tab(
1146 'product_category_hover_tab',
1147 [
1148 'label' => esc_html__('Hover', 'shopengine'),
1149 ]
1150 );
1151
1152 $this->add_control(
1153 'product_category_hover_color',
1154 [
1155 'label' => esc_html__('Color', 'shopengine'),
1156 'type' => Controls_Manager::COLOR,
1157 'default' => '#F03D3F',
1158 'alpha' => false,
1159 'selectors' => [
1160 '{{WRAPPER}} .product-category ul li a:hover' => 'color: {{VALUE}};',
1161 ],
1162 ]
1163 );
1164
1165 $this->end_controls_tab();
1166 $this->end_controls_tabs();
1167
1168 $this->add_responsive_control(
1169 'product_category_padding',
1170 [
1171 'label' => esc_html__('Padding (px)', 'shopengine'),
1172 'type' => Controls_Manager::DIMENSIONS,
1173 'size_units' => ['px'],
1174 'default' => [
1175 'top' => '0',
1176 'right' => '0',
1177 'bottom' => '5',
1178 'left' => '0',
1179 'unit' => 'px',
1180 'isLinked' => false,
1181 ],
1182 'selectors' => [
1183 '{{WRAPPER}} .product-category' => 'line-height: 0; padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1184 '.rtl {{WRAPPER}} .product-category' => 'line-height: 0; padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1185 ],
1186 'separator' => 'before',
1187 ]
1188 );
1189
1190 $this->end_controls_section();
1191
1192 // STYLE - PRODUCT TITLE
1193 $this->start_controls_section(
1194 'product_title_style_section',
1195 [
1196 'label' => esc_html__('Product Title', 'shopengine'),
1197 'tab' => Controls_Manager::TAB_STYLE,
1198 ]
1199 );
1200
1201 $this->add_group_control(
1202 Group_Control_Typography::get_type(),
1203 [
1204 'name' => 'product_title_typography',
1205 'label' => esc_html__('Typography', 'shopengine'),
1206 'selector' => '{{WRAPPER}} .product-title',
1207 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
1208 'fields_options' => [
1209 'typography' => [
1210 'default' => 'custom',
1211 ],
1212 'font_weight' => [
1213 'default' => '400',
1214 ],
1215 'font_size' => [
1216 'default' => [
1217 'size' => '15',
1218 'unit' => 'px',
1219 ],
1220 'label' => esc_html__('Font Size (px)', 'shopengine'),
1221 'size_units' => ['px'],
1222 ],
1223 'line_height' => [
1224 'default' => [
1225 'size' => '18',
1226 'unit' => 'px',
1227 ],
1228 'size_units' => ['px'], // enable only px
1229 'responsive' => false,
1230 ],
1231 ],
1232 ]
1233 );
1234
1235 $this->start_controls_tabs(
1236 'product_title_color_tabs'
1237 );
1238
1239 $this->start_controls_tab(
1240 'product_title_color_normal_tab',
1241 [
1242 'label' => esc_html__('Normal', 'shopengine'),
1243 ]
1244 );
1245
1246 $this->add_control(
1247 'product_title_color',
1248 [
1249 'label' => esc_html__('Color', 'shopengine'),
1250 'type' => Controls_Manager::COLOR,
1251 'default' => '#101010',
1252 'alpha' => false,
1253 'selectors' => [
1254 '{{WRAPPER}} .product-title a' => 'color: {{VALUE}};',
1255 ],
1256 ]
1257 );
1258
1259 $this->end_controls_tab();
1260
1261 $this->start_controls_tab(
1262 'product_title_color_hover_tab',
1263 [
1264 'label' => esc_html__('Hover', 'shopengine'),
1265 ]
1266 );
1267
1268 $this->add_control(
1269 'product_title_hover_color',
1270 [
1271 'label' => esc_html__('Color', 'shopengine'),
1272 'type' => Controls_Manager::COLOR,
1273 'default' => '#F03D3F',
1274 'alpha' => false,
1275 'selectors' => [
1276 '{{WRAPPER}} .product-title a:hover' => 'color: {{VALUE}};',
1277 ],
1278 ]
1279 );
1280
1281 $this->end_controls_tab();
1282 $this->end_controls_tabs();
1283
1284 $this->add_responsive_control(
1285 'product_title_padding',
1286 [
1287 'label' => esc_html__('Padding (px)', 'shopengine'),
1288 'type' => Controls_Manager::DIMENSIONS,
1289 'size_units' => ['px'],
1290 'default' => [
1291 'top' => '0',
1292 'right' => '0',
1293 'bottom' => '8',
1294 'left' => '0',
1295 'unit' => 'px',
1296 'isLinked' => false,
1297 ],
1298 'selectors' => [
1299 '{{WRAPPER}} .product-title' => 'margin: 0; padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1300 '.rtl {{WRAPPER}} .product-title' => 'margin: 0; padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1301 ],
1302 'separator' => 'before',
1303 ]
1304 );
1305
1306 $this->end_controls_section();
1307
1308 // STYLE - PRODUCT RATING
1309 $this->start_controls_section(
1310 'product_rating_style_section',
1311 [
1312 'label' => esc_html__('Product Rating', 'shopengine'),
1313 'tab' => Controls_Manager::TAB_STYLE,
1314 'condition' => [
1315 'show_rating' => 'yes',
1316 ],
1317 ]
1318 );
1319
1320 $this->add_control(
1321 'product_rating_star_size',
1322 [
1323 'label' => esc_html__('Rating Star Size', 'shopengine'),
1324 'type' => Controls_Manager::SLIDER,
1325 'size_units' => ['px'],
1326 'range' => [
1327 'px' => [
1328 'min' => 0,
1329 'max' => 100,
1330 'step' => 1,
1331 ],
1332 ],
1333 'default' => [
1334 'unit' => 'px',
1335 'size' => 12,
1336 ],
1337 'selectors' => [
1338 '{{WRAPPER}} .product-rating .star-rating' => 'font-size: {{SIZE}}{{UNIT}};',
1339 ],
1340 'separator' => 'before',
1341 ]
1342 );
1343
1344 $this->add_control(
1345 'product_rating_star_color',
1346 [
1347 'label' => esc_html__('Star Color', 'shopengine'),
1348 'type' => Controls_Manager::COLOR,
1349 'default' => '#fec42d',
1350 'alpha' => false,
1351 'selectors' => [
1352 '{{WRAPPER}} .product-rating .star-rating span::before' => 'color: {{VALUE}};',
1353 ],
1354 ]
1355 );
1356
1357 $this->add_control(
1358 'product_rating_empty_star_color',
1359 [
1360 'label' => esc_html__('Empty Star Color', 'shopengine'),
1361 'type' => Controls_Manager::COLOR,
1362 'default' => '#fec42d',
1363 'alpha' => false,
1364 'selectors' => [
1365 '{{WRAPPER}} .product-rating .star-rating::before' => 'color: {{VALUE}};',
1366 ],
1367 ]
1368 );
1369
1370 $this->add_control(
1371 'product_rating_count_color',
1372 [
1373 'label' => esc_html__('Count Color', 'shopengine'),
1374 'type' => Controls_Manager::COLOR,
1375 'default' => '#999999',
1376 'alpha' => false,
1377 'selectors' => [
1378 '{{WRAPPER}} .rating-count' => 'color: {{VALUE}}',
1379 ],
1380 ]
1381 );
1382
1383 $this->add_group_control(
1384 Group_Control_Typography::get_type(),
1385 [
1386 'name' => 'product_rating_count_typography',
1387 'label' => esc_html__('Count Typography', 'shopengine'),
1388 'selector' => '{{WRAPPER}} .rating-count',
1389 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
1390 'fields_options' => [
1391 'typography' => [
1392 'default' => 'custom',
1393 ],
1394 'font_weight' => [
1395 'default' => '400',
1396 ],
1397 'font_size' => [
1398 'default' => [
1399 'size' => '12',
1400 'unit' => 'px',
1401 ],
1402 'label' => esc_html__('Font Size (px)', 'shopengine'),
1403 'size_units' => ['px'],
1404 ],
1405 'line_height' => [
1406 'default' => [
1407 'size' => '12',
1408 'unit' => 'px',
1409 ],
1410 'size_units' => ['px'], // enable only px
1411 'responsive' => false,
1412 ],
1413 ],
1414 ]
1415 );
1416
1417 $this->add_responsive_control(
1418 'product_rating_padding',
1419 [
1420 'label' => esc_html__('Padding (px)', 'shopengine'),
1421 'type' => Controls_Manager::DIMENSIONS,
1422 'size_units' => ['px'],
1423 'default' => [
1424 'top' => '0',
1425 'right' => '0',
1426 'bottom' => '20',
1427 'left' => '0',
1428 'unit' => 'px',
1429 'isLinked' => false,
1430 ],
1431 'selectors' => [
1432 '{{WRAPPER}} .product-rating' => 'line-height: 0; padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1433 '.rtl {{WRAPPER}} .product-rating' => 'line-height: 0; padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1434 ],
1435 'separator' => 'before',
1436 ]
1437 );
1438
1439 $this->end_controls_section();
1440
1441 // STYLE - PRODUCT PRICE
1442 $this->start_controls_section(
1443 'product_price_style_section',
1444 [
1445 'label' => esc_html__('Product Price', 'shopengine'),
1446 'tab' => Controls_Manager::TAB_STYLE,
1447 ]
1448 );
1449
1450 $this->add_control(
1451 'product_price_price_color',
1452 [
1453 'label' => esc_html__('Color', 'shopengine'),
1454 'type' => Controls_Manager::COLOR,
1455 'default' => '#101010',
1456 'alpha' => false,
1457 'selectors' => [
1458 '{{WRAPPER}} .product-price :is(.price, .amount, bdi)' => 'color: {{VALUE}};',
1459 ],
1460 ]
1461 );
1462
1463 $this->add_control(
1464 'product_price_sale_price_color',
1465 [
1466 'label' => esc_html__('Sale Color', 'shopengine'),
1467 'type' => Controls_Manager::COLOR,
1468 'alpha' => false,
1469 'default' => '#999999',
1470 'selectors' => [
1471 '{{WRAPPER}} .product-price .price del' => 'color: {{VALUE}};',
1472 ],
1473 ]
1474 );
1475
1476 $this->add_group_control(
1477 Group_Control_Typography::get_type(),
1478 [
1479 'name' => 'product_price_typography',
1480 'label' => esc_html__('Typography', 'shopengine'),
1481 'selector' => '{{WRAPPER}} .product-price .price',
1482 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
1483 'fields_options' => [
1484 'typography' => [
1485 'default' => 'custom',
1486 ],
1487 'font_weight' => [
1488 'default' => '700',
1489 ],
1490 'font_size' => [
1491 'default' => [
1492 'size' => '16',
1493 'unit' => 'px',
1494 ],
1495 'label' => esc_html__('Font Size (px)', 'shopengine'),
1496 'size_units' => ['px'],
1497 ],
1498 'line_height' => [
1499 'default' => [
1500 'size' => '20',
1501 'unit' => 'px',
1502 ],
1503 'label' => esc_html__('Line Height (px)', 'shopengine'),
1504 'size_units' => ['px'], // enable only px
1505 'responsive' => false,
1506 ],
1507 ],
1508 ]
1509 );
1510
1511 $this->add_control(
1512 'product_price_space_between',
1513 [
1514 'label' => esc_html__('Space In-between Prices (px)', 'shopengine'),
1515 'type' => Controls_Manager::SLIDER,
1516 'size_units' => ['px'],
1517 'range' => [
1518 'px' => [
1519 'min' => 0,
1520 'max' => 200,
1521 'step' => 1,
1522 ],
1523 ],
1524 'default' => [
1525 'unit' => 'px',
1526 'size' => 5,
1527 ],
1528 'selectors' => [
1529 '{{WRAPPER}} .shopengine-product-list .product-price .price ins' => 'margin-right: {{SIZE}}{{UNIT}};',
1530 '.rtl {{WRAPPER}} .shopengine-product-list .product-price .price ins' => 'margin-left: {{SIZE}}{{UNIT}};',
1531 ],
1532
1533 ]
1534 );
1535
1536 $this->add_control(
1537 'product_price_discount_badge_style_section',
1538 [
1539 'label' => esc_html__('Price Discount Badge', 'shopengine'),
1540 'type' => Controls_Manager::HEADING,
1541 'separator' => 'before',
1542 'condition' => [
1543 'show_off_price_tag' => 'yes',
1544 ],
1545 ]
1546 );
1547
1548 $this->add_control(
1549 'product_price_discount_badge_color',
1550 [
1551 'label' => esc_html__('Color', 'shopengine'),
1552 'type' => Controls_Manager::COLOR,
1553 'default' => '#FFFFFF',
1554 'alpha' => false,
1555 'selectors' => [
1556 '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'color: {{VALUE}};',
1557 ],
1558 'condition' => [
1559 'show_off_price_tag' => 'yes',
1560 ],
1561 ]
1562 );
1563
1564 $this->add_control(
1565 'product_price_discount_badge_bg_color',
1566 [
1567 'label' => esc_html__('Background', 'shopengine'),
1568 'type' => Controls_Manager::COLOR,
1569 'default' => '#F54F29',
1570 'alpha' => false,
1571 'selectors' => [
1572 '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'background: {{VALUE}};',
1573 ],
1574 'condition' => [
1575 'show_off_price_tag' => 'yes',
1576 ],
1577 ]
1578 );
1579
1580 $this->add_group_control(
1581 Group_Control_Typography::get_type(),
1582 [
1583 'name' => 'product_price_discount_badge_typography',
1584 'label' => esc_html__('Typography', 'shopengine'),
1585 'description' => esc_html__('Typography for sale price and discount badge', 'shopengine'),
1586 'selector' => '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge',
1587 'exclude' => ['font_family', 'font_style', 'letter_spacing', 'text_decoration'],
1588 'fields_options' => [
1589 'typography' => [
1590 'default' => 'custom',
1591 'label' => esc_html__('Typography Sale and Discount', 'shopengine'),
1592 ],
1593 'font_weight' => [
1594 'default' => '700',
1595 ],
1596 'font_size' => [
1597 'default' => [
1598 'size' => '16',
1599 'unit' => 'px',
1600 ],
1601 'label' => esc_html__('Font Size (px)', 'shopengine'),
1602 'size_units' => ['px'],
1603 ],
1604 'line_height' => [
1605 'default' => [
1606 'size' => '24',
1607 'unit' => 'px',
1608 ],
1609 'label' => esc_html__('Line Height (px)', 'shopengine'),
1610 'size_units' => ['px'], // enable only px
1611 'responsive' => false,
1612 ],
1613 ],
1614 ]
1615 );
1616
1617 $this->add_responsive_control(
1618 'product_price_discount_badge_padding',
1619 [
1620 'label' => esc_html__('Badge Padding', 'shopengine'),
1621 'type' => Controls_Manager::DIMENSIONS,
1622 'size_units' => ['px'],
1623 'default' => [
1624 'top' => '0',
1625 'right' => '10',
1626 'bottom' => '0',
1627 'left' => '10',
1628 'unit' => 'px',
1629 'isLinked' => false,
1630 ],
1631 'selectors' => [
1632 '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1633 '.rtl {{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1634 ],
1635 'condition' => [
1636 'show_off_price_tag' => 'yes',
1637 ],
1638 'separator' => 'before',
1639 ]
1640 );
1641
1642 $this->add_responsive_control(
1643 'product_price_discount_badge_margin',
1644 [
1645 'label' => esc_html__('Badge Margin', 'shopengine'),
1646 'type' => Controls_Manager::DIMENSIONS,
1647 'size_units' => ['px'],
1648 'default' => [
1649 'top' => '0',
1650 'right' => '0',
1651 'bottom' => '0',
1652 'left' => '5',
1653 'unit' => 'px',
1654 'isLinked' => false,
1655 ],
1656 'selectors' => [
1657 '{{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1658 '.rtl {{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1659 ],
1660 'condition' => [
1661 'show_off_price_tag' => 'yes',
1662 ],
1663 'separator' => 'before',
1664 ]
1665 );
1666
1667 $this->add_responsive_control(
1668 'product_price_wrap_padding',
1669 [
1670 'label' => esc_html__('Wrap Padding (px)', 'shopengine'),
1671 'type' => Controls_Manager::DIMENSIONS,
1672 'size_units' => ['px'],
1673 'default' => [
1674 'top' => '0',
1675 'right' => '0',
1676 'bottom' => '15',
1677 'left' => '0',
1678 'unit' => 'px',
1679 'isLinked' => false,
1680 ],
1681 'selectors' => [
1682 '{{WRAPPER}} .product-price' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1683 '.rtl {{WRAPPER}} .product-price' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1684 ],
1685 'separator' => 'before',
1686 ]
1687 );
1688
1689 $this->end_controls_section();
1690
1691 // STYLE - PRODUCT HOVER
1692 $this->start_controls_section(
1693 'product_hover_overlay_style_section',
1694 [
1695 'label' => esc_html__('Product Hover', 'shopengine'),
1696 'tab' => Controls_Manager::TAB_STYLE,
1697 'condition' => [
1698 'show_product_hover_overlay' => 'yes',
1699 ],
1700 ]
1701 );
1702
1703 $this->start_controls_tabs(
1704 'product_hover_overlay_color_tabs'
1705 );
1706
1707 $this->start_controls_tab(
1708 'product_hover_overlay_color_normal_tab',
1709 [
1710 'label' => esc_html__('Normal', 'shopengine'),
1711 ]
1712 );
1713
1714 $this->add_control(
1715 'product_hover_overlay_color',
1716 [
1717 'label' => esc_html__('Color', 'shopengine'),
1718 'type' => Controls_Manager::COLOR,
1719 'default' => '#101010',
1720 'alpha' => false,
1721 'selectors' => [
1722 '{{WRAPPER}} .overlay-add-to-cart a::before' => 'color: {{VALUE}};',
1723 '{{WRAPPER}} .overlay-add-to-cart a::after' => 'color: {{VALUE}};',
1724 ],
1725 ]
1726 );
1727
1728 $this->add_control(
1729 'product_hover_overlay_bg_color',
1730 [
1731 'label' => esc_html__('Background Color', 'shopengine'),
1732 'type' => Controls_Manager::COLOR,
1733 'alpha' => false,
1734 'default' => '#ffffff',
1735 'selectors' => [
1736 '{{WRAPPER}} .overlay-add-to-cart a' => 'background: {{VALUE}} !important;',
1737 ],
1738 ]
1739 );
1740
1741 $this->end_controls_tab();
1742
1743 $this->start_controls_tab(
1744 'product_hover_overlay_color_hover_tab',
1745 [
1746 'label' => esc_html__('Hover', 'shopengine'),
1747 ]
1748 );
1749
1750 $this->add_control(
1751 'product_hover_overlay_hover_color',
1752 [
1753 'label' => esc_html__('Color', 'shopengine'),
1754 'type' => Controls_Manager::COLOR,
1755 'default' => '#F03D3F',
1756 'alpha' => false,
1757 'selectors' => [
1758 '{{WRAPPER}} .overlay-add-to-cart a.active::before' => 'color: {{VALUE}};',
1759 '{{WRAPPER}} .overlay-add-to-cart a.added::before' => 'color: {{VALUE}};',
1760 '{{WRAPPER}} .overlay-add-to-cart a.loading::after' => 'color: {{VALUE}};',
1761 '{{WRAPPER}} .overlay-add-to-cart a:hover::before' => 'color: {{VALUE}};',
1762 '{{WRAPPER}} .overlay-add-to-cart a:hover::after' => 'color: {{VALUE}};',
1763 ],
1764 ]
1765 );
1766
1767 $this->add_control(
1768 'product_hover_overlay_hover_bg_color',
1769 [
1770 'label' => esc_html__('Background Color', 'shopengine'),
1771 'type' => Controls_Manager::COLOR,
1772 'default' => '#ffffff',
1773 'alpha' => false,
1774 'selectors' => [
1775 '{{WRAPPER}} .overlay-add-to-cart a.active' => 'background: {{VALUE}} !important;',
1776 '{{WRAPPER}} .overlay-add-to-cart a:hover' => 'background: {{VALUE}} !important;',
1777 '{{WRAPPER}} .overlay-add-to-cart a:hover' => 'background: {{VALUE}} !important;',
1778 ],
1779 ]
1780 );
1781
1782 $this->end_controls_tab();
1783 $this->end_controls_tabs();
1784
1785 $this->add_responsive_control(
1786 'product_hover_overlay_font_size',
1787 [
1788 'label' => esc_html__('Font Size (px)', 'shopengine'),
1789 'type' => Controls_Manager::SLIDER,
1790 'size_units' => ['px'],
1791 'range' => [
1792 'px' => [
1793 'min' => 0,
1794 'max' => 200,
1795 ],
1796 ],
1797 'default' => [
1798 'unit' => 'px',
1799 'size' => 18,
1800 ],
1801 'selectors' => [
1802 '{{WRAPPER}} .overlay-add-to-cart a::before' => 'font-size: {{SIZE}}{{UNIT}};',
1803 '{{WRAPPER}} .overlay-add-to-cart a::after' => 'font-size: {{SIZE}}{{UNIT}};',
1804 ],
1805 'separator' => 'before',
1806 ]
1807 );
1808
1809 $this->add_responsive_control(
1810 'product_hover_overlay_padding',
1811 [
1812 'label' => esc_html__('Item Padding (px)', 'shopengine'),
1813 'type' => Controls_Manager::DIMENSIONS,
1814 'size_units' => ['px'],
1815 'default' => [
1816 'top' => '10',
1817 'right' => '22',
1818 'bottom' => '10',
1819 'left' => '22',
1820 'unit' => 'px',
1821 'isLinked' => false,
1822 ],
1823 'selectors' => [
1824 '{{WRAPPER}} .overlay-add-to-cart a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1825 '.rtl {{WRAPPER}} .overlay-add-to-cart a' => 'padding: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1826 ],
1827 'separator' => 'before',
1828 ]
1829 );
1830
1831 $this->add_responsive_control(
1832 'product_hover_overlay_item_space_between',
1833 [
1834 'label' => esc_html__('Space In-between Items (px)', 'shopengine'),
1835 'type' => Controls_Manager::SLIDER,
1836 'size_units' => ['px'],
1837 'range' => [
1838 'px' => [
1839 'min' => 0,
1840 'max' => 200,
1841 ],
1842 ],
1843 'default' => [
1844 'unit' => 'px',
1845 'size' => 0,
1846 ],
1847 'selectors' => [
1848 '{{WRAPPER}} .overlay-add-to-cart.position-bottom a:not(:last-child)' => 'margin-right: {{SIZE}}{{UNIT}};',
1849 '.rtl {{WRAPPER}} .overlay-add-to-cart.position-bottom a:not(:last-child)' => 'margin-left: {{SIZE}}{{UNIT}};',
1850 '{{WRAPPER}} .overlay-add-to-cart.position-left a:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}};',
1851 '{{WRAPPER}} .overlay-add-to-cart.position-right a:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}};',
1852 '{{WRAPPER}} .overlay-add-to-cart.position-center a:not(:nth-child(2n))' => 'margin-right: {{SIZE}}{{UNIT}};',
1853 '.rtl {{WRAPPER}} .overlay-add-to-cart.position-center a:not(:nth-child(2n))' => 'margin-left: {{SIZE}}{{UNIT}};',
1854 '{{WRAPPER}} .overlay-add-to-cart.position-center a:not(:nth-child(1), :nth-child(2))' => 'margin-top: {{SIZE}}{{UNIT}};',
1855 ],
1856 'separator' => 'before',
1857 ]
1858 );
1859
1860 $this->add_group_control(
1861 Group_Control_Border::get_type(),
1862 [
1863 'name' => 'product_hover_overlay_border',
1864 'label' => esc_html__('Border', 'shopengine'),
1865 'fields_options' => [
1866 'border' => [
1867 'default' => '',
1868 'selectors' => [
1869 '{{SELECTOR}} .overlay-add-to-cart' => 'border-style: {{VALUE}};',
1870 '{{SELECTOR}} .overlay-add-to-cart a:not(:last-child)' => 'border-style: {{VALUE}};',
1871 ],
1872 ],
1873 'width' => [
1874 'label' => esc_html__('Border Width', 'shopengine'),
1875 'default' => [
1876 'top' => '0',
1877 'right' => '0',
1878 'bottom' => '0',
1879 'left' => '0',
1880 'isLinked' => true,
1881 ],
1882 'selectors' => [
1883 '{{SELECTOR}} .overlay-add-to-cart' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1884 '.rtl {{SELECTOR}} .overlay-add-to-cart' => 'border-width: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1885 '{{SELECTOR}} .overlay-add-to-cart a:not(:last-child)' => 'border-width: 0 {{RIGHT}}{{UNIT}} 0 0;',
1886 '{{SELECTOR}} .overlay-add-to-cart a:not(:last-child)' => 'border-width: 0 0 0 {{RIGHT}}{{UNIT}};',
1887 ],
1888 ],
1889 'color' => [
1890 'label' => esc_html__('Border Color', 'shopengine'),
1891 'default' => '#F2F2F2',
1892 'selectors' => [
1893 '{{SELECTOR}} .overlay-add-to-cart' => 'border-color: {{VALUE}};',
1894 '{{SELECTOR}} .overlay-add-to-cart a:not(:last-child)' => 'border-color: {{VALUE}};',
1895 ],
1896 ],
1897 ],
1898 'separator' => 'before',
1899 ]
1900 );
1901
1902 $this->add_responsive_control(
1903 'product_hover_overlay_border_radius',
1904 [
1905 'label' => esc_html__('Border Radius (px)', 'shopengine'),
1906 'type' => Controls_Manager::DIMENSIONS,
1907 'size_units' => ['px'],
1908 'default' => [
1909 'top' => '5',
1910 'right' => '5',
1911 'bottom' => '0',
1912 'left' => '0',
1913 'unit' => 'px',
1914 'isLinked' => false,
1915 ],
1916 'selectors' => [
1917 '{{WRAPPER}} .overlay-add-to-cart' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1918 '.rtl {{WRAPPER}} .overlay-add-to-cart' => 'border-radius: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1919 ],
1920 'separator' => 'before',
1921 ]
1922 );
1923
1924 $this->add_responsive_control(
1925 'product_hover_overlay_margin',
1926 [
1927 'label' => esc_html__('Wrap Margin (px)', 'shopengine'),
1928 'type' => Controls_Manager::DIMENSIONS,
1929 'size_units' => ['px'],
1930 'default' => [
1931 'top' => '0',
1932 'right' => '0',
1933 'bottom' => '0',
1934 'left' => '0',
1935 'unit' => 'px',
1936 'isLinked' => false,
1937 ],
1938 'selectors' => [
1939 '{{WRAPPER}} .overlay-add-to-cart' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1940 '.rtl {{WRAPPER}} .overlay-add-to-cart' => 'margin: {{TOP}}{{UNIT}} {{LEFT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{RIGHT}}{{UNIT}};',
1941 ],
1942 'separator' => 'before',
1943 ]
1944 );
1945
1946 $this->end_controls_section();
1947
1948
1949 /**
1950 * Section: Global Font
1951 */
1952 $this->start_controls_section(
1953 'shopengine_section_style_global',
1954 [
1955 'label' => esc_html__('Global Font', 'shopengine'),
1956 'tab' => Controls_Manager::TAB_STYLE,
1957 ]
1958 );
1959 $this->add_control(
1960 'shopengine_product_list_font_family',
1961 [
1962 'label' => esc_html__('Font Family', 'shopengine'),
1963 'description' => esc_html__('This font family is set for this specific widget.', 'shopengine'),
1964 'type' => Controls_Manager::FONT,
1965 'selectors' => [
1966 '{{WRAPPER}} .product-tag-sale-badge .tag a, {{WRAPPER}} .product-tag-sale-badge .no-link,
1967 {{WRAPPER}} .product-category ul li a,
1968 {{WRAPPER}} .product-title,
1969 {{WRAPPER}} .rating-count,
1970 {{WRAPPER}} .product-price .price,
1971 {{WRAPPER}} .shopengine-product-list .product-price .price .shopengine-discount-badge' => 'font-family: {{VALUE}};',
1972 ],
1973 ]
1974 );
1975 $this->end_controls_section();
1976 }
1977
1978 protected function screen() {
1979
1980 $settings = $this->get_settings_for_display();
1981
1982 extract($settings);
1983
1984 $tpl = Products::instance()->get_widget_template($this->get_name());
1985
1986 include $tpl;
1987 }
1988 }
1989