Heute hat Woocommerce die E-Commerce-Branche mit seiner bahnbrechenden Flexibilität und Anpassungsmöglichkeiten im Sturm erobert. In der E-Commerce-Welt nimmt es einen hohen Stellenwert ein. Derzeit hält es 27 % des E-Commerce-Marktanteils.
Aber vorgefertigte Vorlagen und Produktseiten erfüllen nicht die Anforderungen jedes Unternehmens. Es gibt viele Anpassungsmöglichkeiten in WooCommerce.
Um eine gute Leistung zu erzielen, muss Ihr Shop die besten Anpassungspraktiken befolgen. Eine Schlüsselkomponente der Anpassung liegt in Produktseiten und Vorlagen. Eine gut implementierte Anpassungsstrategie kann abgebrochene Warenkörbe reduzieren.
Da die meisten Kunden Ihren Online-Shop besuchen, sollten Sie die Navigation und Anpassung von Produkten und Vorlagen erleichtern, um den Erfolg sicherzustellen.
In diesem Artikel erfahren Sie, wie Sie WooCommerce-Vorlagen anpassen, Produktvorlagen bearbeiten und Produktseiten anpassen.
Warum ist es für Ladenbesitzer wichtig, WooCommerce-Vorlagen anzupassen?
WooCommerce bietet unzählige Anpassungsoptionen. Sie können alles anpassen, von der Kasse bis hin zu Shop-Seiten, Kategorieseiten, Danke-Seiten usw. Dies hilft Ihrem Geschäft, sich von der Masse abzuheben, aber um wirklich unverwechselbar zu sein, kann das Anpassen von WooCommerce-Vorlagen hilfreich sein.
Es ist wichtig, die Standardseiten Ihrer Website so zu bearbeiten, dass sie ein anderes Erscheinungsbild als Ihre Konkurrenz haben. Sie können auch die Standardvorlagen anpassen, um Ihrem Unternehmen einen Vorteil zu verschaffen.
Die Vorlagen, die Sie verwenden, können angepasst werden, um Ihrem Online-Shop Funktionen und Details hinzuzufügen. Mit diesen Funktionen können Sie Käufern ein besseres Kundenerlebnis bieten. Daher müssen Sie Ihren E-Commerce-Shop auf dem neuesten Stand halten, indem Sie sich eingehend mit der Bearbeitung von WooCommerce-Vorlagen befassen. Lesen Sie weiter, um zu erfahren, wie Sie WooCommerce-Vorlagen bearbeiten können.
Lesen: Wie aktualisiere ich meine Debitkarte auf WooCommerce?
Anpassen von WooCommerce-Vorlagen mit PHP
Plugins und Code-Snippets ermöglichen es Ihnen, fast jeden Aspekt Ihrer Website zu bearbeiten. Mit WooCommerce können Sie Vorlagen programmgesteuert bearbeiten.
Im Folgenden finden Sie zwei Möglichkeiten, Vorlagen programmgesteuert anzupassen:
- Überschreiben von Vorlagen
- Mit Haken
Beide Methoden funktionieren, also wählen Sie diejenige, die für Sie am einfachsten ist. Sie sollten die Hauptunterschiede zwischen diesen Methoden verstehen, um zu bestimmen, wann sie verwendet werden sollten.
Hooks vs. Überschreiben von Vorlagen
Mit Hooks können einfache Modifikationen über Aktionen und Filter vorgenommen werden. Durch das Überschreiben von Vorlagendateien können Sie komplexere Anpassungen vornehmen.
Beachten Sie außerdem, dass Sie eine Vorlagendatei nicht mit einem Hook überschreiben sollten, wenn sie in einer bestimmten Vorlagendatei verwendet wird. Das Überschreiben der Vorlage führt dazu, dass die in dieser Datei verwendeten Hooks ersetzt werden und nicht mehr wirksam sind.
Wählen Sie die Methode aus, die Ihren Anforderungen entspricht, nachdem Sie Ihre Bedürfnisse herausgefunden haben.
Ändern von WooCommerce-Vorlagen durch Überschreiben
Wenn Sie komplexe Anpassungen vornehmen, ist es besser, Ihre Vorlagen zu überschreiben, als Hooks zu verwenden.
Ähnlich verhält es sich mit der Bearbeitung functions.php. Die Haupt-WooCommerce-Vorlagendateien müssen anstelle der Theme-Dateien bearbeitet werden.
Klicken Sie auf Plugins > Plugin-Editor, wählen Sie WooCommerce aus dem Dropdown-Menü und wählen Sie Vorlagen aus, um die Vorlagendateien 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 auch möglich, Vorlagendateien an mehreren Stellen zu bearbeiten, z. B. im Warenkorb, an der Kasse und in der E-Mail.
Die WooCommerce-Vorlagendateien enthalten viele Dinge, die Sie ändern können. Auf diese Weise können Sie sowohl die Unterverzeichnisse als auch die Ordner anpassen.
Der nächste Schritt besteht darin, benutzerdefinierte WooCommerce-Vorlagen zu sehen.
Fügen Sie Shortcodes zu WooCommerce-Vorlagen hinzu.
Shortcodes sind eine gängige Methode, um WooCommerce-Code anzupassen. Für die Bearbeitung von Vorlagen bieten Ihnen WordPress und WooCommerce eine Reihe von Shortcodes.
Nachfolgend finden Sie ein Skript, das das Dashboard "Mein Konto" von WooCommerce auf jeder Produktseite anzeigt. Fügen Sie es der single-product.php Datei hinzu und aktualisieren Sie es.
| <?php if ( ! defined( ‘ABSPATH’ ) ) { exit; // Exit if accessed directly } get_header( ‘shop’ ); while ( have_posts() ) : the_post(); wc_get_template_part( ‘content,’ ‘single-product’ ); endwhile; // end of the loop. do_action( ‘woocommerce_sidebar’ ); $t= ‘<div id=”myacc”><h4>My Account</h4>’; $t.= do_shortcode(“[woocommerce_my_account]”); $t.=”</div>”; echo $t; get_footer( ‘shop’ ); |
Das Dashboard wird angezeigt, nachdem Sie eine Vorschau der Produktseiten angezeigt haben.
Stellen Sie sicher, dass der Kunde weiß, dass er dies zuvor gekauft hat
WooCommerce-Vorlagen können auch geändert werden, um treuen Kunden Rabatte anzubieten. Kopieren Sie auch hier den Code und fügen Sie ihn auf der single-product.php Seite ein.
| get_header( ‘shop’ ); while ( have_posts() ) : the_post(); wc_get_template_part( ‘content’, ‘single-product’ ); endwhile; // end of the loop. $current_user = wp_get_current_user(); if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ): echo ‘<div class=”user-bought”>♥ Hey ‘ . $current_user->first_name . ‘, you\’ve purchased this before. Buy again using this coupon: <b>PURCHASE_AGAIN_21</b></div>’; endif; get_footer( ‘shop’ ); |
Kunden sehen die Checkout-Nachricht, nachdem sie ein Produkt angesehen haben, das sie bereits gekauft haben.
Entdecken: Magento vs. WooCommerce: Was ist die bessere Wahl im Jahr 2023?
Bearbeiten von WooCommerce-Vorlagen mit Hooks
Hooks sind auch hilfreich beim Anpassen von WooCommerce-Vorlagen, wenn das Überschreiben von Vorlagendateien nicht Ihr Ding ist. Sie können Hooks als Aktionen oder Filter zu Ihrer Website hinzufügen, um die Funktionalität schnell zu erweitern und einfache Änderungen vorzunehmen.
Darüber hinaus können Sie die Vorlagen Ihres Shops über WooCommerce-Hooks bearbeiten. Dieser Ansatz wird nur für einfache Anpassungen empfohlen. Es ist besser, Vorlagen für komplexe Änderungen zu überschreiben.
Öffnen Sie Ihre functions.php Datei im Design-Editor für Darstellung >, kopieren Sie den Codeausschnitt und fügen Sie ihn mit Ihren Aktions- oder Filter-Hooks ein.
Hier sind einige Beispiele für Hooks, die für die Bearbeitung von WooCommerce-Vorlagen verfügbar sind.
Hinzufügen von Informationen zu einem einzelnen Produktbild
Wenn Sie zusätzliche Informationen über das Produkt über dem Bild anzeigen möchten, fügen Sie den folgenden Code in functions.php ein.
| // Add custom function function quadlayers_before_single_product() { echo ‘<h2>Everything is 25% off for this week!</h2>’; } // Add the action add_action( ‘woocommerce_before_single_product’, ‘quadlayers_before_single_product’, 11 ); |
Auf einzelnen Produktseiten wird diese Meldung angezeigt.
Anpassen der WooCommerce-Vorlage mit Plugins
Kämpfen Sie mit Codierungsaspekten? Kein Problem. Sie können WooCommerce-Vorlagen immer noch mit Plugins anpassen. Da die Branche wächst, gibt es endlose Plugins, mit denen Sie Ihre Vorlagen anpassen können.
Hier kommt das effizienteste Plugin: Edit WooCommerce Templates. Es ist ein einfach zu bedienendes kostenloses Plugin, mit dem Sie die Vorlagen Ihres Themas anpassen können. Mit wenigen Klicks können Sie jederzeit Vorlagen austauschen und Standardeinstellungen wiederherstellen.
Hier sind einige der zusätzlichen WooCommerce-Plugins , mit denen Sie Vorlagen anpassen und die Leistung Ihres Shops verbessern können.
- Benutzerdefinierte WooCommerce-Felder: Mit diesem Plugin können Benutzer eindeutige Felder auf WooCommerce-Produktseiten, Checkout-Seiten und mehr erstellen.
- WooCommerce Customizer: Dieses Plugin ist speziell für WooCommerce-Vorlagen gedacht und bietet eine Vielzahl zusätzlicher Anpassungsoptionen für Ihren Shop.
- WooCommerce Single Product Page Customizer: Mit diesem Plugin können Sie das Erscheinungsbild der einzelnen Produktseite in WooCommerce ändern.
Wissen: Wie richte ich WooCommerce-Buchungen ein?
Anpassen von WooCommerce-Produktseiten: Warum ist es wichtig?
Das Anpassen von WooCommerce-Produktseiten ist von entscheidender Bedeutung, damit Sie nichts verpassen können. Die Vorteile und Vorteile der Anpassung von WooCommerce-Produktseiten sind endlos. Damit ist es möglich, Kundenbedenken auszuräumen, eine unverwechselbare Präsentation zu etablieren und die Kundenzufriedenheit zu steigern.
Hier sind einige entscheidende Vorteile der Anpassung auf Produktseiten:
Conversion-optimierte Seiten
Eine angepasste Produktseite kann die Conversion-Raten erhöhen. Es können viele Optionen implementiert werden, einschließlich Such- und Filteroptionen. Daher werden Kunden Produkte mit weniger Reibungspunkten leichter finden und kaufen.
Machen Sie es attraktiver
Das Ziel der Anpassung besteht häufig darin, Produktseiten zu entwerfen und zu layouten, die Kunden ansprechen und ansprechen. Das Kundeninteresse kann durch ansprechende Bilder, verlockende Produktbeschreibungen und ästhetisch ansprechende Elemente geweckt werden.
UX könnte verbessert werden
Stellen Sie sicher, dass Ihre Designentscheidungen klar und intuitiv sind, die Ladegeschwindigkeiten schnell sind, die Navigation einfach ist und Ihre Kunden ein großartiges Erlebnis haben. Dies wird die Conversions steigern und Sie zu Stammkunden bringen.
Wissen: Die besten WooCommerce-Produkt-Add-Ons
Möglichkeiten zum Anpassen von Produktseiten
Um mit der visuellen Attraktivität Ihres Shops auf dem Laufenden zu bleiben, müssen Sie Ihre Produktseiten anpassen. Hier sind drei wichtige Methoden, um Produktseiten erfolgreich anzupassen:
- Erweitern Sie WooCommerce-Produktseiten mit Plugins
Mit WooCommerce können Sie ganz einfach einen Online-Shop erstellen. Es stehen verschiedene Plugins zur Verfügung, um Ihren Shop zu verbessern, einschließlich solcher, die Produktseiten anpassen.
Das Anpassen von Produktseiten mit WooCommerce-Plugins ist einfach:
Plugins
- WooCommerce-Produkt-Add-ons: Mit diesem Plugin können Sie Kontrollkästchen, Dropdowns und Textfelder zu Ihren Produktseiten hinzufügen.
- WooCommerce 360º Bild: Mit diesem Plugin können Sie Bilder nach Ihren Wünschen drehen.
- Produktvideo für WooCommerce: Das Plugin ermöglicht das Hinzufügen von Produktvideos.
- Größentabelle für WooCommerce: Dieses Plugin macht das Hinzufügen von Größentabellen zu Ihren Produkten einfach.
- Produktempfehlungen: Mit diesem Plugin können Sie Ihrer Produktseite einen Empfehlungsabschnitt hinzufügen.
Verwandt: Die 40+ besten WooCommerce-Plugins [Kostenlos + Kostenpflichtig]
- Anpassen von WooCommerce-Produktseiten mit CSS
Die Verwendung von CSS zum Anpassen von WooCommerce-Produkten kann Ihren Online-Shop hervorheben und den Kunden ein einzigartiges Erlebnis bieten. Um Ihre Produktseiten zu ändern, schreiben Sie den CSS-Code.
Wenn Sie angemeldet sind, gehen Sie zu Darstellung → Anpassen.
CSS-Code für schwarzen CTA
Wenn Sie diesen Code zu Zusätzliches CSS hinzufügen, wird die Standardfarbe des CTA in 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 technisches Verständnis verfügen, können Sie die Anpassung der Produktseite bequem über benutzerdefinierten Code implementieren.
Erfahren Sie: Warum sind FAQs für Ihren WooCommerce-Shop unerlässlich?
Schritt 1: Erstellen einer globalen Vorlage
Zunächst ist es notwendig, eine globale Vorlage zu erstellen, die für alle Produktseiten verwendet wird.
Beginnen Sie mit einem PHP-Kommentar, der den Namen des Templates oben angibt.
Erstellen Sie eine template-custom-product.php Datei und fügen Sie sie in das aktivierte Thema ein.
| <?php /*Template Name: Customize Product*/ ?> |
Diese Vorlage verwendet die WooCommerce-Standardproduktseite. Hier ist der Code.
| <?php $params = array(‘posts_per_page’ => 5, ‘post_type’ => ‘product’); $wc_query = new WP_Query($params); ?> <?php if ($wc_query->have_posts()) : ?> <?php while ($wc_query->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 ist eine einfache Vorlage. Obwohl es den Zweck erfüllt, können Sie mit WooCommerce mehr tun.
WooCommerce bietet mehrere Funktionen zum Anpassen Ihrer Produktanzeigeseiten, die eine breite Palette von Informationen enthalten:
| the_permalink() – Zeigt die Produkt-URL an. the_content() – Zeigt die vollständige Beschreibung des Produkts an. the_excerpt() – Zeigt eine kurze Beschreibung des Produkts an. the_ID() – Zeigt die ID des Produkts an. the_title() – Zeigt den Namen des Produkts an. the_post_thumbnail() – Zeigt das Produktbild an. |
Schritt 2: Fügen Sie Funktionen in der functions.php des aktivierten Themes hinzu
Kategorien von WooCommerce-Produkten anzeigen
In den Kategorien kategorisieren Sie Ihre Produkte. Aktivieren Sie das Theme und importieren Sie dieses Snippet in die functions.php Datei, um die Kategorie eines Produkts anzugeben.
<?php if ( ! defined( ‘ABSPATH’ ) ) { exit; } global $product; ?> <div class=”product_meta”> <?php do_action( ‘woocommerce_product_meta_start’ ); ?> <?php if ( wc_product_sku_enabled() && ( $product->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; ?> <?php echo wc_get_product_category_list( $product->get_id(), ‘, ‘, ‘<span class=”posted_in”>’ . _n( ‘Category:’, ‘Categories:’, count( $product->get_category_ids() ), ‘woocommerce’ ) . ‘ ‘, ‘</span>’ ); ?> <?php echo wc_get_product_tag_list( $product->get_id(), ‘, ‘, ‘<span class=”tagged_as”>’ . _n( ‘Tag:’, ‘Tags:’, count( $product->get_tag_ids() ), ‘woocommerce’ ) . ‘ ‘, ‘</span>’ ); ?> <?php do_action( ‘woocommerce_product_meta_end’ ); ?> </div> |
Miniaturansichten von Produktkategorien anzeigen
Für jede Produktkategorie steht ein Thumbnail zur Verfügung. Wenn Sie bereit sind, Ihre benutzerdefinierte Produktanzeige einzurichten, fügen Sie diesen Code dem template.php oder functions.php Ihres Themes hinzu.
| <?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 Beschreibungsüberschrift.
Wenn Sie Woocommerce verwenden, deaktivieren Sie einfach das Beschreibungsfeld für jede Produktregisterkarte und bearbeiten Sie die functions.php Datei so, dass sie den folgenden Code enthält.
| add_filter( 'woocommerce_product_description_heading', '__return_null'); |
Produkttitel entfernen
Hier erfahren Sie, wie Sie den Titel in Woocommerce-Registerkarten für einzelne Produkte entfernen können: Geben Sie diesen Code in functions.php ein.
| remove_action( 'woocommerce_single_product_summary', "woocommerce_template_single_title"); |
Schritt 3: WooCommerce-Vorlagen ändern
Fügen Sie den folgenden Code in die content-single-product.php Datei oder das einzelne Produktverzeichnis unter woocommerce/templates ein. Sie sind besser dran, wenn Sie functions.php verwenden.
| <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 auch einfach CSS-Code schreiben.
.images { float: right! important; }
Endlich! Sie sind fertig.
Mehr erfahren: Wie füge ich den Versand zu WooCommerce hinzu?
Schlussfolgerung
Das Erstellen einzigartiger und optisch ansprechender WooCommerce-Produktseiten und -Vorlagen verbessert das Einkaufserlebnis für Kunden.
Durch die Verwendung von Überschreibungen, Hooks, Filtern und CSS-Anpassungen können Sie Ihre Produktseiten anpassen, um die Erwartungen Ihrer Kunden zu erfüllen und sich an Ihrer Markenidentität auszurichten.
Optimieren Sie die mobile Reaktionsfähigkeit Ihres WooCommerce-basierten Online-Shops und passen Sie sie an, um die allgemeine Benutzererfahrung zu verbessern. Beginnen Sie mit der Implementierung von Anpassungspraktiken und stellen Sie Ihren Shop so ein, dass er den besten Wert erzielt.
Auf der Suche nach professioneller Hilfe bei der Anpassung von WooCommerce? Kontaktieren Sie uns noch heute!
