So verstecken und entfernen Sie verwandte Produkte in WooCommerce

Suchen Sie nach einer einfachen Möglichkeit, verwandte Produkte in Ihrem Geschäft auszublenden? Wir haben etwas für Sie. In diesem Artikel zeigen wir Ihnen verschiedene Möglichkeiten , verwandte Produkte in WooCommerce zu entfernen .

Was sind verwandte Produkte?

Wie der Name schon sagt, sind verwandte Produkte Produkte, die irgendwie mit einem anderen Artikel verknüpft sind. In WooCommerce sind verwandte Produkte Empfehlungen, die sich auf das Produkt beziehen, das der Käufer ansieht, und dazu neigen, den Hauptartikel zu ergänzen. Sie erscheinen normalerweise am Ende Ihrer Produktseiten und helfen Ihrem Unternehmen, Verkäufe und Einnahmen zu steigern. Produkte, die sich auf ein Telefon beziehen, können beispielsweise Kopfhörer, Telefonhüllen, Kamerazubehör usw. sein.

Warum verwandte Produkte in WooCommerce entfernen?

Wenn verwandte Produkte uns helfen, unseren Umsatz zu steigern, warum sollten wir sie dann entfernen? Es gibt mehrere Situationen, in denen Sie möglicherweise die zugehörigen Produkte in WooCommerce ausblenden möchten. Wenn Sie beispielsweise nur wenige Produkte verkaufen, die nicht miteinander verwandt sind, möchten Sie diese möglicherweise nicht anzeigen. Wenn Ihr Design mit dem Abschnitt für verwandte Produkte nicht gut funktioniert, müssen Sie es möglicherweise aus Ihrem Shop entfernen.

Darüber hinaus kann manchmal der CSS-Code einiger Themen oder Plugins Ihre Website oder Teile davon beschädigen. Wenn es einen Konflikt mit dem Abschnitt für ähnliche Produkte gibt, können Sie ihn entfernen.

Wenn Ihre Produktseite überladen ist oder zu viele verwandte Produkte enthält, können Sie außerdem entweder weniger Artikel anzeigen oder den Abschnitt ganz entfernen.

Bevor wir Ihnen zeigen, wie Sie sie entfernen, sehen wir uns an, wie Sie verwandte Produkte in WooCommerce einrichten.

So richten Sie verwandte Produkte in WooCommerce ein

Das Einrichten verwandter Produkte in WooCommerce ist ziemlich einfach. Gehen Sie in Ihrem WordPress-Dashboard zu Produkte und öffnen Sie ein beliebiges Produkt. Gehen Sie im WooCommerce-Produkteditor zum Abschnitt Produktdaten , wählen Sie die Registerkarte Verknüpfte Produkte , und Sie sehen eine Option zum Konfigurieren von Upsells und Cross-Sells.

Obwohl Upsells und Cross-Sells eine Art verwandtes Produkt sind, das WooCommerce standardmäßig anbietet, sind die Anpassungsmöglichkeiten ziemlich begrenzt. Wenn Sie verwandte Produkte anzeigen möchten, können Sie ein spezielles Plugin verwenden.

Für diese Demo verwenden wir ein kostenloses Tool namens Custom Related Products for WooCommerce. Nach der Installation und Aktivierung des Plugins sehen Sie eine weitere Option im Bereich der verknüpften Produkte.

Sie können nach Produkten suchen, die Sie als verwandte Produkte anzeigen möchten. Zum Beispiel werden wir vier Produkte auflisten.

Aktualisieren Sie dann die Einstellungen und wenn Sie die Produktseite vom Frontend aus überprüfen, sehen Sie die ausgewählten verwandten Produkte.

Alternativ können Sie einige verwandte Produkte entfernen und weniger Artikel anzeigen. Angenommen, Sie möchten statt 4 Elementen drei anzeigen. Entfernen Sie das Produkt, das Sie ausblenden möchten, aktualisieren Sie die Seite und überprüfen Sie das Frontend.

Dies ist eine der besten Anpassungen, die Sie auf Ihr Geschäft anwenden können. Anstatt zufällig verwandte Produkte anzuzeigen, können Sie die Artikel auswählen, die Sie jedem Produkt zuordnen möchten. Wir empfehlen Ihnen, einige Tests durchzuführen und die Konversionsraten zu überprüfen, um die besten Kombinationen zu finden.

HINWEIS : Beachten Sie, dass einige Vorlagen einen Abschnitt „Verwandte Produkte“ enthalten, der Produkte enthält, die dieselben Tags oder Kategorien aufweisen. Auch wenn Sie diese Artikel nicht angeben können, können Sie dieselben Tags oder Kategorien für die Produkte verwenden, die Sie zusammen anzeigen möchten.

Werfen wir einen Blick auf verschiedene Methoden zum Ausblenden verwandter Produkte .

So verstecken und entfernen Sie verwandte Produkte in WooCommerce

Es gibt mehrere Methoden, um WooCommerce-bezogene Produkte zu entfernen:

1. Mit Plugins
2. Programmatisch (Codierung)
3. Verwenden eines Seitenerstellers
4. Mit CSS
5. Aus den Themenoptionen

Schauen wir uns jede Methode genauer an.

1) Verwandte Produkte mit Plugins ausblenden

Es gibt mehrere Plugins, mit denen Sie verwandte Produkte ausblenden können. Für dieses Tutorial verwenden wir NS Remove Related Products. Zuerst müssen Sie das Plugin installieren und aktivieren. Gehen Sie zu Plugins > Neu hinzufügen , suchen Sie nach dem Tool und installieren Sie es auf Ihrer Website.

Nachdem Sie das Plugin aktiviert haben, werden Sie sehen, dass Sie alle verwandten Produkte erfolgreich von Ihren Einzelproduktseiten entfernt haben. Dies ist ein Plug-and-Play-Plugin und erfordert keine zusätzlichen Konfigurationen.

Wenn Sie eine Ihrer Einzelproduktseiten überprüfen, werden Sie keine verwandten Produkte sehen.

Wenn Sie die zugehörigen Produkte wieder anzeigen möchten, deaktivieren Sie das Plugin. Da NS Remove Related Products ein leichtgewichtiges Tool ist, wird es die Geschwindigkeit und Leistung Ihrer Website nicht beeinträchtigen, wenn es installiert bleibt.

2) Verwandte Produkte programmgesteuert entfernen

Wenn Sie über Programmierkenntnisse verfügen und sich mit dem Bearbeiten von Code und dem Ändern Ihrer Dateien auskennen, ist dies eine sehr interessante Methode für Sie. In diesem Abschnitt zeigen wir Ihnen, wie Sie die Datei functions.php Ihres Themes optimieren und die WooCommerce-bezogenen Produkte aus Ihrem Online-Shop entfernen.

HINWEIS : Bei dieser Methode werden einige der Dateien deines Themes bearbeitet. Bevor du fortfährst, stelle also sicher, dass du eine vollständige Sicherung deiner WordPress/WooCommerce-Website hast. Auf diese Weise können Sie Ihre Website wiederherstellen, falls etwas schief geht.

Um verwandte Produkte zu entfernen, bearbeiten wir das Design functions.php . Dazu gibt es zwei verschiedene Methoden:

• Über ein Child-Theme
• Über ein seitenspezifisches Plugin

Wir haben eine Schritt-für-Schritt-Anleitung erstellt, um Ihnen beizubringen, wie Sie untergeordnete Themen erstellen. Nachdem Sie ein untergeordnetes Design für Ihre Website erstellt haben, können Sie das benutzerdefinierte Code-Snippet zur Datei functions.php des untergeordneten Designs hinzufügen. Wenn Sie sich hingegen auf ein dediziertes Plugin verlassen, fügen Sie Ihren benutzerdefinierten Code direkt hinzu.

Werfen wir einen kurzen Blick auf beide Optionen.

2.1) Untergeordnetes Thema

Wenn Sie unseren Blog verfolgt haben, wissen Sie wahrscheinlich, dass wir nicht empfehlen, die Dateien des übergeordneten Designs zu bearbeiten, da alle Ihre Änderungen verloren gehen, wenn das Design aktualisiert wird. Mit anderen Worten, Ihre angepassten Dateien werden durch die neuen Dateien aus der neuen Version ersetzt.

Aus diesem Grund empfehlen wir die Verwendung eines untergeordneten Designs, wenn Sie Ihrem Design benutzerdefinierten Code hinzufügen müssen. Das Erstellen eines untergeordneten Themas ist ziemlich einfach. Für diese Demo verwenden wir ein Plugin namens Child Themify.

Installieren und aktivieren Sie zunächst Child Themify in Ihrem Geschäft.

Unter dem Abschnitt Aussehen sehen Sie eine neue Option namens Create Child Theme .

Von dort aus können Sie ein untergeordnetes Thema für Ihr übergeordnetes Thema erstellen.

Nachdem Sie ein untergeordnetes Design erstellt haben, aktivieren Sie es und gehen Sie zum Design-Editor.

Hier fügen wir der Datei functions.php des Themes ein wenig Code hinzu. Standardmäßig zeigt WordPress die Datei style.css im Editor an, aber Sie können die Datei functions.php aus der rechten Spalte auswählen.

Kopieren Sie nach Auswahl der Datei den Code von unten.

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

Fügen Sie es dann in den Editor ein und aktualisieren Sie die Datei.

Das ist es! Überprüfen Sie nun Ihre Produktseite im Frontend und Sie werden sehen, dass der Abschnitt für verwandte Produkte nicht mehr sichtbar ist.

2.2) Codeschnipsel

Eine weitere Alternative ist das Hinzufügen eines benutzerdefinierten Code-Snippets mithilfe eines Plugins. Für dieses Tutorial verwenden wir Code Snippets, eines der kostenlosen standortspezifischen Plugins, die auf dem Markt erhältlich sind.

Installieren und aktivieren Sie zunächst das Plugin auf Ihrer Website.

Dann sehen Sie auf der linken Seite neue Einstellungen.

Standardmäßig zeigt das Plug-in einige benutzerdefinierte Code-Snippets an, die jedoch nicht aktiv sind und sich daher nicht auf Ihre Website auswirken.

Um verwandte Produkte in WooCommerce zu entfernen, fügen wir der Website ein neues Snippet hinzu.

Geben Sie dem Snippet einen Namen und kopieren Sie dann diesen Code.

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

Fügen Sie es in den Abschnitt Code ein, wählen Sie die Option Snippet überall ausführen und aktivieren Sie es.

Sobald Ihr Snippet aktiv ist, überprüfen Sie Ihre einzelnen Produktseiten und Sie werden sehen, dass die verwandten Produkte nicht dort sind.

So können Sie WooCommerce-bezogene Produkte mit ein wenig Codierung entfernen oder ausblenden. Sehen wir uns nun an, wie das mit einem Seitenersteller geht.

3) Verwandte Produkte mit einem Seitenersteller ausblenden

Eine weitere interessante Option, um die zugehörigen Produkte von einzelnen WooCommerce-Produktseiten auszublenden, ist die Verwendung eines speziellen Seitenerstellungs-Plugins.

Für dieses Tutorial verwenden wir den Divi-Builder, einen der beliebtesten und benutzerfreundlichsten Seitenersteller auf dem Markt. Zuerst müssen Sie das Plugin auf Ihrer Website installieren und aktivieren. Da es sich um ein Premium-Produkt handelt, müssen Sie es auf der Website von Elegant Themes kaufen.

Nachdem Sie das Plugin von Ihrem Elegant Themes-Konto heruntergeladen haben, installieren Sie es und aktivieren Sie es.

Der Divi-Builder verfügt über ein visuelles Bearbeitungserlebnis, mit dem Sie Ihre Seiten direkt vom Frontend aus bearbeiten können.

Sehen wir uns nun an, wie man damit die WooCommerce-bezogenen Produkte entfernt. Öffnen Sie eine beliebige Produktseite und klicken Sie dann in der oberen Leiste auf die Schaltfläche Visual Builder aktivieren.

WordPress lädt den Divi-Builder und Sie können die Seitenvorlagen von dort aus bearbeiten.

Klicken Sie nun auf das Element Verwandte Produkte und Sie sehen mehrere Optionen. Um diesen Abschnitt zu entfernen, wählen Sie einfach die Schaltfläche „Löschen“.

Sie werden sofort sehen, dass dieser Abschnitt von der Seite verschwindet.

Darüber hinaus können Sie andere Elemente Ihrer Produktseite bearbeiten, aber lassen Sie uns vorerst alles so lassen, wie es ist, und speichern Sie die Änderungen.

Einer der großen Vorteile des Divi-Builders ist, dass Sie die Änderungen in Echtzeit sehen können. Um sicherzustellen, dass alles gut aussieht, können Sie die Produktseite vom Frontend aus überprüfen und die Ergebnisse sehen.

Es ist erwähnenswert, dass der Divi-Builder mit den meisten Themen funktioniert, nicht nur mit Divi oder Extra von Elegant Themes.

Weitere Anleitungen zum Anpassen Ihrer Website mit Divi finden Sie in den folgenden Anleitungen:

• So passen Sie die WooCommerce-Produktseite mit Divi an
• Fügen Sie die Schaltfläche „In den Warenkorb“ auf den Divi-Shop-Seiten hinzu
• Divi Kontaktformular funktioniert nicht? Wie man es repariert

4) Verwandte Produkte mit CSS entfernen

Wenn Sie Ihre Designdateien nicht bearbeiten oder Plugins verwenden möchten, gibt es ein einfaches CSS-Snippet, mit dem Sie die zugehörigen Produkte auf Ihren einzelnen Produktseiten ausblenden können.

Gehen Sie zunächst in Ihrem WordPress-Dashboard zu Aussehen > Anpassen .

Öffnen Sie den Abschnitt Zusätzliches CSS .

Und fügen Sie den folgenden CSS-Code hinzu:

 .verwandte.Produkte {
 Anzeige: keine;
 }

Der WordPress Customizer wird mit einem Live-Vorschau-Assistenten geliefert, mit dem Sie alle Updates in Echtzeit sehen können, wie unten gezeigt.

Wie Sie sehen können, ist es sehr einfach, CSS zu verwenden, um die zugehörigen Produkte auszublenden. Aktualisieren Sie einfach die Konfiguration, nachdem Sie den Code eingefügt haben, und Sie können loslegen.

5) Entfernen Sie Produkte aus den Themenoptionen

Einige Premium-Designs verfügen über ein spezielles Design-Panel, das einige Optionen zum Anpassen Ihres WooCommerce-Shops enthält. In den meisten Fällen befinden sich die Optionen zum Entfernen verwandter Produkte unter den Optionen für einzelne Produktseiten.

Darüber hinaus verfügen einige WordPress-Themes über spezielle Vorlagen, die einen Abschnitt für verwandte Produkte enthalten, den Sie aktivieren/deaktivieren können. Wir empfehlen Ihnen, sich Ihr Thema anzusehen oder sich an das Support-Team zu wenden, um dies herauszufinden.

Bonus: So deaktivieren Sie verwandte Produkte einzeln

Dies ist eine erweiterte Methode zum Entfernen von WooCommerce-bezogenen Produkten von Ihren Produktseiten. Wir fügen ein Code-Snippet hinzu, um ein Kontrollkästchen in Ihrem WooCommerce-Dashboard hinzuzufügen, das Sie ankreuzen können, um verwandte Produkte für jedes Produkt zu aktivieren/deaktivieren.

Sie müssen den folgenden Code in die Datei functions.php Ihres untergeordneten Designs einfügen oder ein seitenspezifisches Plugin verwenden. Für diese Demo verwenden wir das Code Snippets-Plugin, also gehen wir einfach zu den Einstellungen des Plugins und erstellen ein neues Snippet.

Wir geben ihm einen Namen und fügen das Folgende ein.

Erläuterung des Codes

Dieser Code fügt der Produktseite ein Kontrollkästchen hinzu, das Sie ankreuzen können, um den Abschnitt für verwandte Produkte zu entfernen. Wir haben das Kontrollkästchen „Verwandte Produkte entfernen“ genannt, aber Sie können es anpassen, indem Sie die Beschriftungszeile ändern.

 // 1. Fügen Sie der Produktseite ein Kontrollkästchen hinzu, um verwandte Produkte zu entfernen
add_action( 'woocommerce_product_options_general_product_data', 'quadlayers_add_related_products_checkbox' ); 
Funktion quadlayers_add_related_products_checkbox()
 {woocommerce_wp_checkbox( array(
 'id' => 'hide_related',
 'Klasse' => '',
 'label' => 'Verwandte Produkte entfernen'
 )
 );
 }

Der folgende Teil des Codes speichert das Kontrollkästchen in einem benutzerdefinierten Feld.

 // 2. Checkbox-Feld speichern

 add_action( 'save_post_product', 'quadlayers_save_related_products_checkbox' );
 Funktion quadlayers_save_related_products_checkbox( $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' );
 }

Schließlich überprüft dieser Teil des Codes, ob das gerade erstellte Kontrollkästchen aktiviert ist, und wenn dies der Fall ist, entfernt er den Abschnitt "Verwandte Produkte".

 // 3. Verwandte Produkte auf einer einzelnen Produktseite ausblenden

 add_action( 'woocommerce_after_single_product_summary', 'quadlayers_hide_related_products_checkbox', 1 );
 Funktion quadlayers_hide_related_products_checkbox() {
 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 );
 }
 }

Fügen Sie den gesamten Code zusammen und speichern Sie die Änderungen. Jetzt ist es an der Zeit zu sehen, ob es funktioniert hat, also gehen Sie zu Ihrer Produktseite und wählen Sie eines der veröffentlichten Produkte aus.

Im Editor sehen Sie eine neue Option namens Hide Related Products.

Wenn Sie dieses Kontrollkästchen aktivieren, wird der Abschnitt für verwandte Produkte nicht auf dieser Produktseite angezeigt. Wenn Sie also jetzt das Frontend überprüfen, werden Sie so etwas sehen.

Dies ist eine großartige Option, um die Flexibilität zu haben, nur den Abschnitt für verwandte Produkte auf bestimmten Produktseiten anzuzeigen. Weitere Informationen hierzu finden Sie hier.

Ändern der Anzahl verwandter Produkte, die Sie auf einer Seite anzeigen können

Dies ist eine weitere interessante Option, um die Anzahl verwandter Produkte zu ändern, die Sie pro Seite anzeigen. Dies kann nützlich sein, um einen übersichtlicheren Abschnitt für verwandte Produkte zu haben oder wenn Sie nur wenige verwandte Artikel anzeigen möchten.

Dazu kannst du entweder den folgenden Code in die functions.php des Child-Themes einfügen oder das Code-Snippets-Plugin verwenden.

 /**
 * Ändern Sie die Anzahl verwandter Produkte
 */
 Funktion woo_related_products_limit() {
 globales $Produkt;
 $args['posts_per_page'] = 6;
 gib $args zurück;
 }
 add_filter( 'woocommerce_output_related_products_args', 'quadlayers_related_products_args', 20 );
 Funktion quadlayers_related_products_args( $args ) {
 $args['posts_per_page'] = 3; // 3 verwandte Produkte
 $args['Spalten'] = 1; // in 1 Spalten angeordnet
 gib $args zurück;
 }

Wenn Sie sich den Code genauer ansehen, werden Sie sehen, dass wir 3 verwandte Produkte in 1 Spalte anzeigen. Passen Sie den Code einfach nach Ihren Wünschen an und speichern Sie die Änderungen. Sie werden alle Änderungen im Frontend sehen.

So verwenden Sie verwandte Produkte, um die Konversionsraten zu erhöhen

Einer der Hauptvorteile verwandter Produkte besteht darin, dass sie Ihnen helfen, die Konversionsraten zu erhöhen. Die Idee ist, Produkte anzuzeigen, die sich auf den Artikel beziehen, den der Käufer ansieht, damit er mehr Produkte kauft. Diese verwandten Produkte ergänzen oder verbessern normalerweise die Leistung des Hauptartikels. Wenn Sie sich beispielsweise einen Laptop ansehen, können verwandte Produkte eine Laptoptasche, eine externe Festplatte, ein HDMI-Kabel usw. sein.

Dies ist eine beliebte Strategie im E-Commerce. Beispielsweise zeigen beliebte Online-Shops wie Amazon oder Flipkart mehrere verwandte Produkte entsprechend den vergangenen Bestellungen des Benutzers, dem Suchverlauf, den Marken usw. an.

Fazit

Alles in allem können verwandte Produkte Ihnen helfen, Ihren Umsatz zu steigern. Es gibt jedoch Situationen, in denen Sie sie möglicherweise ausblenden müssen.

In diesem Leitfaden haben wir verschiedene Methoden zum Entfernen verwandter Produkte in WooCommerce gesehen:

• Plugins verwenden
• Programmatisch (Codierung)
• Verwendung eines dedizierten Seitenerstellers
• Mit CSS-Schnipseln
• Aus den Themenoptionen

Der einfachste Weg, den Abschnitt für verwandte Produkte auszublenden, ist die Verwendung eines Plugins. Sie müssen nur das Plugin aktivieren und es blendet die zugehörigen Produkte automatisch aus. Auf der anderen Seite können Sie, wenn Sie mit dem Codieren vertraut sind, die Datei functions.php bearbeiten oder ein kleines CSS-Skript hinzufügen.

Wenn Sie verwandte Produkte von einzelnen Seiten entfernen möchten, können Sie dies alternativ mit einem Seitenersteller tun. Wenn Sie ein Premium-Theme haben, überprüfen Sie schließlich, ob es Ihnen die Möglichkeit gibt, die zugehörigen Produkte aus dem Themenbereich auszublenden. Wenn Sie einen Seitenersteller installiert haben, können Sie damit die zugehörigen Produkte im Geschäft ausblenden.

Weitere Tipps zur optimalen Nutzung Ihres Shops finden Sie in den folgenden Leitfäden:

• So fügen Sie WooCommerce-Produkte hinzu
• Passen Sie die WooCommerce-Produktseite an
• So bearbeiten Sie die WooCommerce-Shopseite

Haben Sie WooCommerce-bezogene Produkte aus Ihrem Shop entfernt? Welche Methode hast du verwendet? Lassen Sie es uns im Kommentarbereich unten wissen!