Erstellen Sie ein Produktarchiv mit Registerkarten für Ihren WooCommerce Store

() translation by (you can also view the original English article)

In diesem Tutorial erfahren Sie, wie Sie Ihren WooCommerce-Shop ein wenig stilvoller gestalten, indem Sie das Produktarchiv mit Registerkarten organisieren. Wir erstellen Registerkarten mit einem mehrspaltigen Layout, einem mehrzeiligen Karussell und einem Rasterlayout.

Was werden wir schaffen

In den nächsten Schritten werden wir ein WordPress-Plugin erstellen, in dem wir die erforderlichen Shortcodes einrichten. Wenn Sie Ihr WooCommerce-Produktarchiv weiterentwickeln möchten, können Sie es in einen Gutenberg-Block konvertieren, mit Elementor als Widget verwenden oder in Visual Composer integrieren.

Dieses Produktarchiv mit Registerkarten eignet sich perfekt für die Anzeige der neuesten, vorgestellten, verkauften und meistverkauften Produkte wie folgt:

tabbed product archive in woocommerce — Unser Produktarchiv mit Registerkarten und Karussell -Steuerelementen

Also lasst uns anfangen!

1. Erstellung von einem WordPress-Plugin

Erstellen Sie auf Ihrer WordPress-Site unter wp-content/plugins einen Ordner mit dem Namen "woocommerce-products" (möglicherweise nicht der ursprünglichste Name) und erstellen Sie dann in diesem Ordner eine PHP-Datei mit demselben Namen. Öffnen Sie die Datei und fügen Sie den folgenden Code ein (ändern Sie die Details entsprechend Ihren eigenen):

/*
    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: https://enovathemes.com
*/

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
} 

Hier haben wir lediglich unseren Plugin-Namen definiert und einige Meta-Informationen bereitgestellt.

Enqueue-Skripte und -Stile

Für unser WooCommerce-Produktarchiv-Plugin müssen wir als Nächstes die erforderlichen Skripte und Stile in die Queue stellen. Fügen Sie den folgenden Codeausschnitt hinzu:

// 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' );

Zunächst haben wir eine grundlegende CSS-Datei hinzugefügt, um unsere Stile zu speichern. Als nächstes haben wir das eingebaute imageLoaded-Plugin (das mit dem WordPress-Kern geliefert wird) geladen. Um das Karussell zu erstellen, verwenden wir das äußerst beliebte jQuery-Plugin owlCarousel. Und natürlich die main js file.

Hinweis: Kontrollieren Sie, dass diese Dateien Ihrem Plugin-Ordner in den entsprechenden Unterordnern hinzugefügt werden.

Weitere Informationen zur Erstellung von WordPress-Plugins und Shortcodes oder weitere Informationen zur Verwendung von owl.js finden Sie in den empfohlenen Tutorials zu Tuts+:

2. Erstellen Sie einen Tab-Shortcode

In diesem Schritt erstellen wir einen Tab-Shortcode. Es wird tatsächlich aus zwei Shortcodes bestehen; den übergeordneten Registerkartencontainer und dann die untergeordneten Registerkartenelemente. Fügen Sie für den ersten übergeordneten Container diesen Code zur PHP-Datei hinzu:

// 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');

Dieser Shortcode fordert keine Attribute, aber es wird nur die Tab-Elemente darin eingeschlossen.

Wenn Sie von Tab-Elementen sprechen, fügen Sie als Nächstes den folgenden Code hinzu, um Child Tab-Element zu erstellen:

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');

Dieser Shortcode hat zwei Attribute; den Titel und den aktiven Anzeiger, falls Sie die Zielregisterkarte beim ersten Laden aktivieren möchten.

Bei Verwendung im WordPress-Editor sehen die beiden Shortcodes zusammen folgendermaßen aus:

1	[et_tab] [et_tab_item title="Your title"] …content here[/et_tab_item][/et_tab]

Wenn Sie sie zu diesem Zeitpunkt zu Ihrer Startseite hinzufügen und dann das Ergebnis in Ihrem Browser anzeigen, wird eine nicht gestaltete und nicht funktionierende HTML-Ausgabe angezeigt. Also lasst es uns beheben.

3. Fügen Sie jQuery hinzu, um den Inhalt mit Registerkarten zu aktivieren

Gehen Sie zur Datei main.js und fügen Sie den Code ein

(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);

Ich werde diesen ganzen Code nicht im Detail beschreiben, aber die Logik hier unterstützt die Tab-Funktionalität. Wenn Sie nicht mit JavaScript oder jQuery vertraut sind, empfehle ich diesen erstaunlichen kostenlosen Kurs für Anfänger:

Gestalten Sie die Tabs

Jetzt funktionieren die Registerkarten, aber sie sehen immer noch hässlich aus. Fügen wir also einige grundlegende CSS hinzu:

.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. Erstellen Sie den Shortcode für WooCommerce-Produkte

Wir machen große Fortschritte. Unser WooCommerce-Produktarchiv mit Registerkarten ist fast da! Es ist an der Zeit, einen Shortcode für die Produkte zu erstellen. Dadurch werden die Produkte mit einer Abfrage abgerufen und aus diesen Ergebnissen eine Reihe von Arrays erstellt: vorgestellte, verkaufte und meistverkaufte Produkte. Anschließend wird der Inhalt dieser Arrays ausgegeben, um uns unsere Produktregisterkarten zu geben.

Fügen Sie diesen Code der PHP-Datei hinzu:

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');

Der hier erstellte Shortcode weist mehrere Attribute auf:

Layout - Es kann ein Raster oder ein Karussell sein
Autoplay - richtig oder falsch, das ist eine zusätzliche Option für das Karussell-Layout
Columns - Hier können Sie angeben, wie viele Spalten Sie haben möchten
Rows - Sie entsprichen den Spalten und gelten nur für das Karusselllayout
Menge/Quantity - Die Anzahl der anzuzeigenden Elemente
Typ/Type - hier können Sie aktuelle Produkte, Bestseller, Verkauf oder vorgestellte Produkte angeben

Ein Hinweis zu unseren Karussellzeilen

Wenn Sie ein Karussell haben, wird jedes Produkt zu einem Karussellartikel - normales Verhalten, wenn Sie eine Reihe haben. Was passiert jedoch, wenn Sie zwei, drei oder vier Reihen pro Karussellartikel möchten?

In diesem Fall müssten Sie jede dieser Möglichkeiten in eine Hülle einwickeln, die als Karussellelement fungiert. Und Sie haben die Frage: Tun Sie dies mit JavaScript oder mit PHP? Ich bevorzuge die zweite Option, da JS einige Verzögerungen bei der Ausführung hat. Wenn Sie also den Shortcode untersuchen, finden Sie Folgendes:

$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>';
}

Beachten Sie das

1	$counter = 1;

gleich danach

1	if($products->have_posts()){

Das ist ähnluch wie for Schleife. Wir benötigen ein Inkrement, um unsere Abfrage zu durchlaufen und jeweils zwei, jeweils drei und jeweils vier Produktelemente in das Karussellelement-Wrapper-Markup einzubinden.

Sie werden das % bemerken, das der Modulo-Operator ist. Es gibt den Rest einer Teilung; 0, wenn die Zahl genau durch 2/3/4 teilbar ist, und 1, wenn nicht. Und mit jeder Schleife müssen wir den Zähler erhöhen mit:

1	$counter++;

Das geschieht direkt nach dem Code:

$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. Hinzufügung Owl Styles 🦉�

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;
}

// 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. Bessern Sie den Karussellglitchh aktiven Registerkarte angezeigt. Wenn Sie jedoch von Registerkarte zu Registerkarte wechseln, wird Ihr Karusselllayout angezeigt wird brechen. Auf der Registerkarte Änderungsereignis muss unser Karussell aktualisiert werden. Fügen Sie also ganz am Anfang der Datei die Funktion hinzu::

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()));

<!-- 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 -->

). Wenn Sie den klassischen Editor haben, kopieren Sie einfach die Shortcodes..

ein schönes Layout, wie dieses, sehen!>

Repo auf Github, um den Quellcode vollständig abzurufen. Ich hoffe, Sie finden es nützlich, danke fürs Lesen!!

1	function et_products($atts, $content = null) {
2	extract(shortcode_atts(
3	array(
4	'layout' => 'grid', // grid OR carousel
5	'autoplay' => 'false', // true OR false
6	'columns' => '1', // 1 \| 2 \| 3 \| 4
7	'rows' => '1', // 1 \| 2 \| 3 \| 4 - carousel only
8	'quantity' => '12',
9	'type' => 'recent', // recent \| featured \| sale \| best_selling
10	), $atts)
11	);
12
13	static $id_counter = 1;
14
15	if (class_exists('Woocommerce')) {
16
17	$output = '';
18
19	global $post;
20
21	$query_options = array(
22	'post_type' => 'product',
23	'post_status' => 'publish',
24	'meta_query' => WC()->query->get_meta_query(),
25	'tax_query' => WC()->query->get_tax_query(),
26	'ignore_sticky_posts' => 1,
27	'posts_per_page' => absint($quantity),
28	);
29
30	if ($type == "featured"){
31	$query_options = array(
32	'post_type' => 'product',
33	'post_status' => 'publish',
34	'meta_query' => WC()->query->get_meta_query(),
35	'ignore_sticky_posts' => 1,
36	'posts_per_page' => absint($quantity),
37	'tax_query' => array(
38	array(
39	'taxonomy' => 'product_visibility',
40	'field' => 'name',
41	'terms' => 'featured',
42	'operator' => 'IN',
43	)
44	),
45	);
46	}
47
48	if ($type == "sale"){
49	$query_options = array(
50	'post_type' => 'product',
51	'post_status' => 'publish',
52	'meta_query' => WC()->query->get_meta_query(),
53	'ignore_sticky_posts' => 1,
54	'posts_per_page' => absint($quantity),
55	'post__in' => array_merge( array( 0 ), wc_get_product_ids_on_sale() ),
56	);
57	}
58
59	if ($type == "best_selling"){
60
61	$query_options = array(
62	'post_type' => 'product',
63	'post_status' => 'publish',
64	'meta_query' => WC()->query->get_meta_query(),
65	'tax_query' => WC()->query->get_tax_query(),
66	'ignore_sticky_posts' => 1,
67	'posts_per_page' => absint($quantity),
68	'orderby' => 'meta_value_num',
69	'meta_key' => 'total_sales',
70	);
71	}
72
73	$products = new WP_Query($query_options);
74
75	if($products->have_posts()){
76
77	$counter = 1;
78
79	$class = array();
80	$attributes = array();
81
82	$class[] = 'products';
83	$class[] = esc_attr($layout);
84
85	if ($layout == 'carousel') {
86	$class[] = 'owl-carousel';
87	}
88
89	$attributes[] = 'data-columns="'.esc_attr($columns).'"';
90	$attributes[] = 'data-autoplay="'.esc_attr($autoplay).'"';
91
92	$output .= '<ul class="'.esc_attr(implode(' ', $class)).'" '.implode(' ', $attributes).'>';
93
94	while ($products->have_posts() ) {
95
96	$products->the_post();
97
98	global $product;
99
100	if ($layout == "carousel" && $rows != 1) {
101
102	$product_wrapper_start = '';
103	$product_wrapper_end = '';
104
105	if (($counter % 2 == 1 && $rows == 2) \|\| ($counter % 3 == 1 && $rows == 3) \|\| ($counter % 4 == 1 && $rows == 4)){
106	$product_wrapper_start = '<li class="product-wrapper">';
107	}
108
109	if (($counter % 2 == 0 && $rows == 2) \|\| ($counter % 3 == 0 && $rows == 3) \|\| ($counter % 4 == 0 && $rows == 4)){
110	$product_wrapper_end = '</li>';
111	}
112
113	$output .= $product_wrapper_start;
114	$output .= '<div class="product" id="product-'.esc_attr($product->get_id()).'">';
115	ob_start();
116	do_action( 'woocommerce_before_shop_loop_item' );
117	do_action( 'woocommerce_before_shop_loop_item_title' );
118	do_action( 'woocommerce_shop_loop_item_title' );
119	do_action( 'woocommerce_after_shop_loop_item_title' );
120	do_action( 'woocommerce_after_shop_loop_item' );
121	$output .= ob_get_clean();
122	$output .= '</div>';
123	$output .= $product_wrapper_end;
124
125	$counter++;
126
127	} else {
128	$output .= '<li class="product" id="product-'.esc_attr($product->get_id()).'">';
129	ob_start();
130	do_action( 'woocommerce_before_shop_loop_item' );
131	do_action( 'woocommerce_before_shop_loop_item_title' );
132	do_action( 'woocommerce_shop_loop_item_title' );
133	do_action( 'woocommerce_after_shop_loop_item_title' );
134	do_action( 'woocommerce_after_shop_loop_item' );
135	$output .= ob_get_clean();
136	$output .= '</li>';
137	}
138
139	}
140
141	wp_reset_postdata();
142
143	$output .= '</ul>';
144
145	$id_counter++;
146
147	return $output;
148
149	}
150
151	} else {
152	echo "Please install/activate Woocommerce plugin";
153	}
154	}
155	add_shortcode('et_products', 'et_products');