ساخت آرشیو محصولات ووکامرس بصورت تب بندی شده با افزونه اختصاصی
بیشتر افرادی که فروشگاه اینترنتی دارند با افزونه فروشگاه ساز ووکامرس آشنا هستند و یا اینکه از آن استفاده می‌کنند؛ درسته که این افزونه امکانات بسیار زیادی را در اختیار شما قرار می‌دهد اما خب شما به‌عنوان یک مدیر باید دنبال این باشید که با استفاده از ابزارهای دیگه، سایت خودتان را حرفه‌ای و درعین‌حال شیک‌تر کنید. شاید نیاز باشد یک افزونه اختصاصی برای ساخت آرشیو محصولات ووکامرس بصورت تب بندی شده برنامه‌نویسی کنیم.
سایت شما باید به‌صورتی نمایش داده شود که کاربر را به سمت خودش جذب کنه و بتونه یک ظاهر خیلی جذاب داشته باشد؛ به همین دلیل ما تصمیم گرفتیم در این مقاله به شما آموزش بدیم آرشیو محصولات خودتان را در ووکامرس سازمان‌دهی کنید و سایت خودتان را منظم‌تر و زیباتر کنید.
آنچه در این مقاله می‌خوانید
قراره در این مقاله چیکار کنیم؟
هدف اصلی ما در این مقاله اینه که بهتون آموزش بدیم چطوری یک آرشیو دسته‌بندی برای محصولات خودتان در ووکامرس ایجاد کنید تا بتوانید محصولات خودتان را با نظم بیشتری برای کاربر نشان دهید.
در این مقاله ما نیاز داریم که یک افزونه وردپرسی ایجاد کنیم و یک سری مراحل دیگه را هم طی کنیم، همه این روند برای شما به‌صورت کامل توضیح داده شده و اگر روند را مانند ما به‌صورت قدم‌به‌قدم انجام دهید می‌توانید آرشیو محصولات ووکامرس خودتان را ایجاد کنید.
توجه داشته باشید که برای استفاده از این روش شما نیاز دارید که فروشگاه وردپرسی خودتان را با استفاده از ووکامرس راه‌اندازی کرده باشید و محصولات خودتان را هم در این افزونه قرار داده باشید. برای آشنایی با افزونه ووکامرس می‌توانید مقاله افزونه ووکامرس چیست و چگونه سایت فروشگاهی بسازیم؟ را مطالعه کنید؛ در این مقاله به‌صورت کامل روند ساخت فروشگاه اینترنتی را آموزش دادیم.
ساخت افزونه اختصاصی
خب شما باید وارد وردپرس خودتان شوید و از بخش wp-content، گزینه Plugins را انتخاب کنید؛ حالا یک فایل جدید به اسم “Woocommerce-products” بسازید؛ وارد این پوشه جدید شوید و یک فایل PHP دقیقاً به همین اسم در آن ایجاد کنید و قطعه کدی که در اینجا برای شما قرار دادیم را در این فایل PHP جایگذاری کنید:
/*
Plugin Name: WooCommerce products
Plugin URI: https://mihanwp.com
Description: Better product grouping presentation for your WooCommerce shop
Author: MihanWP
Version: 1.0
Author URI: http://mihanwp.com
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
} توجه داشته باشید که باید جزئیات مورد نظر خودتان را در کد بالا جایگزین کنید.
استایل‌ها و اسکریپت‌ها را اضافه کنید
حالا در قدم بعدی شما باید استایل‌ها و اسکریپت‌های موردنظر خودتان را اضافه کنید، برای این کار می‌توانید از کد زیر استفاده کنید:
// 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 که همراه با هسته وردپرس هست را بارگذاری کردیم. حالا باید یک carousel ایجاد کنیم که برای این کار هم نیاز به یک افزونه jQuery و فایل اصلی js داریم؛ که پیشنهاد ما برای افرونه OwlCarousel هست.
شورت کد تب بندی بسازید
در مرحله بعدی شما باید یک تب شورت کد ایجاد کنید، این تب از دوتا بخش شورت کد تشکیل شده، یکی از این بخش‌ها Parent یا همان والدین و موارد دیگه Child یعنی کودک هست. این قطعه کدی که در اینجا قرار دادیم مربوط به اولین بخش والدین هست که شما باید آن را به فایل PHP که در مرحله اول ایجاد کردید، اضافه کنید.
// 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');از کد زیر برای ایجاد برگه کودک یا Child استفاده کنید:
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');وقتی شما این دو تا کد را در ویرایشگر وردپرس استفاده کردید، کدها به‌صورت زیر نمایش داده می‌شوند:
[et_tab] [et_tab_item title="Your title"] …content here[/et_tab_item][/et_tab]خب حالا ممکنه شما بخواهید این موارد در صفحه اول نمایش داده شوند، اما در مرورگر برای شما نشان داده شده؛ در این صورت شما یک خروجی HTML بدون هیچ استایل و فانکشن می‌بینید که باید آن را از طریق روشی که در زیر برای شما می‌گیم؛ تغییر دهید.
اضافه کردن jQuery برای بهبود محتوای جدول‌بندی شده
برای اینکه بتوانید این محتوا را قدرتمندتر کنید باید به فایل main.js برید و کد زیر را در آن جایگذاری کنید:
(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);استایل‌دهی به تب‌‌ها
تا اینجای کار شما موفق شدید یک تب ایجاد کنید، اما خب موضوع اینجاست که ظاهر این تب جذاب نیست و شما باید برای زیباتر دیدن این تب به آن استایل دهید؛ برای این کار میتونید از یک سری کدهای CSS استفاده کنید که ما در اینجا برای شما قرار دادیم:
.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;
} دقت داشته باشید که این قطعه کد شامل یک سری ویژگی برای تب شما هست، این ویژگی‌ها مثل میزان حاشیه، رنگ بک‌گراند و موارد این‌چنینی هست که اگر مایل باشید می‌توانید اون‌ها را به‌صورت دلخواه تغییر دهید.
ایجاد شورت کد ساخت آرشیو محصولات ووکامرس
آرشیو محصولات دسته‌بندی‌شده‌ی ورپرس را تا این مرحله ایجاد کردیم، حالا باید یک شورت کد برای محصولات ایجاد کنید، که ما روند این کار را به‌صورت کامل برای شما آموزش می‌دهیم. با استفاده از این کد، وقتی یک جستجوی ساده کوئری انجام شود، یک سری محصولات انتخاب و برای شما به‌صورت نتایج جستجو نمایش داده می‌شود.
شما می‌توانید بر اساس این نتیجه‌ی به‌دست آمده، محصولات را بر اساس یک سری ویژگی مثل ویژگی‌های محصول، میزان فروش و یا محصولاتی که بهترین فروش را داشته مشخص و دسته‌بندی کنید.
حالا شما باید این دسته‌بندی‌هایی که انجام دادید به شما یک سری محتوا برای تب محصولات در ووکامرس می‌دهد که می‌توانید خیلی راحت از آن استفاده کنید را به فایل PHP اضافه کنید.
افزودن کد به فایل PHP
در قدم بعدی باید این کد را به فایل PHP اضافه کنید:
function et_products($atts, $content = null) {
extract(shortcode_atts(
array(
'layout' => 'grid', // grid OR carousel
'autoplay' => 'false', // true OR false
'columns' => '1', // 1 | 2 | 3 | 4
'rows' => '1', // 1 | 2 | 3 | 4 - carousel only
'quantity' => '12',
'type' => 'recent', // recent | featured | sale | best_selling
), $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');این شورت کد دارای یک سری ویژگی هست که شما می‌توانید به‌دلخواه خودتان اون‌ها را تغییر دهید و آرشیو خودتان را سفارشی کنید؛ حالا ما برای اینکه بهتر بتوانید این شورت کد را درک کنید و بفهمید کدوم یکی از ویژگی‌ها مربوط به چی هست، در این بخش تک‌تک این موارد را بررسی می‌کنیم.
- Layout: یکی از قابلیت‌هایی که در کد بالا وجود داره نحوه چیدمان محصولات هست، چیدمان محصولات می‌تونه به صورت شبکه‌ای یا کاروسل باشد.
- Autoplay: این مورد در واقع یک گزینه اضافی برای محصولاتی هست که چیدمان اون‌ها به صورت کاروسل هست.
- Columns: خب همان‌طور که پیداست این بخش مربوط به تعداد ستون‌ها هست و شما می‌توانید از این بخش تعداد ستون‌ها را به‌دلخواه خودتان تغییر دهید.
- Rows: این ویژگی فقط برای چیدمان کاروسل هست و تعداد ردیف‌ها را مشخص میک‌نه.
- Quantity: تعیین کنید که چه تعداد آیتم برای نمایش دارید.
- Type: در این قسمت هم شما این امکان را دارید که محصولات را بر اساس نوع اون‌ها مثل محصولاتی که بهترین فروش را داشتند، محصولات اخیر و بهترین محصولات را مشخص کنید.
یک نکته برای ردیف‌های کاروسل
وقتی شما از چیدمان کاروسل استفاده می‌کنید، هر یک از محصولات سایت فروشگاهی خودتان به یک آیتم کاروسل تبدیل می‌شوند اما این برای وقتی هست که شما فقط یک ردیف داشته باشید، اما خب اگر شما بیشتر از یک ردیف داشته باشید تکلیف چیه و چه اتفاقی پیش می‌یاد؟
$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>';
}عبارت زیر رو:
$counter = 1;بعد از این قسمت قرار دهید:
if($products->have_posts()){طبیعتا با این‌کار هر پست را در حلقه Loop قرار داده‌اید تا پست‌ها به ترتیب در کاروسل نمایش داده شوند.
قطعه کد زیر بعد از کد اجرا می‌شود:
$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;افزودن استایل Owl Carousel
آرشیو دسته‌بندی‌شده تقریباً آماده هست، اما خب ما می‌خواهیم قبل از اینکه بریم سراغ استفاده از اون، یک سری استایل به آن اضافه کنیم. در این مرحله هم تصمیم داریم استایل جغد را به آن اضافه کنیم.
از در فایل افزونه کاروسلی که دانلود کردید، استایل‌های Owl Carousel را پیدا کنید و اون‌ها را در فایل style.css کپی پیست کنید. از کدهای زیر هم می‌توانید به‌عنوان ناوبری کاروسل و محصولات استفاده کنید:
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 و بعد از کد مربوط به دسته‌بندی یا همان تب، اضافه کنید.
// 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')}
},
});
});
});در این بخش ما داریم از دوتا افزونه به‌صورت همزمان استفاده می‌کنیم؛ پس باید مطمئن بشیم که هم‌پوشانی محتوا صورت نگرفته باشد و بعدازاینکه اطمینان پیدا کردیم از این پلاگین برای چیدمان محصولات کاروسل استفاده کنید.
تگ کاروسل را درست کنید
خب بریم سراغ آخرین مرحله، شما بعدازاینکه این گام را طی کنید، می‌توانید خیلی راحت به آرشیو دسته‌بندی موردنظر خودتان دست پیدا کنید؛ خب شما این امکان را دارید که به قسمت برگه‌ها برید و مشخص کنید که می‌خواهید از یک طرح کاروسل استفاده کنید، می‌توانید بببینید که این طرح کاروسل در برگه فعال صفحه اول شما به خوبی کار می‌کند.
حالا اگر شما این طرح کاروسل را از یک برگه به برگه دیگه تغییر دهید، با مشکل مواجه خواهید شد و برای اینکه بتوانید این مشکل را از بین ببرید، نیاز به به‌روزرسانی دارید. پس بهترِ که همان ابتدای کار عملکرد زیر را اضافه کنید:
function refreshCarousel(tab){
tab.find('.products.carousel').each(function(){
jQuery(this).trigger('refresh.owl.carousel');
});
}درواقع کار این قطعه کد این هستش که شما هر بار که برگه را تغییر می‌دهید، طرح یا همان چیدمان کاروسل را تازه می‌کند، حالا باید تابع داخل برگه را درست بعد از کد:
tabsContent.eq($self.index()).show(0).addClass('active');این کد را اضافه کنید:
refreshCarousel(tabsContent.eq($self.index()));حالا تنها کاری که باید انجام دهید این هست که کش مرورگر خودتان را پاک کنید و شورت کد زیر را به صفحه خودتان اضافه کنید.
<!-- 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 -->اگر از ویرایشگر کلاسیک وردپرس استفاده می‌کنید که فقط باید این شورت کد را اضافه کنید، اما درصورتی‌که از گوتنبرگ استفاده می‌کنید ممکنه این ویرایشگر برای شما کامنت ” <!– wp:separator –> ” را نشان بده.
خب حالا شما اگر همه این موارد را به‌درستی انجام داده باشید می‌توانید طرح موردنظر خودتان را مشاهده کنید.
امیدواریم این مقاله برای شما در زمینه ساخت آرشیو محصولات ووکامرس مفید واقع شده باشد. موفق و پیروز باشید. 🙂
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام میهن وردپرس عضو شوید.
برای ارسال سوال یا نظر خود باید وارد سایت شوید.