Из этого руководства вы узнаете, как сделать свой магазин WooCommerce немного более стильным, организовав архив продуктов с помощью вкладок. Мы создадим вкладки с многостолбцовой раскладкой, многорядной каруселью и сеткой.
Что мы собираемся построить
На следующих этапах мы создадим плагин WordPress, внутри которого мы настроим необходимые шорткоды. Если вы хотите продолжить работу с архивом продуктов WooCommerce, вы можете преобразовать его в блок Гутенберга, использовать его с Elementor в качестве виджета или интегрировать с Visual Composer.
Этот архив продуктов с вкладками идеально подходит для показа последних, популярных, распродающихся и самых продаваемых продуктов, например:
Итак, начнем!
1. Создайте плагин WordPress
На вашем сайте WordPress в разделе wp-content / plugins создайте папку с именем (возможно, не самое оригинальное имя) «woocommerce-products», затем внутри этой папки создайте файл php с тем же именем. Откройте файл и вставьте в него код ниже (измените детали, чтобы они соответствовали вашим собственным):
|
1
|
/* Plugin Name: WooCommerce products Plugin URI: https://www.enovathemes.com Description: Better product grouping presentation for your WooCommerce shop Author: Enovathemes Version: 1.0 Author URI: http://enovathemes.com */ if ( ! defined( ‘ABSPATH’ ) ) { exit;
|
Здесь мы ничего не сделали, кроме определения имени нашего плагина и предоставления некоторой метаинформации.
Сценарии и стили
Для нашего плагина архива продуктов WooCommerce нам нужно будет поставить в очередь необходимые сценарии и стили, поэтому добавьте следующий фрагмент кода:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
// Enqueue/register styles and scripts
function plugin_scripts_styles(){
wp_enqueue_style( ‘style’, plugins_url(‘/css/style.css’, __FILE__ ), array(), ‘1.0.0’ );
// Required Plugins
wp_enqueue_script( ‘imagesloaded’);
wp_enqueue_script( ‘owl-carousel’, plugins_url(‘/js/owl.carousel.js’, __FILE__ ), array(‘jquery’), », true);
// Main js file
wp_enqueue_script( ‘main’, plugins_url(‘/js/main.js’, __FILE__ ), array(‘jquery’), », true);
}
add_action( ‘wp_enqueue_scripts’, ‘plugin_scripts_styles’ );
|
Сначала мы добавили базовый CSS-файл для хранения наших стилей. Затем мы загрузили встроенный плагин imageLoaded (который поставляется с ядром WordPress), и для создания карусели мы будем использовать чрезвычайно популярный плагин jQuery owlCarousel . И, конечно же, основной файл JS.
Примечание . Убедитесь, что эти файлы добавлены в папку плагинов в соответствующих подпапках.
Для получения дополнительной информации о создании плагинов и шорткодов WordPress или дополнительной информации об использовании owl.js, вот некоторые рекомендуемые учебники по Tuts +:
-
JQueryКак создать полноэкранный адаптивный слайдер карусели с Owl.js -
ПлагиныСовет: использование шорткодов в разработке тем
-
Плагины для WordPress3 практических проекта для обучения написанию плагинов WordPress
-
WordPressВведение в разработку плагинов WordPress
2. Создайте вкладку Shortcode
На этом шаге мы создадим шорткод для вкладки. На самом деле он будет состоять из двух шорткодов; контейнер родительской вкладки, а затем дочерние элементы вкладки. Для первого родительского контейнера добавьте этот код в файл PHP:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// Create tab shortcode
function et_tab($atts, $content = null) {
extract(shortcode_atts(array(), $atts));
$output = »;
static $id_counter = 1;
$class = array();
$class[] = ‘et-tab’;
$class[] = ‘et-clearfix’;
$output .='<div id=»et-tab-‘.$id_counter.’» class=»‘.implode(» «, $class).’»>’;
$output .= do_shortcode($content);
$output .= ‘</div>’;
$id_counter++;
return $output;
}
add_shortcode(‘et_tab’, ‘et_tab’);
|
Этот шорткод не требует никаких атрибутов, он просто оборачивает элементы вкладки внутри него.
Говоря об элементах вкладок, добавьте следующий код, чтобы создать дочерний элемент элемента вкладки:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
function et_tab_item($atts, $content = null) {
extract(shortcode_atts(array(
‘title’ => »,
‘active’ => ‘false’,
), $atts));
$output = »;
static $id_counter = 1;
$class = array();
$class[] = ‘tab-item’;
$class[] = ‘et-clearfix’;
$class[] = ‘active-‘.esc_attr($active);
$output .= ‘<div data-target=»tab-‘. sanitize_title( $title ) .’» class=»‘.implode(‘ ‘,$class).’»>’;
if (isset($title) && !empty($title)) {
$output .= esc_attr($title);
}
$output .= ‘</div> ‘;
$output .= ‘<div id=»tab-‘.sanitize_title($title).’-‘.$id_counter.’» class=»tab-content et-clearfix»>’;
$output .= do_shortcode($content);
$output .= ‘</div>’;
$id_counter++;
return $output;
}
add_shortcode(‘et_tab_item’, ‘et_tab_item’);
|
Этот шорткод имеет два атрибута; заголовок и активный индикатор, если вы хотите сделать целевую вкладку активной при первой загрузке.
При использовании в редакторе WordPress два коротких кода вместе будут выглядеть так:
|
1
|
[et_tab] [et_tab_item title=»Your title»] …content here[/et_tab_item][/et_tab]
|
На этом этапе, если вы добавите их на первую страницу, а затем просмотрите результат в своем браузере, вы увидите нестандартный и нефункциональный вывод HTML. Итак, давайте исправим это.
3. Добавьте jQuery для включения содержимого с вкладками
Перейдите в файл main.js и вставьте код
|
01
02
03
04
05
06
07
08
09
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
|
(function($){
«use strict»;
$(‘.et-tab’).each(function(){
var $this = $(this),
tabs = $this.find(‘.tab-item’),
tabsQ = tabs.length,
tabsContent = $this.find(‘.tab-content’);
tabs.wrapAll(‘<div class=»tabset et-clearfix»></div>’);
tabsContent.wrapAll(‘<div class=»tabs-container et-clearfix»></div>’);
var tabSet = $this.find(‘.tabset’);
if(!tabs.hasClass(‘active’)){
tabs.first().addClass(‘active’);
}
tabs.each(function(){
var $thiz = $(this);
if ($thiz.hasClass(‘active’)) {
$thiz.siblings()
.removeClass(«active»);
tabsContent.hide(0).removeClass(‘active’);
tabsContent.eq($thiz.index()).show(0).addClass(‘active’);
}
});
if(tabsQ >= 2){
tabs.on(‘click’, function(){
var $self = $(this);
if(!$self.hasClass(«active»)){
$self.addClass(«active»);
$self.siblings()
.removeClass(«active»);
tabsContent.hide(0).removeClass(‘active’);
tabsContent.eq($self.index()).show(0).addClass(‘active’);
}
});
}
});
})(jQuery);
|
Я не буду описывать весь этот код очень подробно, но логика здесь обеспечивает функциональность вкладки. Если вы не знакомы с JavaScript или jQuery, я настоятельно рекомендую этот удивительный бесплатный курс для начинающих:
Стиль вкладок
Теперь вкладки работают, но они по-прежнему выглядят некрасиво, поэтому давайте добавим немного базового CSS:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.tabset {
margin-bottom: 24px;
}
.tabset > * {
display: inline-block;
vertical-align: middle;
padding: 8px 16px;
line-height: 1em;
background: #f5f5f5;
margin-right: 8px;
cursor: pointer;
}
.tabset > .active {
background: #000000;
color: #ffffff;
}
.tabset > :last-child {
margin-right: 0;
}
|
4. Создайте шорткод продуктов WooCommerce
Мы делаем большие успехи; наш продукт с вкладками в архиве WooCommerce уже почти готов! Настало время создать шорткод для продуктов. Это приведет к получению продуктов с запросом, а затем из этих результатов создаст серию массивов: рекомендуемые, распродажные и наиболее продаваемые. Затем он выведет содержимое этих массивов, чтобы предоставить нам наши вкладки продуктов.
Добавьте этот код в файл PHP:
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
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
|
function et_products($atts, $content = null) {
extract(shortcode_atts(
array(
‘layout’ => ‘grid’, // grid OR carousel
‘autoplay’ => ‘false’, // true OR false
‘columns’ => ‘1’, // 1 |
‘rows’ => ‘1’, // 1 |
‘quantity’ => ’12’,
‘type’ => ‘recent’, // recent |
), $atts)
);
static $id_counter = 1;
if (class_exists(‘Woocommerce’)) {
$output = »;
global $post;
$query_options = array(
‘post_type’ => ‘product’,
‘post_status’ => ‘publish’,
‘meta_query’ => WC()->query->get_meta_query(),
‘tax_query’ => WC()->query->get_tax_query(),
‘ignore_sticky_posts’ => 1,
‘posts_per_page’ => absint($quantity),
);
if ($type == «featured»){
$query_options = array(
‘post_type’ => ‘product’,
‘post_status’ => ‘publish’,
‘meta_query’ => WC()->query->get_meta_query(),
‘ignore_sticky_posts’ => 1,
‘posts_per_page’ => absint($quantity),
‘tax_query’ => array(
array(
‘taxonomy’ => ‘product_visibility’,
‘field’ => ‘name’,
‘terms’ => ‘featured’,
‘operator’ => ‘IN’,
)
),
);
}
if ($type == «sale»){
$query_options = array(
‘post_type’ => ‘product’,
‘post_status’ => ‘publish’,
‘meta_query’ => WC()->query->get_meta_query(),
‘ignore_sticky_posts’ => 1,
‘posts_per_page’ => absint($quantity),
‘post__in’ => array_merge( array( 0 ), wc_get_product_ids_on_sale() ),
);
}
if ($type == «best_selling»){
$query_options = array(
‘post_type’ => ‘product’,
‘post_status’ => ‘publish’,
‘meta_query’ => WC()->query->get_meta_query(),
‘tax_query’ => WC()->query->get_tax_query(),
‘ignore_sticky_posts’ => 1,
‘posts_per_page’ => absint($quantity),
‘orderby’ => ‘meta_value_num’,
‘meta_key’ => ‘total_sales’,
);
}
$products = new WP_Query($query_options);
if($products->have_posts()){
$counter = 1;
$class = array();
$attributes = array();
$class[] = ‘products’;
$class[] = esc_attr($layout);
if ($layout == ‘carousel’) {
$class[] = ‘owl-carousel’;
}
$attributes[] = ‘data-columns=»‘.esc_attr($columns).’»‘;
$attributes[] = ‘data-autoplay=»‘.esc_attr($autoplay).’»‘;
$output .= ‘<ul class=»‘.esc_attr(implode(‘ ‘, $class)).’» ‘.implode(‘ ‘, $attributes).’>’;
while ($products->have_posts() ) {
$products->the_post();
global $product;
if ($layout == «carousel» && $rows != 1) {
$product_wrapper_start = »;
$product_wrapper_end = »;
if (($counter % 2 == 1 && $rows == 2) || ($counter % 3 == 1 && $rows == 3) || ($counter % 4 == 1 && $rows == 4)){
$product_wrapper_start = ‘<li class=»product-wrapper»>’;
}
if (($counter % 2 == 0 && $rows == 2) || ($counter % 3 == 0 && $rows == 3) || ($counter % 4 == 0 && $rows == 4)){
$product_wrapper_end = ‘</li>’;
}
$output .= $product_wrapper_start;
$output .= ‘<div class=»product» id=»product-‘.esc_attr($product->get_id()).’»>’;
ob_start();
do_action( ‘woocommerce_before_shop_loop_item’ );
do_action( ‘woocommerce_before_shop_loop_item_title’ );
do_action( ‘woocommerce_shop_loop_item_title’ );
do_action( ‘woocommerce_after_shop_loop_item_title’ );
do_action( ‘woocommerce_after_shop_loop_item’ );
$output .= ob_get_clean();
$output .= ‘</div>’;
$output .= $product_wrapper_end;
$counter++;
} else {
$output .= ‘<li class=»product» id=»product-‘.esc_attr($product->get_id()).’»>’;
ob_start();
do_action( ‘woocommerce_before_shop_loop_item’ );
do_action( ‘woocommerce_before_shop_loop_item_title’ );
do_action( ‘woocommerce_shop_loop_item_title’ );
do_action( ‘woocommerce_after_shop_loop_item_title’ );
do_action( ‘woocommerce_after_shop_loop_item’ );
$output .= ob_get_clean();
$output .= ‘</li>’;
}
}
wp_reset_postdata();
$output .= ‘</ul>’;
$id_counter++;
return $output;
}
} else {
echo «Please install/activate Woocommerce plugin»;
}
}
add_shortcode(‘et_products’, ‘et_products’);
|
Шорткод, который мы создали здесь, имеет несколько атрибутов:
- Макет — это может быть сетка или карусель
- Autoplay — true или false , это дополнительная опция для разметки карусели
- Столбцы — здесь вы можете указать, сколько столбцов вы хотите
- Ряды — это то же самое, что столбцы, и применяется только к макету карусели
- Количество — количество элементов для отображения
- Тип — здесь вы можете указать последние товары, бестселлеры, продажи или рекомендуемые товары
Примечание о наших рядах карусели
Когда у вас есть карусель, каждый продукт становится элементом карусели — обычное поведение, когда у вас есть один ряд. Тем не менее, что произойдет, если вы захотите два, три или четыре ряда на карусель?
В этом случае вам нужно будет обернуть каждую из этих возможностей в обертку, которая будет действовать как элемент карусели. И у вас есть вопрос: вы делаете это с помощью JavaScript или PHP? Я предпочитаю второй вариант, так как JS имеет некоторую задержку выполнения Поэтому, если вы изучите шорткод, вы найдете следующее:
|
01
02
03
04
05
06
07
08
09
10
|
$product_wrapper_start = »;
$product_wrapper_end = »;
if (($counter % 2 == 1 && $rows == 2) || ($counter % 3 == 1 && $rows == 3) || ($counter % 4 == 1 && $rows == 4)){
$product_wrapper_start = ‘<li class=»product-wrapper»>’;
}
if (($counter % 2 == 0 && $rows == 2) || ($counter % 3 == 0 && $rows == 3) || ($counter % 4 == 0 && $rows == 4)){
$product_wrapper_end = ‘</li>’;
}
|
Обратите внимание
|
1
|
$counter = 1;
|
сразу после
|
1
|
if($products->have_posts()){
|
Это очень похоже for цикл for , нам нужен инкремент для циклического выполнения нашего запроса и переноса каждых двух, каждых трех и каждых четырех элементов товара в разметку оболочки карусельного элемента.
Вы заметите % , который является оператором по модулю. Это дает остаток от деления; 0, когда число делится точно на 2/3/4, и 1, если нет. И с каждым циклом нам нужно увеличивать счетчик:
|
1
|
$counter++;
|
Это происходит сразу после кода:
|
01
02
03
04
05
06
07
08
09
10
11
|
$output .= $product_wrapper_start;
$output .= ‘<div class=»product» id=»product-‘.esc_attr($product->get_id()).’»>’;
ob_start();
do_action( ‘woocommerce_before_shop_loop_item’ );
do_action( ‘woocommerce_before_shop_loop_item_title’ );
do_action( ‘woocommerce_shop_loop_item_title’ );
do_action( ‘woocommerce_after_shop_loop_item_title’ );
do_action( ‘woocommerce_after_shop_loop_item’ );
$output .= ob_get_clean();
$output .= ‘</div>’;
$output .= $product_wrapper_end;
|
5. Добавить стили совы ?
Мы почти готовы, но сначала давайте добавим несколько стилей карусели сов и некоторые дополнительные стили к нашим продуктам.
Откройте файл style.css и вставьте стили совы карусели совы (вы должны найти их в вашем ZIP-файле плагина owlCarousel). И немного дополнительного стиля для карусельной навигации и наших продуктов:
|
01
02
03
04
05
06
07
08
09
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
|
ul.products {
list-style: none;
margin: 0;
padding: 0;
}
ul.products.grid {
display: grid;
grid-row-gap: 24px;
grid-column-gap: 24px;
}
ul.products.grid[data-columns=»2″]{grid-template-columns: repeat(2, 2fr);}
ul.products.grid[data-columns=»3″]{grid-template-columns: repeat(3, 3fr);}
ul.products.grid[data-columns=»4″]{grid-template-columns: repeat(4, 4fr);}
ul li {
display: block;
padding: 0;
margin: 0
}
.product {
position: relative;
text-align: center;
}
.woocommerce-loop-product__title {
margin-top: 16px !important;
font-size: 1em !important;
}
.product a {
display: block;
text-decoration: none;
border-bottom: none !important;
}
.product .onsale {
position: absolute;
left: 0;
padding: 4px;
background: red;
color: #ffffff;
}
.et-tab .owl-nav {
position: absolute;
top: -60px;
right: 0;
}
.et-tab .owl-nav > * {
display: inline-block;
vertical-align: middle;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
background: #f5f5f5 !important;
}
.et-tab .owl-nav > :last-child {
margin-left: 8px;
}
.et-tab .owl-nav > *:hover {
background: #000000 !important;
color: #ffffff !important;
}
|
Но подождите, мы еще не вызвали плагин карусели, поэтому давайте теперь перейдем к файлу main.js и сразу после кода вкладки добавим следующее:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
// Initialize carousel for the first load
$(‘.products.carousel’).each(function(){
var $this = $(this);
$this.imagesLoaded(function(){
$this.owlCarousel({
margin:24,
nav:true,
autoplay:$this.data(‘autoplay’),
items:$this.data(‘columns’),
responsive:{
320 : {items:1},
768 : {items:2},
1024 : {items:3},
1280 : {items:$this.data(‘columns’)}
},
});
});
});
|
Здесь мы используем два плагина одновременно: сначала мы проверяем, что наши изображения загружаются, чтобы избежать какого-либо наложения контента, а затем мы вызываем плагин для нашей схемы размещения карусельных продуктов.
6. Исправить карусельный глюк
Остается сделать еще одну вещь: если вы сейчас перейдете на вкладки и заявите, что хотите использовать макет на основе карусели, то увидите, что он работает на активной вкладке при первой загрузке страницы, но если вы начнете переходить от вкладки к вкладке, то ваш макет карусели сломает. На вкладке изменения события наша карусель должна быть обновлена. Итак, в самом начале файла добавьте функцию:
|
1
2
3
4
5
|
function refreshCarousel(tab){
tab.find(‘.products.carousel’).each(function(){
jQuery(this).trigger(‘refresh.owl.carousel’);
});
}
|
Эта функция обновляет макет карусели каждый раз, когда вкладка изменяется. А теперь внутри функции табуляции сразу после кода:
|
1
|
tabsContent.eq($self.index()).show(0).addClass(‘active’);
|
вызвать функцию:
|
1
|
refreshCarousel(tabsContent.eq($self.index()));
|
Теперь очистите кеш браузера и добавьте следующий шорткод на свою страницу:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!— wp:shortcode —>
[et_tab][et_tab_item title=»recent»][et_products layout=»grid» autoplay=»false» columns=»3″ rows=»1″ quantity=»6″ type=»recent» /][/et_tab_item][et_tab_item title=»featured»][et_products layout=»grid» autoplay=»false» columns=»3″ rows=»1″ quantity=»6″ type=»featured» /][/et_tab_item][et_tab_item title=»sale»][et_products layout=»grid» autoplay=»false» columns=»3″ rows=»1″ quantity=»6″ type=»sale» /][/et_tab_item][et_tab_item title=»best selling»][et_products layout=»grid» autoplay=»false» columns=»3″ rows=»1″ quantity=»6″ type=»best_selling» /][/et_tab_item][/et_tab]
<!— /wp:shortcode —>
<!— wp:separator —>
<hr class=»wp-block-separator»/>
<!— /wp:separator —>
<!— wp:shortcode —>
[et_tab][et_tab_item title=»recent»][et_products layout=»grid» autoplay=»false» columns=»4″ rows=»1″ quantity=»8″ type=»recent» /][/et_tab_item][et_tab_item title=»featured»][et_products layout=»grid» autoplay=»false» columns=»4″ rows=»1″ quantity=»8″ type=»featured» /][/et_tab_item][et_tab_item title=»sale»][et_products layout=»grid» autoplay=»false» columns=»4″ rows=»1″ quantity=»8″ type=»sale» /][/et_tab_item][et_tab_item title=»best selling»][et_products layout=»grid» autoplay=»false» columns=»4″ rows=»1″ quantity=»8″ type=»best_selling» /][/et_tab_item][/et_tab]
<!— /wp:shortcode —>
<!— wp:separator —>
<hr class=»wp-block-separator»/>
<!— /wp:separator —>
<!— wp:shortcode —>
[et_tab][et_tab_item title=»recent»][et_products layout=»carousel» autoplay=»false» columns=»3″ rows=»1″ quantity=»12″ type=»recent» /][/et_tab_item][et_tab_item title=»featured»][et_products layout=»carousel» autoplay=»false» columns=»3″ rows=»1″ quantity=»12″ type=»featured» /][/et_tab_item][et_tab_item title=»sale»][et_products layout=»carousel» autoplay=»false» columns=»3″ rows=»1″ quantity=»12″ type=»sale» /][/et_tab_item][et_tab_item title=»best selling»][et_products layout=»carousel» autoplay=»false» columns=»3″ rows=»1″ quantity=»12″ type=»best_selling» /][/et_tab_item][/et_tab]
<!— /wp:shortcode —>
<!— wp:separator —>
<hr class=»wp-block-separator»/>
<!— /wp:separator —>
<!— wp:shortcode —>
[et_tab][et_tab_item title=»recent»][et_products layout=»carousel» autoplay=»false» columns=»4″ rows=»2″ quantity=»12″ type=»recent» /][/et_tab_item][et_tab_item title=»featured»][et_products layout=»carousel» autoplay=»false» columns=»2″ rows=»2″ quantity=»12″ type=»featured» /][/et_tab_item][et_tab_item title=»sale»][et_products layout=»carousel» autoplay=»false» columns=»3″ rows=»2″ quantity=»12″ type=»sale» /][/et_tab_item][et_tab_item title=»best selling»][et_products layout=»carousel» autoplay=»false» columns=»3″ rows=»1″ quantity=»12″ type=»best_selling» /][/et_tab_item][/et_tab]
<!— /wp:shortcode —>
|
В этом случае я использую тему WordPress по умолчанию с редактором Гутенберга (следовательно, комментарии Гутенберга <!-- wp:separator --> ), если у вас классический редактор, просто скопируйте шорткоды.
И теперь, если вы все сделали правильно, вы увидите красивый макет, как это!
Вывод
Вы можете использовать и изменять этот плагин в своих проектах, как коммерческих, так и некоммерческих. Посетите репозиторий на Github, чтобы получить полный исходный код. Я надеюсь, что вы найдете это полезным, спасибо за чтение!
Лучшие темы WooCommerce на рынке Envato
-
WooCommerce19+ лучших тем WooCommerce: чтобы сделать лучший интернет-магазин
-
электронная коммерция18+ лучших тем WordPress для электронной коммерции на 2019 год
