So verbergen Sie nicht vorrätige Produkte in WooCommerce

Suchen Sie nach großartigen Möglichkeiten, Ihre WooCommerce-Produktseiten anzupassen und die Benutzererfahrung zu verbessern? Dann sind Sie bei uns genau richtig. In dieser Anleitung lernen Sie verschiedene Methoden kennen, um nicht vorrätige Produkte in WooCommerce auszublenden.

Warum vergriffene Produkte in WooCommerce verstecken?

Wenn Sie ein Online-Geschäft betreiben, das physische Produkte verkauft, werden einige Ihrer Artikel von Zeit zu Zeit ausverkauft sein. In diesen Fällen können Sie:

• Blenden Sie den Produktpreis und den Lagerbestand vor der Google-Suche aus und lassen Sie Käufer auf die Produktseite gelangen, auch wenn das Produkt nicht verfügbar ist
• Zeigen Sie das Produkt an, verstecken Sie den Preis und fügen Sie eine Schaltfläche „Mich benachrichtigen“ hinzu, die Benutzer auswählen können, um eine Push-Benachrichtigung zu erhalten, wenn das Produkt wieder verfügbar ist
• Entfernen Sie die Schaltfläche „Zum Warenkorb hinzufügen“, damit Kunden das Produkt nicht kaufen können
• Blenden Sie diese nicht vorrätigen Artikel aus

Jede dieser Optionen hat Vor- und Nachteile. In diesem Leitfaden konzentrieren wir uns darauf, wie Sie nicht verfügbare Produkte ausblenden. Wenn ein Produkt in WooCommerce nicht mehr vorrätig ist, wird auf Ihrer Shop-Seite standardmäßig eine Schaltfläche „Mehr lesen “ anstelle der klassischen Schaltfläche „ Kaufen “ oder „In den Warenkorb “ angezeigt. Außerdem wird die Option zum Kauf des nicht vorrätigen Produkts auf der Produktseite deaktiviert.

Dies kann für einige Benutzer unpraktisch sein, insbesondere wenn Sie Produkte für begrenzte Zeiträume verkaufen oder Ihren Bestand häufig ändern. Wenn Sie also nur aktuell verfügbare und versandbereite Produkte anzeigen möchten, kann es eine gute Idee sein, die nicht verfügbaren Artikel vorübergehend auszublenden. Schauen wir uns an, wie Sie das in WooCommerce tun können.

So verstecken Sie nicht vorrätige Produkte in WooCommerce

Es gibt zwei Möglichkeiten, nicht vorrätige Produkte in WooCommerce zu verbergen:

1. Aus den WooCommerce-Einstellungen
2. Programmatisch

Schauen wir uns beide Methoden genauer an.

1) Nicht vorrätige Produkte in den WooCommerce-Einstellungen ausblenden

Die einfachste Möglichkeit, Ihre nicht verfügbaren Produkte auszublenden, sind die WooCommerce-Einstellungen . Gehen Sie in Ihrem WordPress-Dashboard zu WooCommerce > Einstellungen > Produkte > Inventar. Dort sehen Sie eine Option mit dem Namen Out of Stock Visibility . Aktivieren Sie es einfach und klicken Sie auf Änderungen speichern .

Jetzt werden alle Ihre nicht vorrätigen Produkte automatisch auf den folgenden Seiten ausgeblendet:

• Shop-Seite
• Suchergebnisse
• Produktkategorie
• Produkt-Tag-Seiten
• Abschnitt Verwandte Produkte
• Upsells- und Cross-Selling-Abschnitte

Wenn Sie eine einfache Lösung suchen und die nicht verfügbaren Produkte auf all diesen Seiten ausblenden möchten, ist dies eine hervorragende Alternative. Wenn Sie jedoch mehr Flexibilität wünschen und die Option haben möchten, Ihre nicht vorrätigen Produkte auf bestimmten Seiten auszublenden, müssen Sie ein wenig Code verwenden.

2) Programmatisch vergriffene WooCommerce-Produkte ausblenden

Um vergriffene Produkte in WooCommerce programmgesteuert auszublenden, müssen Sie Filter-Hooks verwenden. Wenn Sie mit Hooks nicht vertraut sind, empfehlen wir Ihnen, einen Blick auf diesen Leitfaden zu werfen, um mehr über sie zu erfahren und wie Sie das Beste aus ihnen machen können.

In diesem Tutorial zeigen wir Ihnen einige Skripte, die Sie direkt zu Ihrer Website hinzufügen können, um nicht vorrätige Produkte auszublenden.

Bevor du anfängst

Da wir einige Kerndateien bearbeiten werden, empfehlen wir Ihnen, Ihre Website zu sichern. Erstellen Sie außerdem ein untergeordnetes Design oder verwenden Sie eines dieser Plugins, um sicherzustellen, dass Sie die Änderungen nicht verlieren, wenn Sie Ihr Design das nächste Mal aktualisieren.

Die Skripte, die wir Ihnen heute zeigen, sollten in die Datei functions.php aufgenommen werden. Um diese Datei zu öffnen, gehen Sie in Ihrem WordPress-Admin-Dashboard zu Darstellung > Design-Editor . Klicken Sie dann auf die Datei functions.php in der rechten Seitenleiste, um die Datei Theme Functions zu öffnen.

Sie können einfach die unten aufgeführten Skripte in diesen Abschnitt einfügen.

Sehen wir uns nun einige Beispiele an, um nicht vorrätige Produkte in WooCommerce zu verbergen.

2.1) So verstecken Sie vergriffene Produkte auf der Archivseite des Shops

Sie können die folgende Funktion mit dem Filter-Hook woocommerce_product_query_meta_query verwenden, um vergriffene Produkte in Ihren Shop-Archivseiten auszublenden. Fügen Sie einfach das folgende Skript zur Datei functions.php Ihres Child-Themes hinzu und aktualisieren Sie die Datei.

 add_filter( 'woocommerce_product_query_meta_query', 'shop_only_instock_products', 10, 2 );
 Funktion shop_only_instock_products( $meta_query, $query ) {
 // Nur auf Shop-Archivseiten
 if( is_admin() || is_search() || ! is_shop() ) return $meta_query;

 $meta_query[] = array(
 'key' => '_stock_status',
 'value' => 'ausverkauft',
 'vergleichen' => '!='
 );
 $meta_query zurückgeben;
 } 

2.2) So verbergen Sie vergriffene Produkte auf der Startseite

Wenn Sie Ihre vergriffenen Produkte nur auf Ihrer Homepage verbergen möchten, können Sie die folgende Funktion mit demselben woocommerce_product_query_meta_query -Filter-Hook verwenden.

 add_filter( 'woocommerce_product_query_meta_query', 'filter_product_query_meta_query', 10, 2 );
 Funktion filter_product_query_meta_query( $meta_query, $query ) {
 // Nur auf der Woocommerce-Homepage
 if( is_front_page() ) {
 // Produkte "ausverkauft" ausschließen
 $meta_query[] = array(
 'key' => '_stock_status',
 'value' => 'ausverkauft',
 'vergleichen' => '!=',
 );
 }
 $meta_query zurückgeben;
 } 

2.3) So verstecken Sie vergriffene Produkte auf Ihren Suchseiten

Um nicht verfügbare Produkte auf allen Ihren Suchseiten auszublenden , können Sie die folgende Funktion verwenden, die den Action-Hook pre_get_posts verwendet. Fügen Sie es einfach in die functions.php Ihres Child-Themes ein und klicken Sie auf die Schaltfläche Datei aktualisieren. Auf diese Weise können Ihre Kunden, wenn sie nach einem Ihrer nicht vorrätigen Produkte suchen, diese nicht finden.

 add_action( 'pre_get_posts', hide_out_of_stock_in_search' );
 Funktion hide_out_of_stock_in_search( $query ){
 if( $query->is_search() && $query->is_main_query() ) {
 $query->set( 'meta_key', '_stock_status' );
 $query->set( 'meta_value', 'instock' );
 }
 } 

2.4) So verstecken Sie vergriffene Produkte in Abschnitten für verwandte Produkte

Wenn Sie sicherstellen möchten, dass keiner Ihrer verwandten Produktbereiche Ihre vergriffenen Produkte anzeigt, können Sie dieses Skript verwenden. So erhalten Ihre Kunden nur Produktempfehlungen, die sie sofort kaufen können.

 Funktion hide_out_of_stock_option( $option ){
 geben Sie 'ja' zurück;
 }
 add_action( 'woocommerce_before_template_part', function( $template_name ) {
 if( $template_name !== "single-product/related.php" ) {
 Rückkehr;
 }
 add_filter( 'pre_option_woocommerce_hide_out_of_stock_items', 'hide_out_of_stock_option' );
 } );
 add_action( 'woocommerce_after_template_part', function( $template_name ) {
 if( $template_name !== "single-product/related.php" ) {
 Rückkehr;
 }
 remove_filter( 'pre_option_woocommerce_hide_out_of_stock_items', 'hide_out_of_stock_option' );
 } ); 

Wenn Sie erfahren möchten, wie Sie den zugehörigen Produktabschnitt einfach entfernen können, lesen Sie diese Anleitung.

So entfernen Sie den Out-of-Stock-Text bei einem bestimmten Produkt

Eine weitere interessante Alternative besteht darin, den Out-of-Stock-Text mit ein wenig CSS nur vor bestimmten Produkten auszublenden. Auf diese Weise können Sie bestimmte Produkte in Ihrem Shop anzeigen, aber die Kaufoption deaktivieren. Dies kann nützlich sein, wenn Sie ein neues Produkt auf den Markt bringen und einen kleinen Hype erzeugen möchten oder wenn Sie eine Option hinzufügen, mit der Benutzer benachrichtigt werden, wenn der Artikel wieder verfügbar ist.

Um den Out-of-Stock-Text für ein bestimmtes Produkt zu entfernen, müssen Sie die Produkt-ID des Artikels überprüfen, den Sie ausblenden möchten. Gehen Sie dazu in Ihrem WordPress-Admin-Dashboard zu Produkte und bewegen Sie den Mauszeiger über das Produkt und kopieren Sie die Produkt-ID unter das spezifische WooCommerce-Produkt. In unserem Fall ist die Produkt-ID beispielsweise 37.

Gehen Sie dann zu Darstellung > Anpassen > Zusätzliches CSS .

Fügen Sie danach den folgenden CSS-Code ein und klicken Sie auf Veröffentlichen . Denken Sie daran, das xx durch Ihre Post-ID-Nummer zu ersetzen.

 .postid-xx .out-of-stock { Anzeige: keine !wichtig; }

In unserem Fall verwenden wir diesen Code, um den Out-of-Stock-Text auf unserem spezifischen Produkt mit der Produkt-ID 37 auszublenden:

 .postid-37 .out-of-stock { Anzeige: keine !wichtig; } 

Darüber hinaus können Sie mit diesem CSS-Code den Out-of-Stock-Text vor all Ihren WooCommerce-Produkten ausblenden.

 .woocommerce-page .out-of-stock { Anzeige: keine !wichtig; }

Denken Sie daran , die Änderungen zu speichern , um die Anpassung abzuschließen, und das war's!

Bonus: Produktbestand nicht anzeigen

Anstatt die nicht vorrätigen Produkte zu entfernen, können Sie auch entscheiden, ob Sie den Lagerbestand Ihrer Produkte anzeigen möchten oder nicht. Wenn Sie zu WooCommerce > Einstellungen > Produkte > Inventar gehen und zu Lageranzeigeformat navigieren, sehen Sie drei Optionen:

1. Zeigen Sie immer die verbleibende Menge auf Lager an
2. Zeigen Sie nur die verbleibende Menge auf Lager an, wenn sie niedrig ist
3. Zeigen Sie niemals die verbleibende Menge auf Lager an

Wenn Sie die dritte Option auswählen, wird der Produktbestand nicht auf der Produktseite angezeigt. Dies gilt jedoch nicht für variable Produkte. Auf variablen Produktseiten sehen Benutzer die Labels „ Auf Lager “ oder „ Nicht auf Lager “ für die von ihnen gewählte Variante.

Die gute Nachricht ist, dass Sie das Etikett des Produktbestands mit ein wenig Code ausblenden können.

Um die Bestandsinformationen für variable Produkte zu entfernen, fügen Sie einfach den folgenden Code zu Ihrer Datei functions.php hinzu.

HINWEIS : Denken Sie noch einmal daran, beim Bearbeiten von Kerndateien Ihre Website zu sichern und ein untergeordnetes Design zu erstellen, bevor Sie das Code-Snippet hinzufügen.

 // Entfernen Sie die Bestandsinformationen von der Produktseite für variable Produkte
Funktion quadlayers_remove_stock_data_variable_products( $data ) {
    unset( $data['availability_html'] );
    $daten zurückgeben;
}
add_filter( 'woocommerce_available_variation', 'quadlayers_remove_stock_data_variable_products', 99 );

Das ist es! Auf diese Weise können Sie die Bestandsinformationen von der Produktseite für Ihre variablen Produkte entfernen . Weitere Informationen finden Sie auf dieser Seite.

Abschließende Empfehlungen

Das falsche Hinzufügen von Codezeilen zu Ihren Designdateien kann Ihre Website beschädigen. Denken Sie also an Folgendes, bevor Sie mit der Anpassung beginnen:

• Erstellen Sie ein vollständiges Backup Ihrer Website
• Verwenden Sie immer ein untergeordnetes Thema für alle Code- oder Skriptänderungen. Sehen Sie sich unseren Leitfaden an, wenn Sie nicht wissen, wie man einen erstellt
• Testen Sie Ihre Änderungen einzeln, um festzustellen, welche davon Probleme verursacht
• Wenn Sie mehrere Codes verwenden, stellen Sie sicher, dass sie in allen möglichen Szenarien reibungslos funktionieren, wenn Sie sie kombinieren

Fazit

Zusammenfassend lässt sich sagen, dass das Ausblenden nicht verfügbarer Artikel eine gute Idee für diejenigen sein kann, die physische Produkte verkaufen, wenn Sie nur Produkte anzeigen möchten, die Käufer in Ihrem Geschäft kaufen können.

In dieser Anleitung haben wir Ihnen gezeigt, wie Sie vergriffene Produkte in WooCommerce auf zwei verschiedene Arten ausblenden können:

1. Aus den WooCommerce-Einstellungen
2. Programmatisch

Wenn Sie eine einfache Lösung wünschen und nicht verfügbare Produkte auf allen Seiten ausblenden möchten, ist dies über die WooCommerce-Einstellungen eine ausgezeichnete Wahl. Es ist einfach und schnell und jeder kann es tun. Wenn Sie mehr Flexibilität haben und Produkte nur auf bestimmten Seiten ausblenden möchten, müssen Sie ein wenig Code verwenden. Sie können noch viel mehr tun, daher empfehlen wir Ihnen, diese Skripte als Grundlage zu nehmen und sie anzupassen, um das Beste aus Ihrem Shop herauszuholen.

Abschließend haben wir gesehen, wie man mit etwas CSS den Text „Nicht vorrätig“ von bestimmten Produkten entfernt.

Bitte teilen Sie uns mit, wenn Sie Fragen haben, wir helfen Ihnen gerne weiter.

Kennen Sie andere Möglichkeiten, die Preise für nicht vorrätige Produkte zu verbergen? Lassen Sie es uns im Kommentarbereich unten wissen!