Gutenberg für WooCommerce

Aktiviere den Gutenberg Editor für WooCommerce Produkte

Der Gutenberg Block Editor kann auch für die WooCommerce Produktbeschreibung genutzt werden. Leider nicht als Standard, aber mit einem kleinen Stückchen Code.

Ich zeige dir hier zwei Wege, wie du den Code für die Nutzung des WordPress Block Editors nutzen kannst.

Achtung: Führe vorher unbedingt ein Backup aus! Kleinste Fehler können deine Website zerstören.

Load WordPress Sites in as fast as 37ms!

Der Code

Das ist das Code-Snippet, damit Gutenberg auch für die WooCommerce Produkte genutzt werden kann:

// Enable Gutenberg editor for WooCommerce
function j0e_activate_gutenberg_product( $can_edit, $post_type ) {
 if ( $post_type == 'product' ) {
        $can_edit = true;
    }
    return $can_edit;
}
add_filter( 'use_block_editor_for_post_type', 'j0e_activate_gutenberg_product', 10, 2 );

// enable taxonomy fields for woocommerce with gutenberg on
function j0e_enable_taxonomy_rest( $args ) {
    $args['show_in_rest'] = true;
    return $args;
}
add_filter( 'woocommerce_taxonomy_args_product_cat', 'j0e_enable_taxonomy_rest' );
add_filter( 'woocommerce_taxonomy_args_product_tag', 'j0e_enable_taxonomy_rest' );

Das Script als Gist: https://gist.github.com/gmmedia/b895225d3eefb42bdfc573836b776b86

Plugin

Für viele ist die Nutzung eines Plugins die bessere Methode. Installiere dir im WordPress Admin das Plugin Code Snippets. (Wie installiere ich ein WordPress Plugin?)

Gutenberg for WooCommerce - Insert code in Code Snippets plugin
Gutenberg für WooCommerce – Code im Plugin Code Snippets einfügen

Fünf Schritte zum Gutenberg Editor für WooCommerce Produktbeschreibungen.

  1. Neues Snippet hinzufügen
  2. Einen sprechenden Namen für das Snippet eingeben
  3. Den Code von oben in den Code-Bereich einfügen
  4. Die Option „Nur im Adminbereich ausführen“ auswählen
  5. Speichern und aktivieren

Alternativ kannst du natürlich jedes andere WordPress-Plugin verwenden. Ich nutze Advanced Scripts:

Code Snippets mit Advanced Scripts nutzen.
Code Snippets mit Advanced Scripts nutzen.

Der Vorgang ist der gleiche, nur optisch unterschiedlich. Du findest das Tool nach dem Installieren unter Werkzeuge > Advanced Scripts.

functions.php

Code in die Datei functions.php einfügen
Code in die Datei functions.php einfügen

Erfahrene Nutzer können den Code auch direkt in der functions.php ihres Child Themes speichern. Entweder direkt im WordPress Admin unter Design > Theme-Editor > functions.php, oder mit einem Texteditor und FTP.

Fazit Gutenberg für WooCommerce

Auch wenn WooCommerce mal langsamer voranschreitet, können moderne WordPress-Features mit etwas Nachhilfe genutzt werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

 

6 Kommentare

  1. Das ist so genial!
    Ich habe mir die Finger wund geklopft auf der Suche nach einem passenden Plugin, das die tollen Gutenberg Blöcke ersetzen kann. Es ist auch frustrierend, wenn man die schon auf der Seite nutzt, sie aber nicht in Woocommerce verwenden kann.
    Ich fühl mich jetzt schon viel besser, fast ökologisch, weil nachhaltig verwertet ;-)
    Ehrlich, klasse.
    Und es funktioniert auch perfekt.
    Danke, Danke und nochmal Danke!

  2. Hallo Jochen, danke für die Anleitung. Darf ich dich fragen, ob Gutenberg dann auch für die Woocommerce-Kategorie-Seite nutzbar ist? Ich möchte gerne meine Produktkategorieseiten individuell gestalten. Vor allem einen Erklärungstext nach den Produkten einfügen können. Dafür würde ich ungerne einen aufgeblähten Builder wie Elementor nutzen. Ich habe jetzt den simplen Nimble Builder im Einsatz, den ich eigentlich super dafür finde. Leider befürchte ich, dass er keine Zukunft hat. Außerdem ist er ein wenig SEO sperrig und harmoniert nicht wirklich mit Yoast. Hast du vielleicht einen Tipp. Lieben Dank, Stef

    1. Hallo Stef,
      leider kann der Block-Editor nicht für Kategorien und Tags aktiviert werden. Darauf warten wir alle :)
      Ich nutze das Kadence Theme für und meine Kunden und die eigenen Websites. Da setzte ich das mit den Kadence Elements um.

      Für Astra gibt es ein ähnliches System, die Custom Layouts.

      Alternativ kannst du die Kategorieseite immer noch in einer temporären Seite erstellen und dann den Inhalt einfach in das Textfeld der Kategorie einfügen.

      lg
      Jochen