So zeigen Sie WooCommerce-Produkte nach Kategorie an

Veröffentlicht: 2020-08-16

WooCommerce zeigt Produkte nach Kategorie an Betreiben Sie einen WooCommerce-Shop und möchten Produkte nach Kategorien in WordPress anzeigen? Dieser Beitrag enthält eine detaillierte Erklärung, wie WooCommerce-Produkte nach Kategorie angezeigt werden. Wenn Sie mit WooCommerce vertraut sind, wissen Sie, dass Produktkategorien eine wichtige Rolle bei der Organisation Ihrer Produkte für die richtige Anzeige und den richtigen Zugriff durch Ihre Kunden spielen.

WooCommerce-Produkte nach Kategorie anzeigen

WooCommerce bietet Ihnen sofort einige Optionen, was Sie auf Ihren Archivseiten anzeigen können, z. B. Produkte, Kategorien oder Unterkategorien oder sowohl Produkte als auch Kategorien . Die meisten WooCommerce-Benutzer entscheiden sich jedoch für die dritte Option, um sowohl Produkte als auch Kategorien/Unterkategorien anzuzeigen. Woocommerce-Kategorien sortieren

Mit dieser Option kann Ihr Besucher entweder Produkte direkt auf der Startseite auswählen oder seine Suche verfeinern, indem er sich durch ein Produktkategoriearchiv klickt.

Der Hauptnachteil dabei ist jedoch, dass die Kategorien/Unterkategorien zusammen angezeigt werden, ohne Trennung zwischen den beiden. Dadurch sieht das Layout aufgrund unterschiedlicher Bildabmessungen etwas chaotisch aus.

Selbst wenn Ihre Bilder die gleiche 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 aus Expertensicht unorganisiert aussehen, wie z nicht alle seine Elemente haben die gleichen Abmessungen.

In diesem kurzen Tutorial erfahren Sie, wie Sie Kategorien in einer separaten Liste anzeigen, bevor Sie Produkte anzeigen.

Identifizieren oder unterscheiden Sie den Code in WooCommerce, der verwendet wird, um Kategorien und Unterkategorien auf Archivseiten auszugeben.
Erstellen Sie ein benutzerdefiniertes Plugin für den Code.
Schreiben Sie eine Funktion, die Kategorien oder Unterkategorien vor Produktlisten setzt.
Erstellen Sie einen benutzerdefinierten Stil für die Ausgabe.

a) Zeigen Sie sowohl Produkte als auch Kategorien oder Unterkategorien an

Schritte zum Anzeigen von Produkten und Kategorien oder Unterkategorien.

Melden Sie sich bei Ihrer WordPress-Site an und greifen Sie als Admin-Benutzer auf das Dashboard zu.
Klicken Sie im Dashboard-Menü auf Darstellungsmenü > Anpassen. Klicken Sie auf die Shop-Seite und wählen Sie WooCommerce > Produktkatalog. Wählen Sie in der Option Shop-Display die Option Kategorien & Produkte anzeigen aus. Wählen Sie in der Kategorieanzeigeoption Unterkategorien und Produkte anzeigen , wie unten gezeigt:
Denken Sie daran, die vorgenommenen Änderungen zu speichern .
Das wird das Ergebnis sein:

b) Zeigen Sie die WooCommerce-Produktkategorie an

Sie können die WooCommerce-Produktkategorie jedoch mithilfe eines Code-Snippets unten anzeigen, das in der Datei functions.php platziert werden sollte.

Schritte zum Anzeigen der WooCommerce-Produktkategorie

Hier sind die Schritte, die Sie befolgen sollten:

Melden Sie sich bei Ihrer WordPress-Site an und greifen Sie als Admin-Benutzer auf das Dashboard zu.
Klicken Sie im Dashboard-Menü auf Darstellungsmenü > Themen-Editor. Wenn die Seite „ Themen-Editor “ geöffnet ist, suchen Sie nach der Themen -Funktionsdatei, in der wir die Funktion hinzufügen, die die WooCommerce-Produktkategorie anzeigt.
Fügen Sie der PHP -Datei den folgenden Code hinzu:

 Funktion woocommerce_product_category( $args = array() ) {

    $woocommerce_category_id = get_queried_object_id();

  $args = array(

             'parent' => $woocommerce_category_id
  );

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

  if ( $terms ) {

             echo '<ul class="woocommerce-categories">';

             foreach ( $terms als $term ) {

             echo '<li class="woocommerce-product-category-page">';

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

  }

}

add_action( 'woocommerce_before_shop_loop', 'woocommerce_product_category', 100 );

Das wird das Ergebnis sein:

Es benötigt jedoch ein benutzerdefiniertes CSS, damit die Produkte gut angezeigt werden. Wir werden dies später in diesem Tutorial tun.

Wie der Kodex funktioniert

Dieser Code funktioniert, indem einfach die woocommerce_product_category() function wird, die die Kategorien oder Unterkategorien ausgibt, bevor die Schleife ausgeführt wird, die die Produkte ausgibt. Es kann das Thema überschreiben, da die Funktion austauschbar ist.

c) Unterkategorien einer WooCommerce-Produktkategorie auflisten

Es ist sehr einfach, die Unterkategorie der WooCommerce-Produktkategorien zu erhalten, indem eine benutzerdefinierte Funktion verwendet wird, die den Slug der übergeordneten Produktkategorie nutzt.

Schritte zum Auflisten von Unterkategorien einer WooCommerce-Produktkategorie

Melden Sie sich bei Ihrer WordPress-Site an und greifen Sie als Admin-Benutzer auf das Dashboard zu.
Klicken Sie im Dashboard-Menü auf Darstellungsmenü > Themen-Editor. Wenn die Seite „ Themen-Editor “ geöffnet ist, suchen Sie nach der Themen -Funktionsdatei, in der wir die Funktion hinzufügen, die Unterkategorien einer WooCommerce-Produktkategorie auflistet.
Fügen Sie der PHP -Datei den folgenden Code hinzu:

 Funktion woocommerce_get_product_category_of_subcategories( $category_slug ){

$terms_html = array();
$taxonomie = 'product_cat';
$parent = get_term_by( 'slug', $category_slug, $taxonomy );
$children_ids = get_term_children( $parent->term_id, $taxonomy );

foreach($children_ids als $children_id){

    $term = get_term( $children_id, $taxonomie );

    $term_link = get_term_link( $term, $taxonomie );

    if ( is_wp_error( $term_link ) ) $term_link = '';

    $terms_html[] = '<a href="' . esc_url( $term_link ) . '" rel="tag" class="' . $term->slug . '">' . $term->name . '</a>';
}

return '<span class="subcategories-' . $category_slug . '">' . implode( ', ', $terms_html ) . '</span>';

}

Das wird das Ergebnis sein:

Wie der Code funktioniert.

Das WP_Term-Objekt erhält die übergeordnete Produktkategorie. Dann erhält es die untergeordnete ID in einem Array, und schließlich werden die untergeordneten Kategorien im HTML angezeigt, indem eine Schleife durch das untergeordnete ID-Array ausgeführt wird.

d) Identifizieren des Codes, den WooCommerce verwendet, um Kategorien und Produkte in Archiven auszugeben

Bevor wir ein Plugin erstellen, besteht der erste Schritt auf jeden Fall darin, zu identifizieren, wie WooCommerce Kategorien und Unterkategorien ausgibt. Das bedeutet, dass wir manuell nach dem WooCommerce-Quellcode suchen müssen, um die entsprechende Funktion zu finden.

Um den Vorgang für Sie zu vereinfachen, suchen Sie einfach nach der archive-product.php , die sich im Vorlagenordner befindet. Dies ist die Datei, die WooCommerce verwendet, um Archivseiten anzuzeigen. Sie müssen nun den Code finden, der die Kategorien und Produkte ausgibt:

 <?php
/**
* Haken woocommerce_before_shop_loop
*
* @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( 'Inhalt', 'Produkt' ); ?>

<?php endwhile; // Ende der Schleife. ?>

<?php woocommerce_product_loop_end(); ?>

Wie der Kodex funktioniert:

Die woocommerce_product_subcategories() function gibt die Kategorien oder Unterkategorien aus, bevor die Schleife ausgeführt wird, die die Produkte ausgibt. Der Grund, warum ich Sie auf diese Funktion aufmerksam gemacht habe, ist, dass sie austauschbar ist, was bedeutet, dass wir sie in unserem Thema überschreiben könnten.

Dies funktioniert jedoch nicht, da WooCommerce über ein integriertes Design zum Löschen von Elementen verfügt, das bei der Standardanzeige am Anfang einer Zeile erscheinen würde. Also, was sollten wir tun? Die Antwort ist einfach. Wir müssen die Anzeige von Kategorien und Unterkategorien auf unseren Archivseiten deaktivieren, damit nur Produkte angezeigt werden.

Danach besteht der nächste Schritt darin, eine neue Funktion zu erstellen, die die Produktkategorien oder Unterkategorien ausgibt, und sie mit der woocommerce_before_shop_loop action zu verknüpfen, wobei sicherzustellen ist, dass wir eine hohe Priorität verwenden, damit sie nach den Funktionen ausgelöst wird, die bereits mit dieser Aktion verknüpft sind.

Es ist jedoch wichtig zu beachten, dass WooCommerce jedem dritten Produktlisting Clears hinzufügt. Das bedeutet, dass wir die woocommerce_product_subcategories() function oder eine bearbeitete Version davon nicht verwenden können, um die Kategorien anzuzeigen. Die Erklärung dafür ist, dass diese Funktion die dritte, sechste (und so weiter) Kategorie oder das aufgelistete Produkt löscht, selbst wenn wir diese Funktion verwenden, um Kategorien separat anzuzeigen. Das bedeutet, dass wir eine Funktion erstellen müssen, die sie überschreibt. Dies kann durch Erstellen eines Plugins erfolgen.

e) Erstellung des Plugins

Du musst zuerst ein neues älteres erstellen und ihm einen eindeutigen Namen im wp-content/plugins- Verzeichnis geben. Seien Sie für dieses Beispiel vorsichtig, wenn Sie die Schritte befolgen, damit Sie die von uns benötigte Funktionalität erreichen. Ich werde diesen Namen njengah-separate-products-categories-in-archives .

In diesem Ordner müssen Sie eine neue Datei erstellen, wiederum mit einem eindeutigen Namen. Ich werde den gleichen Namen auch für diesen Ordner njengah-separate-products-categories-in-archives.php .

Schritte zum Erstellen des Plugins

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

 <?php
/**
* Plugin-Name: WooCommerce-Produktkategorie
* Beschreibung: WooCommerce-Kategorien auf WooCommerce-Produktseiten anzeigen

**/

Bevor Sie unsere Funktion schreiben, müssen Sie die Kategorielisten in den Admin-Bildschirmen deaktivieren, indem Sie sich bei Ihrer WordPress-Site anmelden und als Admin-Benutzer auf das Dashboard zugreifen.
Klicken Sie im Dashboard-Menü auf Darstellungsmenü > Anpassen. Klicken Sie auf die Shop-Seite und wählen Sie WooCommerce > Produktkatalog. Wählen Sie in der Option Shop-Display die Option Produkte anzeigen aus. Wählen Sie in der Anzeigeoption Kategorie die Option Produkte anzeigen aus.
Denken Sie daran, die vorgenommenen Änderungen zu speichern .
Das wird das Ergebnis sein:
Fügen Sie dies der Plugin-Datei hinzu:

 Funktion njengah_product_subcategories( $args = array()) {

}

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

Dann müssen Sie diesen Code in die Funktion einfügen:

 $parentid = get_queried_object_id();

$args = array(

'parent' => $parentid

);

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

if ( $terms ) {

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

foreach ( $terms als $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>';

}

Das wird das Ergebnis sein: WooCommerce-Produkte nach Kategorie anzeigen

Wie Sie dem obigen Bild entnehmen können, sind die Kategorien nicht gut organisiert. Das bedeutet, dass wir unser benutzerdefiniertes Styling hinzufügen müssen. Lassen Sie uns jedoch vorher lernen, wie der Code funktioniert.

Wie der Kodex funktioniert

Die von uns erstellte Funktion identifiziert das aktuell abgefragte Objekt und definiert seine ID als $parentid . Dann verwendet es 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, und wenn es sich um ein Kategoriearchiv handelt, werden Unterkategorien zurückgegeben.

Darüber hinaus prüft die Funktion, ob es irgendwelche Begriffe gibt, bevor sie eine for each-Schleife und ein ul Element öffnet. Das bedeutet, dass es für jeden Begriff ein li -Element erstellt und dann das category image using woocommerce_subcatgeory_thumbnail() ausgibt, gefolgt von dem Kategorienamen in einem Link zu seinem Archiv.

Schritte zum Gestalten der Kategorielisten

Dies sind die Schritte, die Sie befolgen müssen, aber dazu benötigen wir ein Stylesheet in unserem Plugin, das wir in die Warteschlange einreihen müssen.

Erstellen Sie einen Ordner namens CSS und darin eine Datei namens CSS. Dies sollte im Plugin-Ordner erfolgen, damit dies funktioniert .
Fügen Sie diesen Code oben in der Funktion hinzu, die Sie bereits erstellt haben:

 Funktion njengah_product_cats_css() {




/* Stylesheet registrieren */

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




/* Stilblatt einreihen */

wp_enqueue_style( 'njengah _product_cats_css' );




}




add_action( 'wp_enqueue_scripts', ' njengah _product_cats_css' );

Der nächste Schritt besteht darin, Ihr Stylesheet zu öffnen und den folgenden Code hinzuzufügen. Es ist jedoch wichtig zu beachten, dass WooCommerce das Mobile-First-Design verwendet, also werden wir das auch verwenden.

 ul.product-cats li {
Listenstil: keiner;
linker Rand: 0;
Rand unten: 4.236em;
Textausrichtung: Mitte;
Position: relativ;
}

ul.product-cats li img {
Rand: 0 automatisch;
}


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

ul.product-cats {
linker Rand: 0;
Lösche beide;
}

ul.product-cats li {
Breite: 29,4117647059 %;
Schwimmer: links;
Rand rechts: 5,8823529412 %;
}

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

}

Das wird das Ergebnis sein:

Fazit

In diesem Beitrag habe ich verschiedene Möglichkeiten hervorgehoben, wie Sie WooCommerce-Produkte nach Kategorie anzeigen können. Aus diesem kurzen Tutorial können Sie verstehen, warum Produktkategorien ein großartiges Feature in WooCommerce sind, aber die Art und Weise, wie sie angezeigt werden, nicht immer ideal ist.

Außerdem haben Sie gelernt, wie Sie ein Plugin erstellen, das Produktkategorien oder Unterkategorien getrennt von den Produktlistings ausgibt, und wie Sie die Kategorielistings gestalten. Der herausragendste Teil dieses Tutorials ist die Erstellung des benutzerdefinierten Plugins, das eine Liste von Kategorien oder Unterkategorien auf der Seite ausgibt, indem die Funktion mit einem anderen Aktionshaken innerhalb der WooCommerce-Vorlagendatei verbunden wird.

So zeigen Sie WooCommerce-Produkte nach Kategorie an

WooCommerce-Produkte nach Kategorie anzeigen

a) Zeigen Sie sowohl Produkte als auch Kategorien oder Unterkategorien an

Schritte zum Anzeigen von Produkten und Kategorien oder Unterkategorien.

b) Zeigen Sie die WooCommerce-Produktkategorie an

Schritte zum Anzeigen der WooCommerce-Produktkategorie

Wie der Kodex funktioniert

c) Unterkategorien einer WooCommerce-Produktkategorie auflisten

Schritte zum Auflisten von Unterkategorien einer WooCommerce-Produktkategorie

Wie der Code funktioniert.

d) Identifizieren des Codes, den WooCommerce verwendet, um Kategorien und Produkte in Archiven auszugeben

Wie der Kodex funktioniert:

e) Erstellung des Plugins

Schritte zum Erstellen des Plugins

Wie der Kodex funktioniert

Schritte zum Gestalten der Kategorielisten

Fazit

Ähnliche Artikel