WooCommerce: Trabalhando com CSS da forma correta a partir da versão 2.3

Ao construir um tema para funcionar junto com o WooCommerce é extremamente importante trabalhar da forma correta com CSS, assim você evita problemas com atualizações ou com estilos que não sobrescrever corretamente o CSS do WooCommerce.

Desde a versão 2.1 do WooCommerce a forma de trabalhar com CSS mudou um pouco e agora na versão 2.3 mudamos de Less para Sass e ainda utilizando a biblioteca Bourbon, o que é ótimo, pois abre uma infinidade de possibilidades de personalização sem precisar alterar muito código.

Este tutorial tem como finalidade ensinar como trabalhar com Sass no WooCommerce 2.3 que deve ser lançado no começo de 2015, com isso já deixando todo mundo preparado como fazer isso, mas é claro, vocês podem utilizar algumas das dicas deste tutorial nas versões 2.1 e 2.2.

Trabalhando com CSS da forma correta no WooCommerce:

Primeiro de tudo certifique-se de instalar Sass no seu computador, existem vários métodos para fazer a instalação (onde eu particularmente prefiro por linha de comando), veja como instalar seguindo o tutorial de instalação do Sass e é claro, certifique também de instalar o Bourbon.

Finalmente com tudo instalado você deve baixar o WooCommerce 2.3 (esta versão não foi lançada ainda até a data de publicação deste post, como eu já informei acima), copie todos os arquivos da pasta woocommerce/assets/css/ para o seu tema, por exemplo em uma pasta chamada inc/woocommerce/css.

Com isso no functions.php do seu tema você será capaz de registrar onde estão os novos arquivos e com isso desativar os estilos do plugin:

E pronto, agora o WooCommerce já sabe que deve carregar os arquivos que estão no seu tema e isso irá sobreviver a qualquer atualização.

Agora basta trabalhar com Sass, você pode até mesmo automatizar as tarefas utilizando Grunt e para alterar todo o esquema de cores do WooCommerce é possível pelo arquivo _variables.scss 🙂