Advertisement
  1. Code
  2. WordPress

WooCommerce: Hinzufügen der Produkt-Kurzbeschreibung zu Archivseiten

Scroll to top
Read Time: 3 min

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

Final product imageFinal product imageFinal product image
What You'll Be Creating

WooCommerce wird mit Archivseiten und -schleifen ausgeliefert, die einen großartigen Job machen, aber manchmal müssen Sie vielleicht ein bisschen mehr Informationen auf Ihrem Hauptshop und anderen Archivseiten anzeigen.

In diesem Tutorial zeige ich Ihnen, wie Sie die Produkt-Kurzbeschreibung zu Ihren Archivseiten hinzufügen und unter dem Produkttitel anzeigen können.

Was Sie brauchen

Um mitzumachen, benötigen Sie:

  • Eine Entwicklungsinstallation von WordPress.
  • Einen Code-Editor.
  • WooCommerce installiert und aktiviert.
  • Hinzugefügte Produkte – Ich habe die Dummy-Produktdaten importiert, die in WooCommerce enthalten sind. Weitere Informationen dazu finden Sie in diesem Handbuch.
  • Ein WooCommerce-kompatibles Design aktiviert – Ich verwende Storefront.

Bevor Sie beginnen, stellen Sie sicher, dass Sie WooCommerce eingerichtet haben. Um die Produktkurzbeschreibungen hinzuzufügen, führen Sie drei Schritte aus:

  1. Erstellen Sie ein Plugin für die Funktion und aktivieren Sie das Plugin.
  2. Fügen Sie eine Funktion hinzu, die die Produktkurzbeschreibung ausgibt.
  3. Identifizieren Sie den Hook in WooCommerce, an den wir die Funktion anschließen müssen, und befestigen Sie die Funktion an diesen Hook.

Fangen wir also an!

Erstellen des Plugins

Erstellen Sie in Ihrem Verzeichnis wp-content/plugins eine neue PHP-Datei. Ich nenne meine tutsplus-product-archive-short-descriptions.php.

Öffnen Sie die Datei im Code-Editor. Fügen Sie oben in der Datei folgendes hinzu:

1
<?php
2
/**

3
 * Plugin Name: Tutsplus Display Product Short Descriptions in WooCommerce Archive pages

4
 * Plugin URI: https://code.tutsplus.com/tutorials/woocommerce-adding-the-product-short-description-to-archive-pages--cms-25435

5
 * Description: Add product short descriptions to the loop in product archive pages (requires WooCommerce to be activated)

6
 * Version: 1.0

7
 * Author: Rachel McCollin

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

9
 *

10
 */

Dies richtet das Plugin ein und gibt WordPress alles, was es braucht, um es zu aktivieren.

Gehen Sie nun auf den Plugins-Bildschirm in Ihrem WordPress-Admin und finden das Plugin:

Activating the plugin via the plugins screenActivating the plugin via the plugins screenActivating the plugin via the plugins screen

Aktivieren Sie es nun.

Auf den ersten Blick wird es keinen Unterschied machen, da Sie es nicht gefüllt haben. So sieht die Hauptshopseite im Moment aus:

The site with the Storefront theme activated with no product short descriptions on the main shop archive pageThe site with the Storefront theme activated with no product short descriptions on the main shop archive pageThe site with the Storefront theme activated with no product short descriptions on the main shop archive page

Schreiben einer Funktion zur Ausgabe der Kurzbeschreibung

Die Kurzbeschreibung für Produkte in WooCommerce verwendet den Auszug, den Sie in normalen Beiträgen finden würden. Alles, was Sie tun müssen, um es anzuzeigen, ist, den Auszug für den Beitrag anzuzeigen.

Fügen Sie in Ihrer Plugin-Datei den folgenden Code hinzu:

1
function tutsplus_excerpt_in_product_archives() {
2
    
3
	the_excerpt();
4
	
5
}

So einfach ist das! Aber jetzt müssen Sie Ihre Funktion an die richtige Aktion anschließen, so dass sie an der richtigen Stelle in Ihren Archivseiten ausgegeben wird.

An die richtige Aktion anhängen

Werfen wir einen Blick auf die Datei in WooCommerce, die den Inhalt der Schleife auf Archivseiten ausgibt. Diese Datei ist content-product.php, und Sie finden sie im templates-Ordner im WooCommerce-Plugin.

Die Datei enthält eine Reihe von Aktions-Hooks, die alle von WooCommerce verwendet werden, um verschiedene Inhalte auszugeben.

Da wir unseren Auszug unter dem Titel des Produkts anzeigen möchten, ist der Hook, den wir verwenden müssen, woocommerce_after_shop_loop_item_title. Wie Sie aus der content-product.php-Datei sehen können, sind bereits zwei Funktionen angeschlossen, woocommerce_template_loop_rating() und woocommerce_template_loop_price(), die Prioritäten von 5 bzw. 10 haben. Wir müssen also unsere Funktion mit einer höheren Prioritätsnummer verbinden, um sicherzustellen, dass sie nach diesen abfeuert. Ich lasse einen gewissen Spielraum und benutze 40 als Priorität.

Fügen Sie unter Ihrer Funktion dies hinzu:

1
add_action( 'woocommerce_after_shop_loop_item_title', 'tutsplus_excerpt_in_product_archives', 40 );

Speichern Sie nun Ihre Plugin-Datei und aktualisieren Sie die Shop-Seite in Ihrem Browser. Sie sehen nun die Produkt-Kurzbeschreibungen unter den Produktnamen:

The shop page with short descriptions added to productsThe shop page with short descriptions added to productsThe shop page with short descriptions added to products

Diese Beschreibungen (die von den Dummy-Daten bereitgestellt werden) sind etwas lang: Persönlich würde ich kürzere Beschreibungen auf einer Live-Site verwenden. Aber Sie können die Beschreibungen auf den Archivseiten deutlich sehen.

Zusammenfassung

Da WooCommerce fast alle Inhalte mithilfe von Aktions-Hooks ausgibt, ist es einfach, mehr Inhalt hinzuzufügen, indem Funktionen geschrieben und an diese Hooks angefügt werden. In diesem Tutorial haben Sie gelernt, wie Sie Ihren Produktarchiven Produktkurzbeschreibungen hinzufügen. Wenn Sie dies weiterführen möchten, können Sie ein oder mehrere bedingte Tags in Ihre Funktion aufnehmen, um dies auf bestimmten Archivseiten zu tun.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.