WooCommerce hat die E-Commerce-Branche mit seiner bahnbrechenden Flexibilität und seinen vielfältigen Anpassungsmöglichkeiten im Sturm erobert. In der E-Commerce-Welt zählt es zu den führenden Anbietern und hält aktuell einen Marktanteil von 27 %.
Vorgefertigte Templates und Produktseiten erfüllen jedoch nicht die Bedürfnisse jedes Unternehmens. WooCommerce bietet zahlreiche Anpassungsmöglichkeiten.
Um erfolgreich zu sein, muss Ihr Shop die besten Personalisierungsmethoden anwenden. Ein wichtiger Bestandteil der Personalisierung sind Produktseiten und -vorlagen. Eine gut umgesetzte Personalisierungsstrategie kann Warenkorbabbrüche reduzieren.
Da die meisten Kunden Ihren Online-Shop besuchen, sollten Sie die Navigation und Anpassung von Produkten und Vorlagen vereinfachen, um den Erfolg zu gewährleisten.
Dieser Artikel zeigt Ihnen, wie Sie WooCommerce-Vorlagen anpassen, Produktvorlagen bearbeiten und Produktseiten individualisieren können.
Warum ist es für Shop-Betreiber wichtig, WooCommerce-Vorlagen anzupassen?
WooCommerce bietet unzählige Anpassungsmöglichkeiten. Sie können alles individualisieren, vom Checkout über Shopseiten, Kategorieseiten und Dankesseiten bis hin zu vielem mehr. Dadurch hebt sich Ihr Shop von der Konkurrenz ab. Um jedoch wirklich einzigartig zu sein, kann die Anpassung von WooCommerce-Vorlagen hilfreich sein.
Es ist unerlässlich, die Standardseiten Ihrer Website anzupassen, um sich optisch von der Konkurrenz abzuheben. Sie können auch die Standardvorlagen individualisieren, um Ihrem Unternehmen einen Wettbewerbsvorteil zu verschaffen.
Die von Ihnen verwendeten Templates lassen sich anpassen, um Ihren Onlineshop um zusätzliche Funktionen und Details zu erweitern. Mit diesen Features können Sie Ihren Kunden ein besseres Einkaufserlebnis bieten. Daher ist es wichtig, dass Sie Ihren E-Commerce-Shop stets aktuell halten, indem Sie sich eingehend mit der Bearbeitung von WooCommerce-Templates auseinandersetzen. Lesen Sie weiter, um mehr über die verschiedenen Möglichkeiten zur Bearbeitung von WooCommerce-Templates zu erfahren.
Lesen Sie: Wie aktualisiere ich meine Debitkarte in WooCommerce?
WooCommerce-Vorlagen mit PHP anpassen
Plugins und Code-Snippets ermöglichen es Ihnen, nahezu jeden Aspekt Ihrer Website zu bearbeiten. Mit WooCommerce können Sie Templates programmatisch bearbeiten.
Es gibt zwei Möglichkeiten, Vorlagen programmatisch anzupassen:
- Überschreiben von Vorlagen
- Mit Haken
Beide Methoden funktionieren, wählen Sie also die für Sie einfachste. Sie sollten die grundlegenden Unterschiede zwischen diesen Methoden verstehen, um entscheiden zu können, wann Sie welche anwenden.
Hooks vs. Überschreiben von Vorlagen
Mithilfe von Hooks lassen sich einfache Änderungen über Aktionen und Filter vornehmen. Durch das Überschreiben von Vorlagendateien können Sie komplexere Anpassungen durchführen.
Beachten Sie außerdem, dass eine Vorlagendatei nicht mit einem Hook überschrieben werden sollte, wenn dieser in einer bestimmten Vorlagendatei verwendet wird. Durch das Überschreiben der Vorlage werden die in dieser Datei verwendeten Hooks ersetzt und sind dann nicht mehr wirksam.
Wählen Sie die Methode, die Ihren Bedürfnissen am besten entspricht, nachdem Sie Ihre Bedürfnisse ermittelt haben.
Entdecken Sie: Die besten WooCommerce-Produkttabellen-Plugins
Modifizieren von WooCommerce-Vorlagen durch Überschreiben
Bei komplexen Anpassungen ist das Überschreiben der Vorlagen besser als die Verwendung von Hooks.
Das Bearbeiten der functions.php-Datei ist sehr ähnlich. Anstelle der Theme-Dateien müssen die Haupt-Template-Dateien von WooCommerce bearbeitet werden.
Klicken Sie auf Plugins > Plugin-Editor, wählen Sie WooCommerce aus dem Dropdown-Menü und anschließend Templates, um die Template-Dateien anzuzeigen.
Dieser Abschnitt enthält alle wichtigen Dateien, die Sie bearbeiten müssen, nämlich archive-product.php, content-product-cat.php und content-product.php. Es ist außerdem möglich, Template-Dateien an mehreren Stellen zu bearbeiten, beispielsweise im Warenkorb, im Checkout und in der E-Mail-Funktion.
Die WooCommerce-Vorlagendateien bieten zahlreiche Anpassungsmöglichkeiten. So können Sie sowohl Unterverzeichnisse als auch Ordner individuell gestalten.
Der nächste Schritt besteht darin, sich angepasste WooCommerce-Vorlagen anzusehen.
Fügen Sie Shortcodes zu WooCommerce-Vorlagen hinzu.
Shortcodes sind eine gängige Methode, um den WooCommerce-Code anzupassen. WordPress und WooCommerce bieten eine Reihe von Shortcodes zum Bearbeiten von Templates an.
Unten finden Sie ein Skript, das das WooCommerce-Dashboard „Mein Konto“ auf jeder Produktseite anzeigt. Fügen Sie es der Datei single.product.php hinzu und aktualisieren Sie diese.
| php if ( ! defined( 'ABSPATH' ) ) { exit; // Beenden, falls direkter Zugriff } get_header( 'shop' ); while ( have_posts() ) : the_post(); wc_get_template_part( 'content,' 'single-product' ); endwhile; // Ende der Schleife. do_action( 'woocommerce_sidebar' ); $t= ' $t .= do_shortcode(“[woocommerce_my_account]”); $t .=””; echo $t; get_footer( 'shop' ); |
Das Dashboard wird angezeigt, nachdem Sie die Produktseiten in der Vorschau angesehen haben.
Stellen Sie sicher, dass der Kunde weiß, dass er dies gekauft hat, bevor
WooCommerce-Vorlagen lassen sich auch so anpassen, dass treuen Kunden Rabatte angeboten werden. Auch hier kopieren Sie den Code und fügen ihn auf der Seite single.product.php ein.
| get_header( 'shop' ); while ( have_posts() ) : the_post(); wc_get_template_part( 'content', 'single-product' ); endwhile; // Ende der Schleife. $current_user = wp_get_current_user(); if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ): echo ''; endif; get_footer( 'shop' ); |
Kunden sehen die Checkout-Meldung, nachdem sie ein Produkt angesehen haben, das sie bereits gekauft haben.
Entdecken Sie: Magento vs. WooCommerce: Was ist die bessere Wahl im Jahr 2023?
Bearbeiten von WooCommerce-Vorlagen mithilfe von Hooks
Hooks sind auch hilfreich, um WooCommerce-Templates anzupassen, falls Sie die Template-Dateien nicht überschreiben möchten. Sie können Hooks als Aktionen oder Filter zu Ihrer Website hinzufügen, um deren Funktionalität schnell zu erweitern und einfache Änderungen vorzunehmen.
Zusätzlich können Sie die Vorlagen Ihres Shops über WooCommerce-Hooks bearbeiten. Diese Vorgehensweise empfiehlt sich jedoch nur für einfache Anpassungen. Für komplexere Änderungen sollten Sie die Vorlagen besser überschreiben.
Öffnen Sie Ihre functions.php-Datei im Menüpunkt Design > Theme-Editor und kopieren Sie den Code-Schnipsel mit Ihren Aktions- oder Filter-Hooks hinein.
Hier sind einige Beispiele für Hooks, die zum Bearbeiten von WooCommerce-Vorlagen zur Verfügung stehen.
Hinzufügen von Informationen zu einem einzelnen Produktbild
Wenn Sie oberhalb des Bildes zusätzliche Informationen zum Produkt anzeigen möchten, fügen Sie den folgenden Code in die functions.php ein.
| // Benutzerdefinierte Funktion hinzufügen function quadlayers_before_single_product() { echo ''; } // Füge die Aktion hinzu add_action( 'woocommerce_before_single_product', 'quadlayers_before_single_product', 11 ); |
Auf den Seiten einzelner Produkte wird diese Meldung angezeigt.
WooCommerce-Vorlage mit Plugins anpassen
Sie haben Schwierigkeiten mit der Programmierung? Kein Problem. Sie können WooCommerce-Vorlagen weiterhin mithilfe von Plugins anpassen. Da die Branche wächst, stehen Ihnen unzählige Plugins zur Verfügung, um Ihre Vorlagen individuell zu gestalten.
Hier kommt das effizienteste Plugin: Edit WooCommerce Templates. Es ist ein benutzerfreundliches, kostenloses Plugin, mit dem Sie die Vorlagen Ihres Themes anpassen können. Mit wenigen Klicks können Sie Vorlagen austauschen und jederzeit die Standardeinstellungen wiederherstellen.
Hier sind einige zusätzliche WooCommerce-Plugins, mit denen Sie Vorlagen anpassen und die Leistung Ihres Shops verbessern können.
- WooCommerce Custom Fields: Mit diesem Plugin können Benutzer individuelle Felder auf WooCommerce-Produktseiten, Checkout-Seiten und mehr erstellen.
- WooCommerce Customizer: Dieses Plugin wurde speziell für WooCommerce-Vorlagen entwickelt und bietet eine Vielzahl zusätzlicher Anpassungsmöglichkeiten für Ihren Shop.
- WooCommerce Einzelproduktseiten-Anpassung: Mit diesem Plugin können Sie das Erscheinungsbild der Einzelproduktseite in WooCommerce anpassen.
Wissenswertes: Wie richtet man WooCommerce Bookings ein?
WooCommerce-Produktseiten anpassen: Warum ist das so wichtig?
Die individuelle Gestaltung von WooCommerce-Produktseiten ist unerlässlich und sollte daher nicht vernachlässigt werden. Die Vorteile sind vielfältig. So lassen sich Kundenbedenken ausräumen, eine unverwechselbare Präsentation schaffen und die Kundenzufriedenheit steigern.
Hier einige entscheidende Vorteile der Personalisierung von Produktseiten:
Konversionsoptimierte Seiten
Eine individuell gestaltete Produktseite kann die Konversionsrate steigern. Zahlreiche Optionen, darunter Such- und Filterfunktionen, lassen sich implementieren. Dadurch finden und kaufen Kunden Produkte einfacher und mit weniger Hürden.
Gestalten Sie es attraktiver
Ziel der Personalisierung ist es häufig, Produktseiten so zu gestalten, dass sie Kunden ansprechen und begeistern. Das Interesse der Kunden lässt sich durch ansprechende Bilder, verlockende Produktbeschreibungen und ästhetisch ansprechende Elemente wecken.
Die Benutzerfreundlichkeit könnte verbessert werden
Achten Sie auf ein klares und intuitives Design, kurze Ladezeiten, einfache Navigation und ein optimales Nutzererlebnis. So steigern Sie Ihre Konversionsrate und gewinnen Stammkunden.
Wissenswertes: Die besten WooCommerce-Produkt-Add-ons
Möglichkeiten zur Anpassung von Produktseiten
Um die visuelle Attraktivität Ihres Shops auf dem neuesten Stand zu halten, müssen Sie Ihre Produktseiten anpassen. Hier sind drei wichtige Methoden, um Produktseiten erfolgreich zu gestalten:
- Verbessern Sie Ihre WooCommerce-Produktseiten mit Plugins
Mit WooCommerce können Sie ganz einfach einen Onlineshop erstellen. Verschiedene Plugins stehen zur Verfügung, um Ihren Shop zu erweitern, darunter auch solche, mit denen Sie Produktseiten individuell gestalten können.
Das Anpassen von Produktseiten mit WooCommerce-Plugins ist einfach:
Plugins
- WooCommerce Produkt-Add-ons: Mit diesem Plugin können Sie Checkboxen, Dropdown-Menüs und Textfelder zu Ihren Produktseiten hinzufügen.
- WooCommerce 360º Image: Mit diesem Plugin können Sie Bilder nach Belieben drehen.
- Produktvideo für WooCommerce: Mit diesem Plugin können Produktvideos hinzugefügt werden.
- Größentabelle für WooCommerce: Mit diesem Plugin wird das Hinzufügen von Größentabellen zu Ihren Produkten zum Kinderspiel.
- Produktempfehlungen: Mit diesem Plugin können Sie Ihrer Produktseite einen Empfehlungsbereich hinzufügen.
Siehe auch: Über 40 der besten WooCommerce-Plugins [kostenlos + kostenpflichtig]
- WooCommerce-Produktseiten mit CSS anpassen
Durch die Verwendung von CSS zur individuellen Gestaltung von WooCommerce-Produkten können Sie Ihren Onlineshop hervorheben und Ihren Kunden ein einzigartiges Einkaufserlebnis bieten. Um Ihre Produktseiten anzupassen, schreiben Sie einfach den entsprechenden CSS-Code.
Wenn Sie angemeldet sind, gehen Sie zu Darstellung → Anpassen.
CSS-Code für schwarzen CTA
Durch Hinzufügen dieses Codes zu „Zusätzliches CSS“ wird die Standardfarbe des Handlungsaufrufs (CTA) auf Schwarz geändert.
| button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a.button.alt { background-color: #1d1a1a; border-color: #333333; color: #ffffff; } |
CSS-Code für blauen CTA
Um Schwarz in Blau umzuwandeln, verwenden Sie außerdem den folgenden CSS-Code.
| button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a.button.alt { background-color: #4f5dd5; border-color: #333333; color: #ffffff; } |
- Fügen Sie benutzerdefinierten Code zu WooCommerce-Produktseiten hinzu
Wenn Sie über ein gutes technisches Verständnis verfügen, können Sie die Produktseitenanpassung bequem über benutzerdefinierten Code vornehmen.
Erfahren Sie: Warum FAQs für Ihren WooCommerce-Shop unerlässlich sind.
Schritt 1: Erstellen einer globalen Vorlage
Zunächst muss eine globale Vorlage erstellt werden, die für alle Produktseiten verwendet wird.
Beginnen Sie mit einem PHP-Kommentar, der den Namen der Vorlage am Anfang angibt.
Erstellen Sie eine template-custom-product.php-Datei und fügen Sie diese dem aktivierten Theme hinzu.
| <?php /*Template Name: Customize Product*/ ?> |
Diese Vorlage verwendet die Standard-Produktseite von WooCommerce. Hier ist der Code.
| php $params = array('posts_per_page' => 5, 'post_type' => 'product'); $wc_query = new WP_Query($params); ?> have_posts()) : ?> have_posts()) : $wc_query->the_post(); ?> <?php the_title(); ?> <?php endwhile; ?> <?php wp_reset_postdata(); ?> <?php else: ?> <p> <?php _e( ‘No Products’); ?> </p> <?php endif; ?> |
Es handelt sich um eine einfache Vorlage. Sie erfüllt zwar ihren Zweck, aber mit WooCommerce ist noch mehr möglich.
WooCommerce bietet verschiedene Funktionen zur individuellen Gestaltung Ihrer Produktseiten, die ein breites Spektrum an Informationen enthalten:
| the_permalink() – Zeigt die Produkt-URL an. the_content() – Zeigt die vollständige Produktbeschreibung an. the_excerpt() – Zeigt eine Kurzbeschreibung des Produkts an. the_ID() – Zeigt die Produkt-ID an. the_title() – Zeigt den Produktnamen an. the_post_thumbnail() – Zeigt das Produktbild an. |
Schritt 2: Fügen Sie Funktionen in der functions.php des aktivierten Themes hinzu
WooCommerce-Produktkategorien anzeigen
In den Kategorien ordnen Sie Ihre Produkte ein. Aktivieren Sie das Theme und fügen Sie diesen Code-Schnipsel in die functions.php-Datei ein, um die Kategorie eines Produkts festzulegen.
php if ( ! defined( 'ABSPATH' ) ) { exit; } global $product; ?> <div class=”product_meta”> <?php do_action( ‘woocommerce_product_meta_start’ ); ?> get_sku() || $product->is_type( 'variable' ) ) ) : ?> <span class=”sku_wrapper”><?php esc_html_e( ‘SKU:’, ‘woocommerce’ ); ?> <span class=”sku”><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( ‘N/A’, ‘woocommerce’ ); ?></span></span> <?php endif; ?> get_id(), ', ', '' ); ?> get_id(), ', ', '' ); ?> <?php do_action( ‘woocommerce_product_meta_end’ ); ?> </div> |
Miniaturansichten der Produktkategorien anzeigen
Für jede Produktkategorie ist ein Vorschaubild verfügbar. Wenn Sie Ihre individuelle Produktanzeige einrichten möchten, fügen Sie diesen Code in die template.php oder functions.php Ihres Themes ein.
| php function cwresponse_get_thumbnail(){ if(is_page(205)){ $args = array( 'tax_query' => array( array( 'taxonomy' => 'product_cat', 'field' => 'slug' ) ) ); $random_products = get_posts( $args ); foreach ( $random_products as $post ) : setup_postdata( $post ); ?> <div><a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail(); ?></a></div> php endforeach; wp_reset_postdata(); } } add_action('wp_footer', 'cwresponse_get_thumbnail'); |
Entsorgen Sie die Überschrift „Beschreibung“.
Bei Verwendung von WooCommerce deaktivieren Sie einfach das Beschreibungsfeld für jeden Produktreiter und bearbeiten Sie die functions.php-Datei, um den folgenden Code einzufügen.
| add_filter( 'woocommerce_product_description_heading', '__return_null' ); |
Produkttitel entfernen
Hier erfahren Sie, wie Sie den Titel in den WooCommerce-Einzelprodukt-Tabs entfernen: Fügen Sie diesen Code in die functions.php ein.
| remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title' ); |
Schritt 3: WooCommerce-Vorlagen ändern
Fügen Sie den unten stehenden Code in die Datei content-single-product.php oder in das Einzelproduktverzeichnis unter woocommerce/templates ein. Die Verwendung der functions.php-Datei ist empfehlenswert.
<div class="images"><?php if ( has_post_thumbnail() ) { $image_caption = get_post( get_post_thumbnail_id() )-> post_excerpt; $image_link = wp_get_attachment_url( get_post_thumbnail_id() ); $image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array( 'title' => get_the_title( get_post_thumbnail_id() ) ) ); $attachment_count = count( $product->get_gallery_attachment_ids() ); if ( $attachment_count > 0 ) { $gallery = '[product-gallery]'; } else { $gallery = ''; } echo apply_filters( 'woocommerce_single_product_image_html', sprintf( ' <a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%S" data-rel="prettyPhoto' . $gallery . '">%s</a> ', $image_link, $image_caption, $image ), $post->ID ); } else { echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%S" /> ', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID ); } ?><?php do_action( 'woocommerce_product_thumbnails' ); ?></div>Alternativ können Sie einfach CSS-Code schreiben.
.images { float: right! important; }
Endlich! Du hast es geschafft.
Mehr erfahren: Wie füge ich den Versand zu WooCommerce hinzu?
Abschluss
Durch die Erstellung einzigartiger und optisch ansprechender WooCommerce-Produktseiten und -Vorlagen wird das Einkaufserlebnis für die Kunden verbessert.
Durch die Verwendung von Überschreibungen, Hooks, Filtern und CSS-Anpassungen können Sie Ihre Produktseiten so gestalten, dass sie den Erwartungen Ihrer Kunden entsprechen und mit Ihrer Markenidentität übereinstimmen.
Optimieren Sie die mobile Darstellung Ihres WooCommerce-basierten Onlineshops und passen Sie ihn individuell an, um das Nutzererlebnis insgesamt zu verbessern. Beginnen Sie mit der Implementierung von Anpassungsmaßnahmen und maximieren Sie so den Wert Ihres Shops.
Benötigen Sie professionelle Unterstützung bei der Anpassung von WooCommerce? Kontaktieren Sie uns noch heute!
