Anzeigen von WooCommerce-Kategorien, Unterkategorien und Produkten in separaten Listen

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

• Produkte
• Kategorien (auf der Hauptseite des Shops) oder Unterkategorien (auf den Kategorieseiten)
• sowohl Produkte als auch Kategorien.

Wenn ich ein Geschäft einrichte, wähle ich normalerweise die dritte Option: Produkte und Kategorien/Unterkategorien. Dies bedeutet, dass Besucher meines Shops entweder Produkte direkt von der Startseite auswählen oder ihre Suche verfeinern können, indem sie sich durch ein Produktkategorienarchiv klicken.

Bei diesem Ansatz gibt es jedoch einen Fehler: Er zeigt die Kategorien/Unterkategorien zusammen an, ohne Trennung zwischen den beiden. Dies bedeutet, dass das Layout etwas unordentlich aussehen kann, wenn Ihre Produktbilder andere Abmessungen als Ihre Produktbilder haben. Selbst wenn Ihre Bilder dieselbe Größe haben und eine der Zeilen auf der Archivseite sowohl Kategorien als auch Produkte enthält, lässt das Fehlen einer Schaltfläche "In den Warenkorb" für Kategorien diese Zeile unordentlich aussehen, da nicht alle Elemente die gleiche Abmessungen.

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

Dazu folgen wir vier Schritten:

1. Identifizieren 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, um Kategorien oder Unterkategorien vor Produktlisten zu setzen.
4. Gestalten Sie die Ausgabe.

Bevor Sie beginnen, benötigen Sie jedoch eine WooCommerce-Installation, in der einige Produkte hinzugefügt und Produktkategorien und Unterkategorien eingerichtet wurden.

Was werden Sie brauchen?

Um mitzumachen, benötigen Sie:

• Eine Entwicklungsinstallation von WordPress.
• Ein Code-Editor.
• installiertes und aktiviertes WooCommerce.
• hinzugefügte Produkte - Ich habe die Dummy-Produktdaten importiert, die mit WooCommerce geliefert werden. Einzelheiten dazu finden Sie in diesem Handbuch.
• Ein WooCommerce-kompatibles Thema wurde aktiviert - ich verwende Storefront.

Bevor wir beginnen: Die Standardoptionen

Werfen wir einen Blick darauf, was WooCommerce uns standardmäßig bietet.

Ich habe zunächst einige Bilder zu meinen Produktkategorien und Unterkategorien hinzugefügt, da die WooCommerce-Dummy-Daten diese nicht enthalten. Ich habe einfach ein Bild von einem der Produkte aus jeder Kategorie oder Unterkategorie verwendet, wie Sie im Screenshot sehen können:

Schauen wir uns nun an, wie WooCommerce die Produktkategorien und Produkte auf Archivseiten anzeigt.

Wenn Sie dies noch nicht getan haben, gehen Sie zu WooCommerce > Einstellungen, wählen Sie die Registerkarte Produkte und dann die Option Anzeige. Wählen Sie für jede der Optionen zur Anzeige der Shop-Seite und zur Anzeige der Standardkategorie die Option Beide anzeigen aus:

Klicken Sie auf die Schaltfläche Änderungen speichern, um Ihre Einstellungen zu speichern und die Shop-Seite Ihrer Website zu besuchen. Meins sieht so aus:

Da ich drei Produktkategorien habe und meine Kategoriebilder dieselbe Größe wie meine Produktbilder haben, sieht es ganz ordentlich aus. Aber hier ist eines der Archive der Produktkategorie:

Da diese Kategorie zwei Unterkategorien hat, wird neben ihnen das erste Produkt in einem Raster mit einer Breite von drei Elementen angezeigt. Ich möchte meine Kategorien und Unterkategorien bekannter machen und sie einfach getrennt von den Produktlisten präsentieren. Also lass uns das machen.

Identifizieren des Codes, den WooCommerce zur Ausgabe von Kategorien und Produkten in Archiven verwendet

Der erste Schritt besteht darin, zu ermitteln, wie WooCommerce Kategorien und Unterkategorien ausgibt. Schauen wir uns also den WooCommerce-Quellcode an, um die entsprechende Funktion zu finden.

Die Datei, die WooCommerce zum Anzeigen von Archivseiten verwendet, ist archive-product.php, die sich im templates ordner befindet.

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

1

<?php

2

    /**

3

	 * woocommerce_before_shop_loop hook

4

	 *

5

	 * @hooked woocommerce_result_count - 20

6

	 * @hooked woocommerce_catalog_ordering - 30

7

	*/

8

	do_action( 'woocommerce_before_shop_loop' );

9

?>

10

11

<?php woocommerce_product_loop_start(); ?>

12

13

    <?php woocommerce_product_subcategories(); ?>

14

15

	<?php while ( have_posts() ) : the_post(); ?>

16

17

		<?php wc_get_template_part( 'content', 'product' ); ?>

18

19

	<?php endwhile; // end of the loop. ?>

20

21

<?php woocommerce_product_loop_end(); ?>

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

Die Funktion ist steckbar, was bedeutet, dass wir sie in unserem Thema überschreiben können. Leider funktioniert das nicht ganz, da WooCommerce über ein integriertes Design zum Löschen von Elementen verfügt, das am Anfang einer Zeile mit der Standardanzeige angezeigt wird.

Stattdessen deaktivieren wir die Anzeige von Kategorien und Unterkategorien auf unseren Archivseiten, sodass nur Produkte angezeigt werden. Anschließend erstellen wir eine neue Funktion, die die Produktkategorien oder Unterkategorien ausgibt, und verknüpfen sie mit der Aktion woocommerce_before_shop_loop. Dabei stellen wir sicher, dass wir eine hohe Priorität verwenden, damit sie nach den Funktionen ausgelöst wird, die bereits mit dieser Aktion verknüpft sind.

Hinweis: Da WooCommerce jeder dritten Produktliste Clearings hinzufügt, können wir die Funktion woocommerce_product_subcategories() oder eine bearbeitete Version davon nicht zum Anzeigen der Kategorien verwenden. Dies liegt daran, dass die dritte, sechste (oder so weiter) Kategorie oder das aufgelistete Produkt gelöscht wird, selbst wenn wir diese Funktion verwenden, um Kategorien separat anzuzeigen. Wir könnten versuchen, das zu überschreiben, aber es ist einfacher, nur unsere eigene Funktion zu schreiben.

Erstellen wir also ein Plugin, das das macht.

Plugin erstellen

Erstellen Sie in Ihrem Verzeichnis wp-content/plugins einen neuen Ordner und geben Sie ihm einen eindeutigen Namen. Ich rufe meine tutsplus-separate-products-categories-in-archives an. Erstellen Sie darin eine neue Datei mit einem eindeutigen Namen. Ich verwende den gleichen Namen: tutsplus-separate-products-categories-in-archives.php.

Öffnen Sie Ihre Datei und fügen Sie diesen Code hinzu:

1

<?php

2

/**

3

 * Plugin Name: Tutsplus display WooCommerce products and categories/subcategories separately in archive pages

4

 * Plugin URI: https://code.tutsplus.com/tutorials/woocommerce-display-product-categories-subcategories-and-products-in-two-separate-lists--cms-25479

5

 * Description: Display products and catgeories / subcategories as two separate lists in product archive pages

6

 * Version: 1.0

7

 * Author: Rachel McCollin

8

 * Author URI: http://rachelmccollin.co.uk

9

 *

10

 *

11

 */

Möglicherweise möchten Sie die Autorendetails bearbeiten, da dies Ihr Plugin ist, das Sie schreiben. Speichern Sie Ihre Datei und aktivieren Sie das Plugin über den WordPress-Administrator.

Unsere Funktion schreiben

Schreiben wir nun die Funktion. Deaktivieren Sie jedoch vor dem Start die Kategorielisten in den Administrationsbildschirmen. Gehen Sie zu WooCommerce > Einstellungen, wählen Sie die Registerkarte Produkte und dann die Option Anzeige. Wählen Sie für jede der Optionen zur Anzeige von Shop-Seiten und zur Anzeige von Standardkategorien die Option Produkte anzeigen aus. Speichern Sie Ihre Änderungen.

Ihre Shop-Seite sieht nun ungefähr so aus:

Fügen Sie in Ihrer Plugin-Datei Folgendes hinzu:

1

function tutsplus_product_subcategories( $args = array() ) {

2

3

	}

4

}

5

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

Fügen Sie nun diesen Code in die Funktion ein:

1

$parentid = get_queried_object_id();

2

3

$args = array(

4

	'parent' => $parentid

5

);

6

7

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

8

9

if ( $terms ) {

10

11

	echo '<ul class="product-cats">';

12

13

		foreach ( $terms as $term ) {

14

15

			echo '<li class="category">';					

16

17

				woocommerce_subcategory_thumbnail( $term );

18

19

				echo '<h2>';

20

					echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';

21

						echo $term->name;

22

					echo '</a>';

23

				echo '</h2>';

24

25

			echo '</li>';

26

27

28

	}

29

30

	echo '</ul>';

31

32

}

Werfen wir einen Blick darauf, was diese Funktion bewirkt:

• Es identifiziert das aktuell abgefragte Objekt und definiert seine ID als $parentid.
• Es verwendet get_terms(), um Begriffe mit dem aktuell abgefragten Element als übergeordnetem Element zu identifizieren. Wenn dies die Hauptseite des Shops ist, werden Kategorien der obersten Ebene zurückgegeben. Wenn dies ein Kategoriearchiv ist, werden Unterkategorien zurückgegeben.
• Anschließend wird geprüft, ob Begriffe vorhanden sind, bevor eine foreach-Schleife und ein ul-Element geöffnet werden.
• Für jeden Begriff wird ein li-Element erstellt und anschließend das Kategoriebild mit woocommerce_subcatgeory_thumbnail() ausgegeben, gefolgt vom Kategorienamen in einem Link zu seinem Archiv.

Speichern Sie nun Ihre Datei und aktualisieren Sie die Hauptseite des Shops. Meins sieht so aus:

Die Kategorien werden angezeigt, müssen jedoch gestylt werden. Lass uns das als nächstes machen.

Gestaltung der Kategorielisten

Damit wir Styling hinzufügen können, benötigen wir ein Stylesheet in unserem Plugin, das wir in die Warteschlange stellen müssen.

Erstellen Sie in Ihrem Plugin-Ordner einen Ordner mit dem Namen css und erstellen Sie darin eine Datei mit dem Namen style.css.

Fügen Sie dies nun in Ihrer Plugin-Datei über der bereits erstellten Funktion hinzu:

1

function tutsplus_product_cats_css() {

2

3

    /* register the stylesheet */

4

    wp_register_style( 'tutsplus_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );

5

6

    /* enqueue the stylsheet */

7

    wp_enqueue_style( 'tutsplus_product_cats_css' );

8

9

}

10

11

add_action( 'wp_enqueue_scripts', 'tutsplus_product_cats_css' );

Dadurch wird das soeben erstellte Stylesheet korrekt in die Warteschlange gestellt.

Öffnen Sie nun Ihr Stylesheet und fügen Sie den folgenden Code hinzu. WooCommerce verwendet Mobile First Styling, das werden wir also auch verwenden.

1

ul.product-cats li {

2

    list-style: none;

3

	margin-left: 0;

4

	margin-bottom: 4.236em;

5

	text-align: center;

6

	position: relative;

7

}

8

ul.product-cats li img {

9

	margin: 0 auto;	

10

}

11

12

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

13

14

	ul.product-cats {

15

		margin-left: 0;

16

		clear: both;

17

	}

18

	ul.product-cats li {

19

		width: 29.4117647059%;

20

		float: left;

21

		margin-right: 5.8823529412%;

22

	}

23

	ul.product-cats li:nth-of-type(3) {

24

		margin-right: 0;

25

	}

26

27

}

Ich habe die genauen Breiten und Ränder aus dem von WooCommerce verwendeten Styling kopiert.

Überprüfen Sie nun erneut Ihre Hauptshop-Seite. Hier ist meins:

Hier ist das Archiv der Kategorie Musik:

Und so sieht es auf kleineren Bildschirmen aus:

Zusammenfassung

Produktkategorien sind eine großartige Funktion von WooCommerce, aber die Art und Weise, wie sie angezeigt werden, ist nicht immer ideal. In diesem Tutorial haben Sie gelernt, wie Sie ein Plugin erstellen, das Produktkategorien oder Unterkategorien getrennt von den Produktlisten ausgibt, und anschließend Ihre Kategorielisten gestaltet.

Mit diesem Code können Sie eine Liste von Kategorien oder Unterkategorien an anderer Stelle auf der Seite ausgeben (z. B. unter den Produkten), indem Sie die Funktion mit einem anderen Aktions-Hook in der WooCommerce-Vorlagendatei verknüpfen.

Wenn Sie derzeit einen Shop betreiben, den Sie erweitern möchten, oder nach zusätzlichen Plugins suchen, die Sie in Bezug auf WooCommerce studieren können, zögern Sie nicht, zu prüfen, welche Plugins in Envato Market verfügbar sind.