ساخت آرشیو محصولات ووکامرس بصورت تب بندی شده با افزونه اختصاصی

بیشتر افرادی که فروشگاه اینترنتی دارند با افزونه فروشگاه ساز ووکامرس آشنا هستند و یا اینکه از اون استفاده می‌کنند؛ درسته که این افزونه امکانات بسیار زیادی رو در اختیار شما قرار می‌ده اما خب شما به‌عنوان یک مدیر باید دنبال این باشید که با استفاده از ابزارهای دیگه، سایت خودتون رو حرفه‌ای و درعین‌حال شیک‌تر کنید. شاید نیاز باشه یک افزونه اختصاصی برای ساخت آرشیو محصولات ووکامرس بصورت تب بندی شده برنامه‌نویسی کنیم.

 

سایت شما باید به‌صورتی نمایش داده بشه که کاربر رو به سمت خودش جذب کنه و بتونه یک ظاهر خیلی جذاب داشته باشه؛ به همین دلیل ما تصمیم گرفتیم توی این مقاله به شما آموزش بدیم آرشیو محصولات خودتون رو توی ووکامرس سازمان‌دهی کنید و سایت خودتون رو منظم‌تر و زیباتر کنید.

 

قراره توی این مقاله چیکار کنیم؟

هدف اصلی ما توی این مقاله اینه که بهتون آموزش بدیم چطوری یک آرشیو دسته‌بندی برای محصولات خودتون توی ووکامرس ایجاد کنید تا بتونید محصولات خودتون رو با نظم بیشتری برای کاربر نشون بدید.

 

توی این مقاله ما نیاز داریم که یک افزونه وردپرسی ایجاد کنیم و یک سری مراحل دیگه رو هم طی کنیم، همه این روند برای شما به‌صورت کامل توضیح داده شده و اگه روند رو مانند ما به‌صورت قدم‌به‌قدم انجام بدید می‌تونید آرشیو محصولات ووکامرس خودتون رو ایجاد کنید.

 

توجه داشته باشید که برای استفاده از این روش شما نیاز دارید که فروشگاه وردپرسی خودتون رو با استفاده از ووکامرس راه‌اندازی کرده باشید و محصولات خودتون رو هم توی این افزونه قرار داده باشید. برای آشنایی با افزونه ووکامرس می‌تونید مقاله افزونه ووکامرس چیست و چگونه سایت فروشگاهی بسازیم؟ رو مطالعه کنید؛ توی این مقاله به‌صورت کامل روند ساخت فروشگاه اینترنتی رو آموزش دادیم.

 

ساخت افزونه اختصاصی

خب شما باید وارد وردپرس خودتون بشید و از بخش wp-content، گزینه Plugins رو انتخاب کنید؛ حالا یک فایل جدید به اسم “Woocommerce-products” بسازید؛ وارد این پوشه جدید بشید و یک فایل PHP دقیقاً به همین اسم توی اون ایجاد کنید و قطعه کدی که در اینجا براتون قرار دادیم رو توی این فایل PHP جایگذاری کنید:

/*
    Plugin Name: WooCommerce products
    Plugin URI: https://www.20script.ir
    Description: Better product grouping presentation for your WooCommerce shop
    Author: 20Script
    Version: 1.0
    Author URI: http://www.20scipt.ir
*/
 
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 –> ” رو نشون بده.

 

خب حالا شما اگه همه این موارد رو به‌درستی انجام داده باشید می‌تونید طرح موردنظر خودتون رو مشاهده کنید.

 

امیدواریم این مقاله برای شما در زمینه ساخت آرشیو محصولات ووکامرس مفید واقع شده باشد. موفق و پیروز باشید. 🙂