Desativando estilos CSS de blocos WooCommerce

O WooCommerce é um dos plugins de comércio eletrônico mais populares para WordPress. Por padrão, ele fornece vários blocos para o editor de Blocos. O WooCommerce também fornece estilos para esses blocos. Os estilos são carregados em um front-end e back-end do seu site. Pode haver situações em que você precisa desativar esses estilos de bloco do WooCommerce.

Atualmente, estamos trabalhando em um novo tema, que será baseado principalmente no WooCommerce e no editor de blocos. Nosso objetivo é alterar completamente o design dos blocos WooCommerce que acompanham o plug-in. Queremos garantir que esses estilos correspondam ao design do tema.

Razões para desativar os estilos

Obviamente, podemos substituir os estilos padrão dos blocos WooCommerce na folha de estilo do tema, mas há duas coisas principais que nos impedem de fazê-lo:

• O tema carregará estilos que não são realmente necessários.
• Haverá muitas substituições de CSS que causam mais trabalho e causam mais confusão.

Portanto, em vez de substituir os estilos de bloco do WooCommerce, decidimos removê-los completamente do tema. Abaixo, você pode encontrar uma solução sobre como desativar esses estilos em seu próprio site WordPress.

Desativar estilos CSS de blocos no front-end do WooCommerce

O WooCommerce carrega estilos de bloco quando você ou seus usuários visitam o site. Portanto, você não precisa se preocupar com o estilo de blocos do WooCommerce. Já está feito para você. Se você não precisar desses estilos, poderá desativá-lo usando este snippet de código:

/**
 * Disable WooCommerce block styles (front-end).
 */
function leowp_disable_woocommerce_block_styles() {
  wp_dequeue_style( 'wc-block-style' );
}
add_action( 'wp_enqueue_scripts', 'leowp_disable_woocommerce_block_styles' );

Desativar estilos CSS de blocos no back-end do WooCommerce

O WooCommerce também carrega estilos de bloco em um back-end do seu site. Portanto, você pode usar esses blocos no Gutenberg (editor de blocos). A única diferença é que ele carrega dois arquivos de estilo em vez de um: estilos de editor de bloco e estilos de bloco. Ele pode ser desativado usando este trecho de código:

/**
 * Disable WooCommerce block styles (back-end).
 */
function leowp_disable_woocommerce_block_editor_styles() {
  wp_deregister_style( 'wc-block-editor' );
  wp_deregister_style( 'wc-block-style' );
}
add_action( 'enqueue_block_editor_assets', 'leowp_disable_woocommerce_block_editor_styles', 1, 1 );

Antes de adicionar esses trechos de código no arquivo functions.php do seu tema, verifique se você criou seus próprios estilos para os blocos do WooCommerce. Caso contrário, esses blocos não serão estilizados.