3 etapas para integrar seu próprio tema com o WooCommerce

Categoria: Woocommerce Tags: Postado em: 15 de agosto de 2018 320

Eu tentei fazer este tutorial tão simples e claro quanto possível. Apenas informações necessárias sobre theming no WooCommerce.

Na verdade, não há ações adicionais necessárias para fazer o WooCommerce funcionar com seu tema personalizado. Às vezes, se o seu tema tiver correto os modelos single.phppage.php, será o suficiente.

Toda a funcionalidade WooCommerce integra com códigos de acesso e ganchos de ação. Também possui seus próprios arquivos CSS.

Etapa 1 – Declarar Suporte ao WooCommerce

Quando você ativa seu tema personalizado, provavelmente verá este aviso.

Eu não recomendo apenas descartá-lo, o primeiro passo para a integração do tema é adicionar a seguinte linha ao seu arquivo functions.php do tema :

add_theme_support ( 'woocommerce' ) ;

Se você fez isso corretamente, a mensagem deve desaparecer após a atualização da página.

Etapa 2 – Folhas de Estilo Padrão WooCommerce

O WooCommerce se conecta ao seu site 3 arquivos CSS, que são usados ​​para estilizar suas próprias páginas do sistema, como Área do Cliente, Carrinho, Checkout, Páginas do produto.

Mas nada funciona sem body_class ()

Tudo começa com a função body_class(). Quero dizer, qualquer regra no CSS do WooCommerce começa com classes que estão conectadas ao corpo da página. Se você não tiver a linha abaixo, nada acontece.

<body <?php body_class() ?>>

Se o seu site <body>já tem classes declarada e você não pode apenas removê-la, passe suas classes para o único parâmetro da função, como neste exemplo:

<body <?php body_class( 'point class_2' ) ?>>

Como remover o CSS padrão

Se você quiser remover o CSS padrão do WooCommerce ou substituí-lo, você pode usar este pedaço de código no seu arquivo functions.php do tema .

add_action (  'wp_enqueue_scripts' , 'point_remove_woo_styles' , 20  ); //prioridade é 20 
 
function point_remove_woo_styles ( )  { 
 	wp_deregister_style (  'woocommerce-general'  ); // arquivo CSS principal 
 	wp_deregister_style (  'woocommerce-smallscreen'  ); // para max-width: 768px 
 	wp_deregister_style (  'woocommerce-layout'  ); // para o layout apenas 
}

Também é possível desativar todos os estilos de uma só vez:

add_filter ( 'woocommerce_enqueue_styles' , '__return_false' );

Etapa 3 – sobrescrevendo modelos

Você pode copiar qualquer modelo  plugins/woocommerce/templatespara themes/{SEU TEMA}/woocommerce e manter a mesma estrutura de arquivo e o arquivo copiado irá substituir o arquivo WooCommerce padrão.

 

 

Na sua esquerda verá a pasta do woocommerce e na sua direita a pasta que será colocada em seu tema.

Eu sei, você pode dizer: “Uau, eu posso mudar tudo agora”, mas tente evitar uma grande quantidade de mudanças porque quando o WooCommerce for atualizado, você deve cuidar de todos os modelos desatualizados (somente no caso desses modelos serem originais mudará durante a atualização). Vá para WooCommerce> Status do sistema para verificá-lo.

woocommerce.php / woocommerce_content ()

Eu não uso este arquivo em meus temas, mas às vezes você pode encontrá-lo quando for  trabalhar com alguns modelos prontos.

woocommerce.php é o arquivo que é usado para exibir páginas de produto único e páginas de archive de produto e tem a prioridade mais alta que os modelos single-product.phparchive-product.php.

Geralmente tem o conteúdo semelhante ao arquivo page.php com a função loop WooCommerce woocommerce_content()dentro.

 

 

Gostou? compartilhe nas redes!! ;)

Deixe seu comentário

Compartilhar5
Twittar
+1
Compartilhar
Pin
5 Compart.