So machen Sie WooCommerce-Produktattribute prominenter

WooCommerce-Produktattribute sind eine wirklich nützliche Funktion, die jedoch standardmäßig ganz unten auf der Seite, in der zusätzliche Information Sektion. Abhängig von Ihrem Design sind sie möglicherweise erst sichtbar, wenn der Benutzer auf eine Registerkarte klickt. Dies bedeutet, dass viele Benutzer sie möglicherweise nicht anzeigen. 

Manchmal ist es hilfreicher, sie zusammen mit den Produktkategorien im oberen Teil der Produktseite aufzuführen. In diesem Tutorial zeige ich Ihnen, wie Sie Produktattribute aus dem zusätzliche Information Registerkarte zum oberen Bereich der Seite.

Was du brauchen wirst

Um mitzumachen, brauchst du:

• Eine Entwicklungsinstallation von WordPress.
• Ein Code-Editor.
• WooCommerce installiert und aktiviert.
• Produkte hinzugefügt - Ich habe die Dummy-Produktdaten importiert, die mit WooCommerce geliefert werden. Einzelheiten dazu finden Sie in dieser Anleitung.
• Ein oder mehrere Produktattribute hinzugefügt (das eingebaute Farbattribut mit den Dummy-Daten funktioniert nicht standardmäßig).
• Ein WooCommerce-kompatibles Design wurde aktiviert. Ich verwende Storefront.

Um die Attribute am oberen Rand der einzelnen Produktseite hinzuzufügen, führen wir folgende Schritte aus:

1. Erstellen Sie ein leeres Plugin und aktivieren Sie es.
2. Sehen Sie sich den WooCommerce-Quellcode an, um den Filter zu identifizieren, der die Produktattribute steuert, die den Registerkarten am unteren Seitenrand hinzugefügt werden.
3. Fügen Sie eine mit diesem Filter verknüpfte Funktion hinzu, um die Registerkarte für Attribute zu entfernen.
4. Sehen Sie sich die Quelldateien erneut an, um den Haken zu identifizieren, der den Inhalt oben auf der Seite einfügt.
5. Hängen Sie stattdessen eine Funktion an.

Beginnen wir mit einem Blick auf die Art und Weise, wie unsere Produktattribute standardmäßig angezeigt werden. Ich habe ein Attribut erstellt Größe und ich habe drei Werte hinzugefügt: klein, mittel und groß. Hier wird es in angezeigt zusätzliche Information Abschnitt am Ende einer Produktseite:

Wir möchten diese Produktattribute vom unteren Rand des Bildschirms nach oben links unter die Produktbeschreibung verschieben.

Plugin erstellen

Erstellen Sie in Ihrem Ordner wp-content / plugins eine neue Datei. Ich rufe meine an woocommerce-prominent-product-attributes.php. Öffnen Sie diese Datei und fügen Sie Folgendes hinzu:

Speichern Sie Ihre Datei und gehen Sie zu Plugins Bildschirm in Ihrem WordPress-Dashboard. Aktivieren Sie das Plugin.
WooCommerce-Quellcode: Anzeige der Produktattribute
Beginnen wir mit der Identifizierung der Funktion und des Hooks, die zur Ausgabe von Produktattributen verwendet werden. Dazu werden einige Plugin-Dateien durchsucht:
 
Die Vorlage, die die einzelne Produktseite ausgibt, ist woocommerce / templates / einzelprodukt.php.
 
In dieser Datei befindet sich ein get_template_part () rufen sie an content-single-product.php Datei.
 
In dieser Datei befindet sich eine Aktion woocommerce_after_single_product_summary. Drei Funktionen sind daran gebunden: Die, die wir uns ansehen müssen, ist woocommerce_output_product_data_tabs ().
 
Sie können das finden woocommerce_output_product_data_tabs () Funktion in woocommerce / includes / wc-template-functions.php.
 
Die Funktion verwendet wc_get_template () in diesem Fall einen anderen Schablonenteil abzurufen wooocommerce / templates / einzelprodukt / tabs / tabs.php.
 
In dieser Datei (wir kommen dorthin, versprochen!) Gibt es eine Variable namens $ tabs, welches definiert ist als apply_filters ('woocommerce_product_tabs', array ());.
 
Um die Registerkarte "Produktattribute" zu entfernen, müssen Sie eine Funktion erstellen, die diese Registerkarte entfernt und mit der woocommerce_product_tabs Filter. 
 
Puh! Wir sind am Ende dort angekommen.
Entfernen von Produktattributen aus den Registerkarten mithilfe eines Filters
Glücklicherweise bietet die WooCommerce-Dokumentation eine Anleitung zum Entfernen von Registerkarten mithilfe dieses Filters. Dies macht unsere Arbeit etwas einfacher.
Fügen Sie in Ihrer Plugin-Datei diesen Code hinzu:
/ ** * Entfernt die Registerkarte "Zusätzliche Informationen", auf der die Produktattribute angezeigt werden. * * @param array $ Registerkarten WooCommerce-Registerkarten, die angezeigt werden sollen. * * @return-Array WooCommerce-Registerkarten, abzüglich "Zusätzliche Informationen". * / function tutsplus_remove_product_attributes_tab ($ tabs) unset ($ tabs ['additional_information']); $ tabs zurückgeben;  add_filter ('woocommerce_product_tabs', 'tutsplus_remove_product_attributes_tab', 100);
Diese Funktion hat $ tabs als ihr Objekt, weil das die Variable ist, mit der wir arbeiten. Es entfernt die 'zusätzliche Information' Registerkarte aus dem Array von Werten, die von gespeichert werden $ tabs Variable. Beachten Sie, dass ich eine hohe nummerierte Priorität von verwendet habe 100 Wenn Sie meine Funktion einhaken, um sicherzustellen, dass sie nach den Funktionen ausgelöst wird, die die Registerkarten hinzufügen.
Speichern Sie Ihre Datei und aktualisieren Sie Ihre Produktseite:
Das ist also der Tab entfernt. Jetzt müssen wir die Produktattribute wieder oben auf der Seite einfügen.
Suchen der Stelle im Code zum Hinzufügen von Attributen
Wieder müssen wir feststellen, wo im Code eine Funktion zum Anzeigen von Produktattributen hinzugefügt werden muss. Mit anderen Worten, wir müssen einen Aktionshaken finden.
Geh zurück zum content-single-product.php Datei, es gibt einen Haken namens woocommerce_single_product_summary Diese Funktion wird von sieben Funktionen verwendet, die jeweils unterschiedliche Daten über das Produkt ausgeben, nämlich:
 
der Titel
 
Das Rating
 
der Preis
 
der Auszug (d. h. die kurze Beschreibung)
 
die in den Warenkorb legen-Schaltfläche
 
Metadaten
 
Links teilen
 
Ich möchte meine Attribute im Abschnitt für Metadaten hinzufügen. Schauen wir uns also die Funktion an, die diese ausgibt.
Die Funktion befindet sich im wc_template_functions.php Datei, und es verwendet wc_get_template () eine andere Include-Datei aufrufen, woocommerce / templates / single / produkt / meta.php.
In dem meta.php Datei gibt es Code zum Ausgeben von Metadaten über das Produkt mit der woocommerce_product_meta_start Haken davor und die woocommerce_product_meta_end Haken Sie nach. Wir können also einen dieser beiden Haken verwenden, um unsere Produktattribute auszugeben. Lassen Sie uns die letzte verwenden, da dadurch die Attribute nach den Kategorien und Tags angezeigt werden.
Schreiben einer Funktion zur Ausgabe von Produktattributen
Duplizieren des bereits von WooCommerce bereitgestellten Codes
Um eine Liste von Taxonomie-Begriffen für unser Produkt auszugeben, können wir die von WooCommerce aufgerufene Funktion verwenden list_attributes (). Diese Funktion finden Sie im templates / single / produkt / tabs / zusätzliche-informationen.php Datei.
Fügen Sie in Ihrer Plugin-Datei Folgendes hinzu:
/ ** * Zeigt Produktattribute oben rechts auf der einzelnen Produktseite an. * * @param $ product * / Funktion tutsplus_list_attributes ($ product) global $ product; $ product-> get_attributes ();  add_action ('woocommerce_product_meta_end', 'tutsplus_list_attributes');
Beachten Sie, dass Sie keine Priorität verwenden müssen, da WooCommerce keine anderen Funktionen mit diesem Aktions-Hook verknüpft hat.
Aktualisieren Sie jetzt Ihre Produktseite:
Nun werden die Attribute angezeigt. Sie verwenden eine tab-artige Oberfläche mit dem Storefront-Design, da dies für den Standard festgelegt ist zusätzliche Information tab und das Ausgabe-HTML verwendet eine Tabelle, die das Standardlayout bereitstellt. 
Alternativer Ansatz ohne Tabelle
Diese Tabelle ist nicht ideal: Es wäre besser, eine Liste von Produktattributen zu haben, um mit der Liste der darüber liegenden Produktkategorien übereinzustimmen. Lass uns das tun.
WooCommerce speichert Attribute als benutzerdefinierte Taxonomien. Dem Slug, den Sie für jeden Ihrer Attributwerte erstellen, wird ein vorangestellt pa_ Suffix, wenn das Attribut in der Datenbank gespeichert ist. 
Es speichert diese Taxonomien jedoch nicht im wp_term_taxonomy Tisch und wp_terms Tabelle wie bei der Registrierung einer normalen benutzerdefinierten Taxonomie in WordPress. Stattdessen erstellt WooCommerce Tabellen für die Attribute, dh die Daten werden unterschiedlich gespeichert. Dies bedeutet, dass wir bei der Ausgabe dieser Liste einen umfassenderen Ansatz verwenden müssen, um auf das Label für jede Taxonomie zuzugreifen.
In deiner tutsplus_list_attributes () Funktion, entfernen Sie die beiden Zeilen innerhalb der Funktion. Ersetzen Sie sie durch diesen Code:
globales $ produkt; global $ post; $ attributes = $ product-> get_attributes (); if (! $ attributes) return;  foreach ($ attributes als $ attribute) // Liefert die Taxonomie. $ terms = wp_get_post_terms ($ product-> id, $ attribute ['name'], 'all'); $ taxonomy = $ terms [0] -> taxonomie; // Holen Sie sich das Taxonomieobjekt. $ taxonomy_object = get_taxonomy ($ taxonomy); // Hole die Attributbezeichnung. $ attribute_label = $ taxonomy_object-> labels-> name; // Zeigt die Beschriftung an, gefolgt von einer anklickbaren Liste von Begriffen. echo get_the_term_list ($ post-> ID, $ attribut ['name'], ')
'. $ attribute_label. ':', ',', '
'); 
Dieser Code bewirkt Folgendes:
 
Es definiert das Globale $ Produkt Variable (was ein Objekt unserer Funktion ist).
 
Es verwendet $ product-> get_attributes () um alle Attribute für dieses Produkt abzurufen.
 
Wenn es keine gibt, tut es nichts.
 
Wenn es Attribute gibt, öffnet sich ein für jeden Schleife für jeden von ihnen.
 
Um das Etikett abzurufen, verwendet es die wp_get_post_terms () und get_taxonomy () Funktionen zum Abrufen des Datenfelds zu dieser Taxonomie für diesen Beitrag.
 
Dann wird der Name (oder Etikette) der Taxonomie (oder des Attributs), gefolgt von einer Liste von Links zu den Archiven für jeden der Werte mit get_the_term_list ().
 
Die Attribute werden jetzt in einer Liste angezeigt:
Viel besser!
Dank: Isabel Castillo für den Code, um die Attributbezeichnung anzuzeigen. 
Zusammenfassung
Das Verschieben von Produktattributen auf der Produktseite erfordert ein wenig Arbeit, um sich in den WooCommerce-Quellcode zu vertiefen und die Vorlagendateien, Hooks und Funktionen zu identifizieren, die beim Anzeigen von Produktattributen eine Rolle spielen.
Durch das Finden des Filters, der steuert, welche Registerkarten ausgegeben werden, konnten wir das entfernen zusätzliche Information Registerkarte, auf der Attribute am unteren Bildschirmrand entfernt wurden. Durch das Hinzufügen einer neuen Funktion zu einem Haken oben auf der Seite konnten wir sie dort ausgeben, wo wir wollten.
Wenn Sie daran interessiert sind, andere WooCommerce-Funktionen in Ihre Website zu integrieren, prüfen Sie auch, was auf dem Marktplatz verfügbar ist.



		
			
	   
	




Code