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

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

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

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

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

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

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

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

خب شما باید وارد وردپرس خود شوید و از بخش 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 –> ” را نشان بده.

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

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

تیم تولید محتوا

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