Separate Listen zur Anzeige von WooCommerce-Kategorien, Unterkategorien und Produkten

WooCommerce bietet Ihnen einige Optionen, was Sie auf Ihren Archivseiten anzeigen können:

• Produkte
• Kategorie (auf der Hauptseite des Shops) oder Unterkategorie (auf der Kategorieseite)
• Produkte und Kategorien

Wenn ich einen Shop erstelle, wähle ich normalerweise die dritte Option: Produkte und Kategorien/Unterkategorien. Das bedeutet, dass Besucher meines Shops Produkte direkt auf der Startseite auswählen oder ihre Suche verfeinern können, indem sie auf Produktkategorieprofile klicken.

Dieser Ansatz hat jedoch einen Nachteil: Er zeigt Kategorien/Unterkategorien zusammen an, ohne dass eine Trennung zwischen den beiden erfolgt. Das heißt, wenn Ihr Produktbild eine andere Größe hat als das Produktbild, kann das Layout etwas verwirrend wirken. Auch wenn Ihre Bilder die gleiche Größe haben und eine Zeile auf Ihrer Archivseite sowohl Kategorien als auch Produkte enthält, führt das Fehlen der Schaltfläche „In den Warenkorb“ in der Kategorie dazu, dass die Zeile unordentlich aussieht, da nicht alle Elemente die gleichen Abmessungen haben.

In diesem Tutorial zeige ich Ihnen, wie Sie Kategorien in einer separaten Liste anzeigen, bevor Sie Produkte anzeigen.

Dazu folgen wir vier Schritten:

1. Bestimmen Sie den Code, den WooCommerce verwendet, um Kategorien und Unterkategorien auf Archivseiten auszugeben.
2. Erstellen Sie ein Plugin für unseren Code.
3. Schreiben Sie eine Funktion, die eine Kategorie oder Unterkategorie vor die Produktliste einfügt.
4. Ausgabestil festlegen.

Aber bevor Sie beginnen, müssen Sie WooCommerce installieren, einige Produkte hinzufügen und Produktkategorien und Unterkategorien einrichten.

Was brauchst du

Um fortzufahren, benötigen Sie:

• Entwicklungsinstallation von WordPress
• Code-Editor
• WooCommerce installiert und aktiviert
• Hinzugefügte Produkte – Ich habe die mit WooCommerce gelieferten Dummy-Produktdaten importiert; Einzelheiten dazu finden Sie in dieser Anleitung
• WooCommerce-kompatibles Theme aktiviert – ich verwende Storefront

Bevor Sie beginnen: Standardoptionen

Sehen wir uns an, was WooCommerce uns standardmäßig bietet.

Ich habe damit begonnen, einige Bilder zu meinen Produktkategorien und Unterkategorien hinzuzufügen, da die WooCommerce-Dummy-Daten diese nicht enthalten. Ich habe einfach ein Bild von einem Produkt aus jeder Kategorie oder Unterkategorie verwendet, wie im Screenshot gezeigt:

Sehen wir uns nun an, wie WooCommerce Produktkategorien und Produkte auf der Archivseite anzeigt.

Wenn Sie den Customizer noch nicht geöffnet haben, wählen Sie die Registerkarte WooCommerce und klicken Sie auf Produktkatalog.

Wählen Sie unter Store-Seitenanzeige die Option Kategorien und Produkte anzeigen und dann unter Kategorienanzeige die Option Unterkategorien und Produkte anzeigenstrong> aus.

Klicken Sie auf Veröffentlichen, um Ihre Änderungen zu speichern und die Store-Seite Ihrer Website zu besuchen. Meiner sieht so aus:

Da ich vier Kategorien und ein Raster mit drei nebeneinander liegenden Bildern habe, werden die ersten beiden Produkte nebeneinander mit einer der Kategorien angezeigt.

Ich möchte meine Kategorien und Unterkategorien stärker hervorheben und sie einfach getrennt von der Produktliste anzeigen. Also lasst uns das tun.

Identifiziert den Code, den WooCommerce verwendet, um Kategorien und Produkte in Archiven auszugeben

Der erste Schritt besteht darin, festzulegen, wie WooCommerce Kategorien und Unterkategorien exportiert. Schauen wir uns also den WooCommerce-Quellcode an, um die relevanten Funktionen zu finden.

Die von WooCommerce zum Anzeigen von Archivseiten verwendete Datei ist archive-product.php und befindet sich im Vorlagenordner.

In dieser Datei finden Sie diesen Code, der Kategorien und Produkte ausgibt:

<?php
    /**
     * woocommerce_before_shop_loop hook
     *
     * @hooked woocommerce_result_count - 20
     * @hooked woocommerce_catalog_ordering - 30
    */
    do_action( 'woocommerce_before_shop_loop' );
?>
 
<?php woocommerce_product_loop_start(); ?>
 
    <?php woocommerce_product_subcategories(); ?>
 
    <?php while ( have_posts() ) : the_post(); ?>
 
        <?php wc_get_template_part( 'content', 'product' ); ?>
 
    <?php endwhile; // end of the loop. ?>
 
<?php woocommerce_product_loop_end(); ?>

Es gibt also eine woocommerce_product_subcategories()-Funktion, die Kategorien oder Unterkategorien ausgibt, bevor eine Schleife ausgeführt wird, die Produkte ausgibt.

Diese Funktion ist steckbar, was bedeutet, dass wir sie in unserem Theme überschreiben können. Leider funktioniert dies nicht ganz, da WooCommerce über einen integrierten Stil zum Löschen von Elementen verfügt, der standardmäßig am Anfang der angezeigten Zeile angezeigt wird.

因此，我们将关闭存档页面上类别和子类别的显示，以便仅显示产品。然后，我们将创建一个输出产品类别或子类别的新函数，并将其挂钩到 woocommerce_before_shop_loop 操作，确保我们使用高优先级，以便它在已经挂钩到该操作的函数之后触发。

注意：由于 WooCommerce 向每个第三个产品列表添加了清除内容，因此我们无法使用 woocommerce_product_subcategories() 函数或其编辑版本来显示类别。这是因为即使我们使用此功能单独显示类别，它也会清除列出的第三、第六（等等）类别或产品。我们可以尝试覆盖它，但编写我们自己的函数更简单。

<?php
/**
* Plugin Name: Tutsplus display WooCommerce products and categories/subcategories separately in archive pages
* Plugin URI: https://code.tutsplus.com/tutorials/woocommerce-display-product-categories-subcategories-and-products-in-two-separate-lists--cms-25479
* Description: Display products and categories / subcategories as two separate lists in product archive pages
* Version: 1.0
* Author: Rachel McCollin
* Author URI: https://rachelmccollin.co.uk
*
*
*/

function tutsplus_product_subcategories( $args = array() ) {

}

add_action( 'woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50 );

$parentid = get_queried_object_id();

$args = array(
    'parent' => $parentid
);

$terms = get_terms( 'product_cat', $args );

if ( $terms ) {
    echo '<ul class="product-cats">';

    foreach ( $terms as $term ) {
        echo '<li class="category">';                 
            woocommerce_subcategory_thumbnail( $term );
            echo '<h2>';
                echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
                    echo $term->name;
                echo '</a>';
            echo '</h2>';
        echo '</li>';
    }

    echo '</ul>';
}

function tutsplus_product_cats_css() {
    /* register the stylesheet */
    wp_register_style( 'tutsplus_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );
    /* enqueue the stylesheet */
    wp_enqueue_style( 'tutsplus_product_cats_css' );
}

add_action( 'wp_enqueue_scripts', 'tutsplus_product_cats_css' );

ul.product-cats {
    margin-left: 0;
}

ul.product-cats li {
    list-style: none;
    margin-left: 0;
    margin-bottom: 4.236em;
    text-align: center;
    position: relative;
}

ul.product-cats li img {
    margin: 0 auto; 
}

@media screen and (min-width:768px) {

    ul.product-cats li {
        width: 29.4117647059%;
        float: left;
        margin-right: 5.8823529412%;
    }

    ul.product-cats li:nth-of-type(3) {
        margin-right: 0;
    }

}