So fügen Sie WooCommerce-verwandte Produkte hinzu: 3 Methoden

Suchen Sie nach Möglichkeiten, Ihre Produktkonversionen zu verbessern? Das Hinzufügen eines Abschnitts mit benutzerdefinierten verwandten Produkten für Ihren Online-Shop kann eine großartige Möglichkeit sein, Ihre Kunden dazu zu bringen, mehr Ihrer Artikel zu kaufen. Um Ihnen dabei zu helfen, haben wir Ihnen unseren Leitfaden zum Hinzufügen von WooCommerce-bezogenen Produkten zusammengestellt.

Das Anzeigen ähnlicher Produkte kann eine großartige Möglichkeit sein, Ihre Conversions zu verbessern. Wenn Sie Ihren Kunden das richtige Produktsortiment präsentieren, wird dies sicherlich Ihren Umsatz steigern. Aber bevor wir uns damit befassen, schauen wir uns kurz an, warum Sie den Abschnitt "Verwandte Produkte" benötigen.

Warum Abschnitte für verwandte Produkte in WooCommerce verwenden?

Cross-Selling ist ein wichtiger Bestandteil der Verbesserung Ihrer Konversionsraten. Indem Sie Kunden Optionen zum Kauf ähnlicher Produkte anbieten, können Sie sie dazu ermutigen, den Kauf weiterer Produkte für den Mehrwert in Betracht zu ziehen. In ähnlicher Weise können Sie auch Cross-Sells verwenden, um Produkte zu bewerben, die Sie zusammen gekauft sehen. Wenn Sie Ihre Einkäufe gut verfolgen können, können Sie jederzeit bestimmte Produkte zu Ihrer Cross-Selling-Liste hinzufügen, um mehr Gewinn zu erzielen.

Diese Methode selbst ist in großen Online-Geschäften sehr beliebt. Auf Amazon können Sie beispielsweise Cross-Selling-Angebote in Abschnitten mit den Bezeichnungen „ Häufig zusammen gekauft“ , „ Kunden kauften auch“ oder „ Produkte ähnlicher Marken“ anbieten.

Wenn Sie also Ihren Umsatz steigern möchten, empfehlen wir Ihnen, den Abschnitt WooCommerce-bezogene Produkte hinzuzufügen und anzupassen. Nachdem Sie nun eine Vorstellung von ihrer Bedeutung haben, sehen wir uns an, wie wir sie zu Ihrer E-Commerce-Website hinzufügen können.

So fügen Sie WooCommerce-verwandte Produkte hinzu

Standardmäßig können Sie mit WooCommerce drei verschiedene Arten verwandter Produkte anpassen. Diese Optionen sind:

• Up-Sells : Produkte, die beim Anzeigen der Produktseite angezeigt werden.
• Cross-Sells : Produkte, die beim Anzeigen der Warenkorbseite angezeigt werden.
• Verwandte Produkte: Produkte, die basierend auf Produkt-Tags und Kategorien automatisch auf der Produktseite angezeigt werden.

Während Sie manuell hinzufügen können, welche Produkte in den Up-Sells und Cross-Sells für jeden WooCommerce angezeigt werden sollen, können Sie Abschnitte für verwandte Produkte nur konfigurieren, indem Sie Ihre Tags und Kategorien korrekt festlegen.

Insgesamt gibt es drei Hauptwege , um die verwandten Produkte in WooCommerce hinzuzufügen. Sie sind:

• Aus dem WooCommerce-Dashboard
• Verwenden eines Plugins
• Programmatisch

Hinweis: Stellen Sie sicher, dass Sie eines der kompatiblen WooCommerce-Designs installiert haben, und richten Sie WooCommerce ordnungsgemäß auf Ihrer Website ein, um unnötige Probleme im Prozess zu vermeiden.

Konfigurieren Sie WooCommerce-bezogene Produkte im WooCommerce-Dashboard

Um Ihre Up-Sells und Cross-Sells für ein bestimmtes Produkt einzurichten, gehen Sie in Ihrem WordPress-Admin-Dashboard zu Produkte > Alle Produkte . Klicken Sie dann auf die Schaltfläche „ Bearbeiten “ der jeweiligen Produkte, für die Sie Up-Sells und Cross-Sells hinzufügen möchten.

Scrollen Sie als Nächstes nach unten und klicken Sie unter Produktdaten auf Verknüpfte Produkte. Führen Sie nun alle Produkte auf, die als verwandte Produkte für das jeweilige Produkt angezeigt werden sollen. Sie können sowohl Up-Sells als auch Cross-Sells umfassen.

Aktualisieren Sie schließlich das Produkt.

Wenn Sie das jeweilige Produkt auf Ihrer Website in der Vorschau anzeigen, können Sie die verknüpften Produkte im Frontend Ihrer Website sehen.

In ähnlicher Weise können Sie auch die Cross-Selling-bezogenen Produkte sehen, wenn Sie die Warenkorbseite in der Vorschau anzeigen.

Die WooCommerce-bezogenen Produkte unterscheiden sich jedoch erheblich von dem Abschnitt „ Das könnte Ihnen gefallen“ , den Ihnen die Cross-Sells und Upsells bieten. Standardmäßig wählt WooCommerce mithilfe der Tags und Kategorien zufällig Produkte aus, die in den Abschnitten „Das könnte Ihnen gefallen“ angezeigt werden sollen. Diese Option kann nicht mit den Standardoptionen von WooCommerce konfiguriert werden.

Sie können diese verwandten Produkte nur anpassen, indem Sie entweder Plugins für WooCommerce-bezogene Produkte oder programmgesteuert WooCommerce-Hooks verwenden.

Wir werden in diesem Handbuch weiter besprechen, wie man beides macht. Wenn Sie also mehr darüber erfahren möchten, wie Sie Ihre WooCommerce-bezogenen Produkte anpassen können, empfehlen wir Ihnen, weiterzulesen. Beginnen wir mit der Plugin-Methode, da sie anfängerfreundlicher ist.

So fügen Sie WooCommerce-bezogene Produkte mit einem Plugin hinzu

Die Verwendung eines Plugins ist eine der einfachsten Möglichkeiten, die zugehörigen Produkte hinzuzufügen und anzupassen. Diese Plugins wurden speziell entwickelt, um Ihnen bei der manuellen Auswahl der Produkte zu helfen, die Sie zu Ihren WooCommerce-bezogenen Produktabschnitten hinzufügen möchten.

Es gibt eine Reihe von Plugins in WordPress mit verschiedenen Funktionen. Mit einigen von ihnen können Sie anpassbare verwandte Abschnitte hinzufügen, die Sie zu jedem Teil Ihrer Website hinzufügen können. Während andere arbeiten, indem sie Ihnen vollständig anpassbare Slider und Banner zur Verfügung stellen.

Natürlich hängt die Option zur Auswahl Ihres Plugins von Ihnen ab. Aber für die heutige Demo verwenden wir das Custom Related Products for WooCommerce-Plugin von Scott Nelle. Dieses Plugin funktioniert durch die einfache Methode, mit der Sie Produkte angeben können, die für die verwandten Produkte aller Produkte hinzugefügt werden sollen, die Sie möchten.

Um das Plugin verwenden zu können, müssen Sie es jedoch zuerst installieren und aktivieren.

1. Installieren und aktivieren Sie das Plugin

Öffnen Sie Ihr WP-Admin-Dashboard und klicken Sie zum Starten auf Plugins > Neu hinzufügen. Verwenden Sie dann die Suchleiste oben rechts, um nach benutzerdefinierten verwandten Produkten für WooCommerce zu suchen. Klicken Sie anschließend auf der Registerkarte des Plugins auf Jetzt installieren und aktivieren Sie es, nachdem die Installation abgeschlossen ist. Jetzt sollten Sie damit fertig sein, das Plugin zu aktivieren und zu installieren.

Wenn Sie ein Plugin verwenden möchten, das nicht im WordPress-Repository enthalten ist, müssen Sie es manuell installieren. Wir haben eine detaillierte Anleitung zur manuellen Installation von WordPress, wenn Sie weitere Informationen dazu benötigen.

2. Fügen Sie verwandte Produkte über die Produktseite hinzu

Das Plugin selbst funktioniert, indem es Ihnen ermöglicht, jedem spezifischen Produkt einen Abschnitt für verwandte Produkte hinzuzufügen. Sie können dies tun, indem Sie eines Ihrer WooCommerce-Produkte öffnen und es unter Produktdaten angeben. Wenn Sie keine Produkte zum Abschnitt „Verwandte Produkte“ hinzufügen, greift das Plugin auf das standardmäßige WooCommerce-Verhalten zurück, bei dem WooCommerce-verwandte Produkte mithilfe von Tags zufällig ausgewählt werden.

Öffnen Sie also noch einmal Produkte > Alle Produkte in Ihrem WP Admin Dashboard und klicken Sie für das Produkt, dem Sie die zugehörigen Produkte hinzufügen möchten, auf Bearbeiten . Dies ist der gleiche wie der vorherige Ansatz aus dem WooCommerce-Dashboard.

Scrollen Sie erneut unter Produktdaten nach unten und klicken Sie auf Verknüpfte Produkte . Jetzt sollten Sie ein neues Feld mit der Bezeichnung Verwandte Produkte sehen. Jetzt müssen Sie nur noch die Namen der Produkte manuell eingeben, die Sie als zugehöriges Produkt für das spezifische Produkt hinzufügen möchten.

Aktualisieren Sie das Produkt und Sie können die Änderungen auf Ihrer Produktseite sehen:

Fügen Sie WooCommerce-bezogene Produkte programmgesteuert hinzu

Wenn Sie alternativ kein WooCommerce-Plug-in zum Verwalten und Anpassen von WooCommerce-bezogenen Produkten verwenden möchten, können Sie diese auch mithilfe eines Code-Snippets hinzufügen. Dazu müssen Sie der Datei functions.php Ihres Themes ein paar Codezeilen hinzufügen. Diese Methode kann jedoch nur für Sie anwendbar sein, wenn Sie über ein grundlegendes Verständnis der Programmierung verfügen.

Wir empfehlen Ihnen, ein untergeordnetes Thema zu erstellen und Ihre WordPress-Website zu sichern, um dies zu tun. Dadurch wird sichergestellt, dass Ihre Änderungen auch dann gespeichert werden, wenn Sie Ihr WordPress-Theme aktualisieren. Wenn Sie Hilfe benötigen, können Sie sogar eines der besten Child-Theme-Plugins für WordPress verwenden, um eines zu erstellen.

Nachdem Sie zu Ihrem Child-Theme gewechselt haben, können Sie auf Ihre functions.php-Datei zugreifen, indem Sie auf Aussehen > Theme-Editor klicken. Klicken Sie dann auf Designfunktionen oder die Datei functions.php . Dadurch wird die Datei im Design-Editor geöffnet.

Anschließend können Sie das folgende Code-Snippet verwenden und in den Editor einfügen.

 add_filter( 'woocommerce_related_products', 'QuadLayers_related_products_by_same_title', 9999, 3 ); 

Funktion QuadLayers_related_products_by_same_title( $related_posts, $product_id, $args ) {
$product = wc_get_product( $product_id );
$title = $product->get_name();
$related_posts = get_posts( array(
'post_type' => 'Produkt',
'post_status' => 'veröffentlichen',
'title' => $title,
'fields' => 'ids',
'posts_per_page' => -1,
'ausschließen' => array( $product_id ),
));
$related_posts zurückgeben;
} 

Das Code-Snippet funktioniert, indem es Ihnen einfach verwandte Produkte mit demselben Titel gibt. Wenn Sie identische Produkte mit denselben Namen haben, werden diese auf diese Weise zu Ihrem Bereich für WooCommerce-bezogene Produkte hinzugefügt. Aktualisieren Sie Ihre functions.php-Datei, indem Sie auf Datei aktualisieren klicken, und Sie sollten fertig sein.

Credits an den ursprünglichen Autor des Codes hier.

So entfernen Sie WooCommerce-bezogene Produkte

Darüber hinaus können Sie auch den Abschnitt WooCommerce-bezogene Produkte mit der gleichen Methode wie oben von Ihrer Website entfernen . Sie können entweder alle verwandten Produkte vollständig oder nur für bestimmte Produkte entfernen.

1. Entfernen Sie alle verwandten Produkte

Um alle zugehörigen Produktabschnitte von jeder Produktseite zu entfernen, öffnen Sie einfach die Datei functions.php Ihres untergeordneten Designs und fügen Sie das folgende Code-Snippet ein.

 remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 ); 

Endlich. aktualisieren Sie die Datei. Dadurch sollte der Abschnitt „Verwandte Produkte“ vollständig aus allen Ihren WooCommerce-Produkten entfernt werden.

Credits an den Autor des Codes hier.

2. Entfernen Sie verwandte Produkte nur für bestimmte Produkte

Sie können bei Bedarf auch Code-Snippets verwenden, um den Abschnitt „Verwandte Produkte“ nur für bestimmte Produkte auf Ihrer Website zu entfernen. Der folgende Code fügt einfach eine Option hinzu, um es auf allen Ihren Produkten auszublenden.

Lassen Sie uns zunächst fortfahren und dies auf die gleiche Weise wie zuvor in die Datei functions.php Ihres Designs einfügen.

 add_action( 'woocommerce_product_options_general_product_data', 'QuadLayers_add_related_checkbox_products' );

Funktion QuadLayers_add_related_checkbox_products() { 
woocommerce_wp_checkbox( array( 
'id' => 'hide_related', 
'Klasse' => '', 
'label' => 'Verwandte Produkte ausblenden'
) 
); 
}

// -----------------------------------------
// 2. Kontrollkästchen in benutzerdefiniertem Feld speichern

add_action( 'save_post_product', 'QuadLayers_save_related_checkbox_products' );

Funktion QuadLayers_save_related_checkbox_products( $product_id ) {
global $pagenow, $typenow;
if ( 'post.php' !== $pagenow || 'product' !== $typenow ) return;
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( isset( $_POST['hide_related'] ) ) {
update_post_meta( $product_id, 'hide_related', $_POST['hide_related'] );
} sonst delete_post_meta( $product_id, 'hide_related' );
}

// -----------------------------------------
// 3. Verwandte Produkte auf einer einzelnen Produktseite ausblenden

add_action( 'woocommerce_after_single_product_summary', 'QuadLayers_hide_related_checkbox_products', 1 );

Funktion QuadLayers_hide_related_checkbox_products() {
globales $Produkt;
if ( ! empty ( get_post_meta( $product->get_id(), 'hide_related', true ) ) ) {
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
}
} 

Gehen Sie dann in Ihrem WordPress-Dashboard erneut zu Produkte > Alle Produkte und klicken Sie bei dem Produkt, in dem Sie die zugehörigen Produkte ausblenden möchten, auf Bearbeiten . Wenn Sie wie in den vorherigen Ansätzen unter Produktdaten scrollen, klicken Sie auf die Registerkarte Allgemein .

Sie sollten eine neue Option zum Ausblenden verwandter Produkte sehen. Aktivieren Sie diese Option, um die zugehörigen Produkte auf der jeweiligen Produktseite auszublenden.

Credits an den Autor des Codes hier.

So passen Sie die Anzahl und Spalten verwandter Produkte an

Darüber hinaus können Sie auch Ihren Abschnitt für verwandte Produkte anpassen, indem Sie die Anzahl der angezeigten Produkte sowie die Zeilen und Spalten auf Ihrer Website konfigurieren.

Dazu verwenden wir auch WooCommerce-Hooks und benutzerdefinierte Funktionen in unserer Datei functions.php . Fahren Sie fort und öffnen Sie die Datei erneut mit Ihrem Design-Editor und fügen Sie dieses Code-Snippet ein:

 add_filter( 'woocommerce_output_related_products_args', 'QuadLayers_change_number_related_products', 9999 );

function QuadLayers_change_number_related_products( $args ) {
$args['posts_per_page'] = 4; // Anzahl verwandter Produkte
$args['Spalten'] = 4; // Anzahl Spalten pro Zeile
gib $args zurück;
} 

Dieser Code funktioniert einfach, indem Sie Ihren WooCommerce-bezogenen Produktbereich in 4 Spalten und 4 Zeilen konfigurieren. Sie können diesen Wert jederzeit ändern, indem Sie $args['posts_per_page'] = 4 und $args['columns'] = 4.

Darüber hinaus können Sie diesen Abschnitt auch mit zusätzlichen CSS-Codes konfigurieren. Sie können verwendet werden, um das Layout und die Ausrichtung der Spalten und Zeilen zu ändern, damit der Abschnitt besser zu Ihrer Website passt. Sie können dafür das folgende CSS-Snippet verwenden.

 @media (Mindestbreite: 768px) {
.site-main .related.products ul.products li.product {
Breite: 22 %;
Schwimmer: links;
Rand rechts: 4 %;
}

Fügen Sie es einfach unter Ihrem zusätzlichen CSS in Ihrem Design-Anpasser ein. Sie können darauf zugreifen, indem Sie in Ihrem WordPress-Dashboard auf Aussehen > Anpassen klicken. Dies öffnet den Design-Customizer.

Klicken Sie dann auf die Registerkarte Zusätzliches CSS und fügen Sie das CSS-Skript hier ein. Sie können die Ausrichtung der zugehörigen Produkte an die Bedürfnisse Ihrer Website anpassen. Klicken Sie abschließend auf Veröffentlichen , wenn Sie fertig sind.

Credits an den Autor des Codes hier.

Fazit

Und damit endet unser Leitfaden zum Hinzufügen von WooCommerce-bezogenen Produkten. Dies ist eine der besten Möglichkeiten, den Verkauf Ihrer E-Commerce-Website zu verbessern. Aber mit dieser Anleitung sollten Sie in der Lage sein, sie hinzuzufügen, anzupassen oder sogar zu entfernen, wenn Sie möchten.

Zusammenfassend lässt sich sagen, dass Sie die verwandten Produkte in WooCommerce auf drei Arten hinzufügen können:

• Aus dem WooCommerce-Dashboard
• Verwenden eines Plugins
• Programmatisch

Darüber hinaus haben wir einige weitere hilfreiche Schritte für Sie hinzugefügt, um diese verwandten Produkte anzupassen. Dazu gehören das Entfernen von Produktseiten und das Ändern der Anzahl verwandter Produkte und ihrer Spalten. Wir hoffen, dass sie auch für Sie nützlich sind, wenn Sie die zugehörigen Produkte hinzufügen. Noch mehr Informationen finden Sie in unserem ausführlichen Tutorial zum Anpassen von WooCommerce-bezogenen Produkten.

Wenn Sie mehr über das Anpassen verschiedener anderer WooCommerce-Abschnitte und -Seiten erfahren möchten, lesen Sie bitte einige unserer anderen Artikel wie:

• So fügen Sie ein Bild zum Produkt in WooCommerce hinzu
• Passen Sie WooCommerce Checkout-Fehlermeldungen an
• So passen Sie WooCommerce-Vorlagen an

Teilen Sie uns mit, ob Sie Ihre WooCommerce-bezogenen Produktbereiche mithilfe unseres Artikels anpassen und verwalten konnten. Wenn es irgendwelche Probleme gab, teilen Sie uns dies bitte im Kommentarbereich mit. Wir werden unser Bestes tun, um Ihnen so gut wie möglich zu helfen.