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:
Quando mudarmos o campo de descrição do produto para o editor de blocos do WordPress, ele terá a seguinte aparência:
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.
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:
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.