Home » WooCommerce » Wie man den WordPress-Block-Editor in WooCommerce-Produktseiten aktiviert

Wie man den WordPress-Block-Editor in WooCommerce-Produktseiten aktiviert

Vor ein paar Wochen hatte ich einen Kunden mit ganz speziellen WooCommerce-Anforderungen. Fast jedes Produkt hatte viele visuelle Informationen in der Beschreibung, so dass der reguläre WYSIWYG-Editor dort nicht viel Sinn machen würde. Wenn es nur eine Möglichkeit gäbe, den Block-Editor in WooCommerce-Produktseiten zu verwenden… Und es gibt sie!

Best WordPress hosting 2024

Heute zeige ich Ihnen, wie Sie das WooCommerce-Produktbeschreibungsfeld in ein Block-Editor-Feld umwandeln können. So wird alles, was in der Registerkarte Produktbeschreibung steht, auf die gleiche Weise angezeigt wie in normalen WordPress-Beiträgen und -Seiten. Und du wirst keine Plugins von Drittanbietern dafür benötigen. Und wenn Ihr WordPress-Theme richtig aufgebaut ist, sollte es nichts kaputt machen – es wird wie erwartet funktionieren.

So ersetzen Sie das WooCommerce-Produktbeschreibungsfeld durch einen Block-Editor

Standardmäßig sieht das WooCommerce-Produktbeschreibungsfeld wie ein normales WYSIWYG-Feld aus, etwa so:

woocommerce default product description editor

Wenn wir das Produktbeschreibungsfeld durch den WordPress-Blockeditor ersetzen, sieht es so aus:

change woocommerce product description editor to block editor

Jetzt können Sie alle WordPress-Blöcke in WooCommerce-Produktseiten verwenden. Auf die gleiche Weise, wie Sie sie in normalen WordPress-Beiträgen und -Seiten verwenden.

Wie aktivieren Sie also den Block-Editor in WooCommerce? Das ist ein einfacher Trick. Gehen Sie imWordPress-Administrationsbereich zu Darstellung >> Theme File Editor (oder Tools >> Theme File Editor).

Öffnen Sie dort die Datei functions.php auf der rechten Seite des Bildschirms und scrollen Sie bis zum Ende des Inhalts.

Fügen Sie dann die folgenden Codezeilen ein:

// ENABLE WORDPRESS EDITOR IN WOOCOMMERCE start
add_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 );
function activate_gutenberg_product( $can_edit, $post_type ) {
 if ( $post_type == 'product' ) { $can_edit = true; }
 return $can_edit;
}

add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' );
add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' );
function enable_taxonomy_rest( $args ) {
 $args['show_in_rest'] = true;
 return $args;
}
// ENABLE WORDPRESS EDITOR IN WOOCOMMERCE end

So sollte es in Ihrer functions.php-Datei aussehen:

woocommerce enable block editor

Sobald Sie die Änderungen durch Klicken auf Datei aktualisieren speichern, funktioniert Ihre WooCommerce-Produktseite im Block-Editor-Modus. Um die alten Produkte in Ihrem Shop brauchen Sie sich nicht zu kümmern. Ihr Inhalt wird automatisch in den Blockeditor geladen.

Tags:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK