Home » WooCommerce » Como ativar o editor de blocos do WordPress nas páginas de produtos do WooCommerce

Como ativar o editor de blocos do WordPress nas páginas de produtos do WooCommerce

Há algumas semanas, tive um cliente com necessidades bastante específicas de WooCommerce. Quase todos os produtos tinham muitas informações visuais na descrição, de modo que o editor WYSIWYG comum não faria muito sentido ali. Se ao menos houvesse uma maneira de usar o editor de blocos nas páginas de produtos do WooCommerce… E existe!

Hoje, mostrarei como transformar o campo de descrição do produto do WooCommerce em um campo de editor de blocos. Assim, tudo o que estiver na guia de descrição do produto será mostrado da mesma forma que em posts e páginas normais do WordPress. E você não precisará de nenhum plug-in de terceiros para isso. E se o seu tema do WordPress for criado corretamente, isso não deverá quebrar nada – funcionará como esperado.

Como substituir o campo de descrição do produto do WooCommerce pelo editor de blocos

Por padrão, o campo de descrição do produto do WooCommerce se parece com um campo WYSIWYG normal, como este:

woocommerce default product description editor

Quando mudarmos o campo de descrição do produto para o editor de blocos do WordPress, ele terá a seguinte aparência:

change woocommerce product description editor to block editor

Agora você poderá usar todos os blocos do WordPress nas páginas de produtos do WooCommerce. Da mesma forma que você os usa em posts e páginas normais do WordPress.

Então, como habilitar o editor de blocos no WooCommerce? Esse é um truque fácil. Vá para Appearance >> Theme File Editor (ou Tools >> Theme File Editor) nopainel de administração do WordPress.

Best WordPress hosting 2024

Quando estiver lá, abra o arquivo functions.php no lado direito da tela e role até a parte inferior do conteúdo.

Em seguida, adicione estas linhas de código:

// HABILITE O EDITOR WORDPRESS NO 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;
}
// ATIVAR EDITOR WORDPRESS NO WOOCOMMERCE end

Deve ficar assim em seu arquivo functions.php:

woocommerce enable block editor

Depois de salvar as alterações clicando em Update File, sua página de produto do WooCommerce funcionará no modo de editor de blocos. E você não precisa se preocupar com os produtos antigos em sua loja. O conteúdo deles será carregado automaticamente no editor de blocos.

Fathom analytics