Sind Sie auf eine Situation gestoßen, in der Sie ein Bild für jedes Ihrer WooCommerce-Tags benötigen? Glück für Sie, wir auch! Wir hatten eine Reihe von Produkten und eine Reihe von Kategorien, aber wir wollten Marken von den eigentlichen Kategorien trennen, also haben wir anstelle von Unterkategorien unter einem übergeordneten Element von „Marken“ Tags verwendet. Hunderte von Produkten später wollte unser Kunde auf jeder der Tag-Seiten ein Bild zeigen – insbesondere das Logo der Marke. Oh oh! Keine solche Option.
Wir könnten jedes einzelne Produkt durchgehen, sein Marken-Tag abrufen, eine Kategorie erstellen und es einer übergeordneten Kategorie von „Marken“ zuweisen, aber das scheint eine Menge zusätzlicher Arbeit zu sein. Dies gilt insbesondere, wenn man bedenkt, dass uns die Art und Weise gefallen hat, wie die Marken in einer Tag-Cloud im Front-End der Website angezeigt wurden.
Lösung:das Taxonomy Images Plugin
Das Plugin für Taxonomiebilder arbeitet mit benutzerdefinierten Taxonomien und weist eine GUI-Option zum Anhängen von Bildern an diese Taxonomie zu. In diesem Fall ist unsere Taxonomie ein Produkt-Tag. Die Implementierung erfordert zwei Schritte:Installieren/Konfigurieren des Plugins und Hochladen von Bildern sowie Einrichten Ihrer WooCommerce-Tag-Vorlage.
Plugin einrichten und Bilder hochladen
- Melden Sie sich bei Ihrem WordPress-Adminbereich an und wählen Sie Plugins> Neu hinzufügen
- Suchen Sie nach dem Plugin „Taxonomy Images“ und installieren Sie es. Achten Sie darauf, es nach der Installation zu aktivieren!
- Gehen Sie zu Einstellungen> Taxnomiebilder
- Aktivieren Sie das Kontrollkästchen "Produkt-Tags" und wählen Sie "Änderungen speichern"
Sie sollten jetzt die Option zum Hochladen eines Bildes neben jedem einzelnen Produkt-Tag unter Produkte> Tags sehen. Wir sind schon auf halbem Weg! Fahren Sie fort und laden Sie ein Bild für jedes Tag hoch, wie Sie normalerweise Bilder in WordPress hochladen würden – achten Sie darauf, nach dem Hochladen die Schaltfläche „Mit tag_name verknüpfen“ auszuwählen (wobei tag_name Ihr tatsächlicher Tag-Name ist). Aktualisieren Sie Ihr Tag und Sie können fast loslegen!
Ihre WooCommerce-Vorlage konfigurieren
Jetzt müssen wir WooCommerce mitteilen, dass Sie das Bild auf der Single-Tag-Seite anzeigen möchten. Dies ist etwas komplizierter und erfordert die Bearbeitung von Code. Sie benötigen außerdem einen FTP-Zugriff auf Ihre WordPress-Installation, um einige Vorlagendateien anzupassen.
Beginnen Sie mit der Einrichtung Ihrer Vorlagendatei:
- Melden Sie sich über FTP an und navigieren Sie zu Ihrem WordPress-Theme-Verzeichnis (wp-content/themes/{your_theme_name})
- Erstellen Sie einen neuen Ordner namens woocommerce, falls er noch nicht existiert (dieser Ordner enthält alle Vorlagenüberschreibungen)
- Kopieren Sie die Tag-Seitenvorlage in diesen Ordner. Die Tag-Seitenvorlage befindet sich unter wp-content/plugins/woocommerce/templates/taxonomy-product_tag.php . Aber warte! Hier gibt es einen Trick, er zieht eigentlich nur alle Inhalte aus wp-content/plugins/woocommerce/templates/archive-product.php , obwohl wir eigentlich nur die Tags überschreiben wollen… nicht alle Produktseiten. Kopieren Sie dazu die archive-product.php Datei von wp-content/plugins/woocommerce/templates in wp-content/themes/{your_theme_name}/woocommerce Benennen Sie es dann in taxonomy-product_tag.php um
Wir haben jetzt eine Override-Vorlagendatei eingerichtet, die nur Produkt-Tags überschreibt, aber alle benötigten Inhalte enthält. Wir müssen jetzt die Vorlagendatei bearbeiten, um Code einzufügen, der Ihre Produkt-Tag-Bilder zeigt. So geht's:
Öffne deine neue Vorlagendatei (wp-content/themes/{your_theme_name}/woocommerce/taxonomy-product_tag.php ) mit Ihrem bevorzugten Texteditor.
Direkt über der Zeile, die so aussieht:
<?php do_action( 'woocommerce_archive_description' ); ?>
Folgendes einfügen:
<aside id="tag-brand-logo"><?php print apply_filters( 'taxonomy-images-queried-term-image', '' ); ?></aside>
Speichern Sie die Datei und gehen Sie zu einer Ihrer einzelnen Produkt-Tag-Seiten (stellen Sie sicher, dass Sie tatsächlich ein Bild auf diese Seite hochgeladen haben!) und genießen Sie den Ruhm, WooCommerce gehackt zu haben, um Ihre Bilder dorthin zu bringen, wo Sie sie haben wollten.
Sie können Ihr Bild auch mit etwas CSS wie diesem gestalten (zum Beispiel):
#tag-brand-logo{ float:right !important; margin-top:-25px; } Fanden Sie diesen Beitrag hilfreich? Möchten Sie weitere Expertenratschläge in den Blogs Ihres Webhosts und direkt von Ihrem Hosting-Tech-Support-Team? Hosten Sie Ihre WordPress-Website mit Websavers, wo der Support über das reine Hosten hinausgeht!