5+ Möglichkeiten zum Entfernen der Seitenleiste von der Produktseite in WooCommerce-Designs

Veröffentlicht: 2020-09-15

WooCommerce Sidebar-Produktseite entfernen Möchten Sie die Seitenleiste von der Produktseite in WooCommerce entfernen? Wenn Sie nach einer Lösung suchen, habe ich in diesem schnellen Woocommerce-Tutorial beschrieben, wie Sie Schritt für Schritt die Seitenleiste von der Produktseite entfernen können. Es ist einfach zu befolgen und kann von jedem WordPress-Benutzer unabhängig vom Kenntnisstand implementiert werden. Wenn Sie die Seitenleiste von der WordPress-Site oder einem bestimmten Thema entfernen möchten, habe ich es hier ausführlich erklärt.

Seitenleiste der WooCommerce-Produktseite

In WooCommerce wird die Produktseite in den meisten Themen mit einer Standard-Seitenleiste geliefert, und dies kann für eine Reihe von WooCommerce-Benutzern ein Problem darstellen. Zum Beispiel wird das standardmäßige WooCommerce-Theme – Storefront mit der Seitenleiste der Produktseite geliefert, wie in der Abbildung unten zu sehen:

Entfernen Sie die Seitenleiste von der WooCommerce-Produktseite

Heute werde ich Ihnen zeigen, wie Sie diese WooCommerce-Seitenleiste auf der Produktseite entfernen können. Zur Veranschaulichung werde ich das WooCommerce-Storefront-WordPress-Theme verwenden, aber dieser Ansatz funktioniert mit allen WooCommerce-Themen.

Schritt für Schritt So entfernen Sie die WooCommerce-Sidebar von der Produktseite

Im Folgenden sind die Schritte und Optionen zum Entfernen der Seitenleiste von der WooCommerce-Produktseite aufgeführt:

  1. Melden Sie sich bei Ihrer WooCommerce-Site an und öffnen Sie den Theme-Editor und die Datei functions.php
  2. Sie können auch das FTP oder das CPanel Ihres Hosting-Unternehmens verwenden, um das Code-Snippet zur Datei functions.php des jeweiligen Themas hinzuzufügen.
  3. Fügen Sie das Code-Snippet hinzu, das aus einem Aktions-Hook zum Entfernen besteht, zu „ wp“ , das sich an das Ereignis woocommerce_sidebar anhängt , das für das Hinzufügen der Seitenleisten-Aktion im WooCommerce-Design verantwortlich ist.
  4. Für das Storefront-WooCommerce-Theme gibt es einen speziellen Hook storefront_sidebar , den Sie verwenden sollten, um die WooCommerce-Sidebar von der Produktseite zu entfernen.
  5. Sie können auch das bedingte Tag is_product verwenden, um zu überprüfen, ob Sie sich auf der Produktseite befinden, bevor Sie die Seitenleiste von der Produktseite in WooCommerce entfernen können.
  6. Fügen Sie dieses Code-Snippet in die functions.php und update ein und besuchen Sie dann Ihre WooCommerce-Produktseite im Frontend, um zu sehen, ob die Änderungen wirksam sind.
  7. Eine andere Lösung, die Sie verwenden können , um die Seitenleiste von der Produktseite zu entfernen, ist das Festlegen einer benutzerdefinierten Beitragsvorlage in voller Breite , die in diesem Beitrag zum Entfernen der Seitenleiste aus WordPress klar erläutert wird eines der besten Premium-WordPress-Themen – DIVI

Codeschnipsel zum Entfernen der Seitenleiste von der Produktseite in WooCommerce

Es gibt drei Ansätze, die Sie verwenden können, um die Seitenleiste von der Produktseite in WooCommerce zu entfernen, wie in der obigen Schritt-für-Schritt-Zusammenfassung beschrieben.

#1) Entfernen Sie den Aktionshaken zu „WP“ mithilfe der WooCommerce-Seitenleiste

Wir beginnen also mit dem Hook remove_action, der dem Ereignis „wp“ hinzugefügt wurde. Der Code sollte wie folgt lauten:

 add_action( 'wp', 'njengah_remove_sidebar_product_pages' );

Funktion njengah_remove_sidebar_product_pages() {

    if ( is_product() ) {

    remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );

   }

}

Dieses Snippet entfernt die Seitenleiste von allen Produktseiten, wenn es zu Ihrer functions.php-Designdatei oder Ihrem benutzerdefinierten WooCommerce-Plugin hinzugefügt wird.

Wie es funktioniert

Dieses Code-Snippet besteht aus einem Action-Hook, der dem „wp“ -Ereignis hinzugefügt wird, und seine Callback-Funktionen verwenden einen remove_action-Hook , um alle Seitenleisten auf den Produktseiten zu entfernen, da es woocommerce_sidebar angibt.

Dies ist der effektivste Weg, um die Seitenleiste von der Produktseite für alle Ihre WooCommerce-Produkte zu entfernen.

#2) Verwenden Sie is_active_sidebar(), um die Seitenleiste von WooCommerce-Produktseiten zu entfernen

Eine weitere Technik, mit der Sie die Seitenleiste von der Produktseite in WooCommerce entfernen können, ist die Verwendung der WordPress-Funktion is_active_sidebar . Dies ist ein Beispiel für ein Code-Snippet, das is_active_sidebar verwendet, um die WooCommerce-Seitenleisten zu entfernen:

 /**
 * Seitenleiste auf Produktseiten in WooCoomerce deaktivieren.
 *
 */

Funktion njengah_remove_sidebar( $is_active_sidebar, $index ) {              

    if( $index !== "Seitenleiste-1" ) {

        gebe $is_active_sidebar zurück;

    }

    if( ! is_product() ) {

        gebe $is_active_sidebar zurück;

    }

    falsch zurückgeben;

}

add_filter( 'is_active_sidebar', 'njengah_remove_sidebar', 10, 2 );

Wie es funktioniert

Dieser Code besteht aus einem Filter-Hook, der überprüft, ob es eine Seitenleiste mit dem Index von Seitenleiste-1 gibt, der geändert werden kann, um mit jeder anderen Seitenleisten-ID/Namen übereinzustimmen.

Wenn die Seitenleiste gefunden wird, wird die Rückgabe auf „false“ gesetzt, um die Seitenleiste zu deaktivieren. Um es auf der Produktseite wirksam zu machen, verwendet der letzte Teil is_product() , um zu überprüfen, ob wir uns auf der Produktseite befinden.

Entfernen Sie die Seitenleiste von der WooCommerce-Produktseite

Um mehr über den Seitenleistenindex zu erfahren, der dem Namen oder der ID der Seitenleiste entspricht, sollten Sie es hier lesen – wie man eine Seitenleiste in WordPress hinzufügt oder hier – wie man eine Seitenleiste in WordPress registriert.

#3) Entfernen Sie die Seitenleiste aus dem Storefront WooCommerce-Theme, indem Sie Hook auf der Storefront_sidebar-Aktion entfernen

Für dieses spezielle Snippet können Sie es verwenden, um die Seitenleiste der WooCommerce-Produktseite zu entfernen, da es auf einen bestimmten Haken für das Storefront-Thema wirkt, nämlich storefront_sidebar. Der folgende Code sollte die Seitenleiste im Storefront-Thema entfernen:

 add_action( 'get_header', 'njengah_remove_storefront_sidebar' );

Funktion njengah_remove_storefront_sidebar() {

     if ( is_product() ) {

       remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );

    }

}

Wie es funktioniert

Dies ist einfach ein Hook zur get_header- Aktion, und die Callback-Funktion hat eine remove_action, die auf den spezifischen Hook storefront_sidebar abzielt, der die Seitenleiste im Storefront -Woocommerce-Design hinzufügt.

Sie können auch aus Ihrer spezifischen Themendokumentation entnehmen, ob Ihr aktuelles WooCommerce-Thema über diese Art von Hook verfügt, den Sie jetzt im obigen Code ersetzen können und der nahtlos funktioniert.

#4) Entfernen Sie die WooCommerce-Sidebar mit einer benutzerdefinierten Produktseitenvorlage

Einige Premium- und kostenlose WooCommerce-Designs werden mit einer benutzerdefinierten Beitragsvorlage für die Produktseite geliefert, die eine Seite in voller Breite festlegt, die die Seitenleiste eliminiert.

Ein klassisches Beispiel ist das Divi- Design, wie Sie im Bild unten sehen können. Sie können einfach die Vorlage in voller Breite auswählen und die Seitenleiste wird entfernt.

Entfernen Sie die Seitenleiste von der WooCommerce-Produktseite

Wie es funktioniert

Die Verwendung der benutzerdefinierten Beitragsvorlage in voller Breite ist eine Technik, die in diesem Beitrag erklärt wurde – wie man die WordPress-Seitenleiste entfernt

#5) Verwenden Sie CSS, um die Seitenleiste von der WooCommerce-Produktseite zu entfernen

Eine weitere gängige und einfache Möglichkeit, die WooCommerce-Seitenleiste von Ihrer Produktseite auszublenden, ist die Verwendung der CSS-Anzeigeeigenschaft. Ein Beispiel für einen solchen Code ist unten angegeben:

 .rechte Seitenleiste .Widget-Bereich {

       Breite: 21,7391304348 %;

       schweben rechts;

       Rand rechts: 0;

      Anzeige: keine;

}

Wie es funktioniert

Wenn die CSS-Eigenschaft display auf none gesetzt ist, wird das Element aus der Ansicht einer anderen CSS-Eigenschaft entfernt, die verwendet werden kann, um die Sichtbarkeit der Seitenleiste auszublenden.

Wenn die Sichtbarkeit ausgeblendet ist, wird das HTML-Element in der Ansicht ausgeblendet. Sie sollten die Klasse Ihrer Design-Seitenleiste überprüfen, bevor Sie diese Technik wie unten gezeigt anwenden können:

Entfernen Sie die Seitenleiste von der WooCommerce-Produktseite

WooCommerce Entfernen Sie die Seitenleiste aus dem Storefront-Design der Produktseite

#1) Fügen Sie Code-Snippet hinzu, um die Seitenleiste des Storefront-Designs zu entfernen

Wenn Sie die obigen Code-Snippets in die Datei functions.php des Storefront-Designs einfügen, sollte Ihre Seitenleiste entfernt werden und wie im folgenden Bild gezeigt aussehen:

#2) Widgets entfernen Entfernen Sie WooCommerce aus dem Storefront-Design

Ein weiterer einfacher Trick zum Entfernen der Seitenleiste aus dem Storefront-Design besteht darin, sicherzustellen, dass der Hauptseitenleiste keine Widgets hinzugefügt werden, wie in der Abbildung unten gezeigt:

Entfernen Sie die Seitenleiste von der WooCommerce-Produktseite

Einpacken

Dieses Tutorial behandelt die besten Möglichkeiten, wie Sie die Seitenleiste von der Produktseite in WooCommerce entfernen können. Es gibt andere Möglichkeiten, wie Sie die Seitenleiste von der WordPress-Site entfernen können, wie in diesem Beitrag besprochen – wie man die WordPress-Seitenleiste entfernt . Es hilft auch zu verstehen, wie man eine Seitenleiste in WordPress hinzufügt, insbesondere für WordPress-Entwickler oder Entwickler von WooCommerce-Designs . Ich hoffe, Sie finden diese Tipps in diesem Beitrag nützlich.

Ähnliche Artikel

  1. So ändern Sie die Größe von WooCommerce-Produktbildern
  2. So entfernen Sie den Zoom-Effekt auf dem WooCommerce-Produktbild
  3. So stellen Sie ausgewählte Produkte in WooCommerce ein
  4. So entfernen Sie wurde zu Ihrem Warenkorb hinzugefügt Nachricht WooCommerce
  5. So fügen Sie das Entfernen-Symbol zur WooCommerce-Checkout-Seite hinzu
  6. So ändern Sie den vorrätigen Text in WooCommerce
  7. So entfernen Sie die Rechnungsdetails aus der WooCommerce-Kaufabwicklung
  8. So zählen Sie Artikel, die dem Warenkorb hinzugefügt wurden WooCommerce-Warenkorb-Zählcode
  9. So entfernen Sie das Downloads-Menü Meine Kontoseite WooCommerce
  10. So entfernen Sie eine Kategorie von der WooCommerce-Produktseite in 2 einfachen Optionen
  11. So entfernen Sie die Seitenleiste von der WordPress-Seite oder blenden die WordPress-Seitenleiste aus
  12. So fügen Sie in WooCommerce Text vor dem Preis hinzu » Text vor dem Preis hinzufügen
  13. So ändern Sie den Produktpreis programmgesteuert in WooCommerce
  14. So fügen Sie eine Beschreibung nach dem Preis in WooCommerce hinzu
  15. So ändern Sie den Text „Weiter zur Kasse“ in WooCommerce
  16. So erstellen Sie meine Kontoseite in WooCommerce
  17. So erstellen Sie die WooCommerce-Logout-Schaltfläche
  18. So fügen Sie Kategorien zu WooCommerce-Produkten hinzu
  19. So leiten Sie WooCommerce nach dem Checkout um: Zur benutzerdefinierten Dankesseite umleiten
  20. So zeigen Sie WooCommerce-Produkte nach Kategorie an