Volta e meia eu recebo perguntas do tipo:
Professor, para que o WooCommerce funcione no meu tema WordPress, é suficiente que eu apenas instale o plugin, ou eu preciso de alguma configuração adicional?
A esta pergunta, eu costumo responder que existem dois tipos de adaptação num tema WordPress para que o WooCommerce funcione. Uma é mais simples e exige geralmente que você somente instale o plugin. Ela funciona? Sim, funciona. Dá pra usar boa parte das funcionalidades sem muitos problemas.
No entanto, existe outro processo (mais completo) que consiste em deixar o tema 100% compatível com o WooCommerce. A documentação chama esse processo de “habilitar suporte ao WooCommerce”. E é isso que eu gostaria de discutir neste pequeno artigo.
Caso você deseje, pode também acompanhar a explicação num dos vídeos do meu canal do YouTube abaixo:
Declarando suporte ao WooCommerce num tema WordPress
Temas WordPress são como carros saídos de uma fábrica apenas com os itens básicos. Caso você queira incluir itens adicionais, precisará adicionar suporte a eles. O WordPress possui uma função bastante versátil que permite que isso seja feito chamada add_theme_support.
É possível adicionar suporte a várias funcionalidades optativas como formatos de posts, miniaturas de posts, logotipo customizado etc. Uma das possibilidades (não descrita na documentação oficial) é adicionar suporte ao plugin WooCommerce.
Isso permite que algumas utilidades do plugin fiquem disponíveis no tema, o que não seria possível se o tema não declarasse suporte.
Um exemplo bem simples é o formulário de envio de avaliações (reviews) de produtos. Por padrão, em temas que não declaram suporte, ele não está disponível. Em seu lugar, você vai encontrar um formulário simples de comentários (caso o seu tema também contenha chamadas para o formulário, se não nem isso estará disponível).
Outra desvantagem de temas que não declaram suporte ao WooCommerce é que eles não podem utilizar o sistema de sobrescrita de templates do plugin (em inglês template overriding). Esse sistema permite que o desenvolvedor faça alterações nos arquivos de template do WooCommerce, que são os arquivos que cuidam da apresentação de conteúdo na tela. Em outras palavras, os arquivos responsáveis pelo layout das páginas internas do plugin, como a página da loja e a do produto, por exemplo.
Temas que não declaram suporte trabalham com os arquivos de template padrões do WordPress. Assim, ao invés de trabalharem com um arquivo especializado do WooCommerce na página do produto, eles acabam usando o arquivo single.php. É por esta razão que o formulário de comentários é apresentado ao invés daquele de avaliação do produto.
Por sua vez, na página da loja, é usado o page.php.
Tudo isso muda quando o desenvolvedor declara suporte.
Fazer isso é bastante simples. Basta que uma simples linha de código seja adicionada no arquivo functions.php:
add_theme_support( 'woocommerce' );
Isso deve ser feito, preferencialmente, dentro de uma função que seja disparada no gancho de ação after_setup_theme. Por exemplo:
function meu_tema_config(){
add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'meu_tema_config', 0 );
Ao fazer isso, o desenvolvedor tem acesso ao mecanismo de reescrita de arquivos da pasta /plugins/woocommerce/templates, que é onde ficam todos os arquivos de apresentação do frontend do WooCommerce. Isso gera efeitos imediatos no frontend, sendo já possível visualizar o formulário de avaliações na página de qualquer produto.
Alterando arquivos de template do WooCommerce do jeito correto
No entanto, os arquivos presentes na pasta /plugins/woocommerce/templates não devem ser modificados diretamente. O fato é que toda e qualquer alteração feita nesses arquivos será perdida no momento em que o usuário do site atualizar o WooCommerce.
A maneira correta de alterar estes arquivos é seguir o que diz a documentação no topo de cada um dos arquivos de template. Veja como ela aparece no exemplo abaixo.
Em resumo, a instrução diz que a forma segura de reescrever o arquivo do template é criar uma pasta chamada woocommerce na raiz do seu tema e colocar uma cópia do arquivo lá dentro. Ao fazer isso, a cópia será chamada antes do arquivo original e será responsável por apresentar o conteúdo na tela.
Para descobrir qual arquivo de template você deve alterar, de início, você pode utilizar um dos diversos plugins do repositório do WordPress. Eu costumo usar um chamado “Show Current Template”. Assim, ao abrir a página da loja, eu posso ver que o arquivo de template sendo utilizado é o archive-product.php. Na página do produto, o arquivo de template utilizado é single-product.php.
Ao criar uma cópia do arquivo archive-product.php, você notará que a informação em “Template relative path” mudará para o caminho relativo à pasta do seu tema. Assim, saberá que pode fazer as alterações no arquivo de template de forma segura.
Alterando os arquivos de template do WooCommerce
Conheço ao menos três formas de alterar um arquivo de template:
- adicionando ou removendo trechos de código ao conteúdo do arquivo;
- alterando o comportamento dos ganchos e filtros de ação presentes no arquivo;
- reescrevendo totalmente o arquivo de template.
Destas, a que considero mais simples e fácil de entender é a primeira opção. E é sobre ela que falarei aqui neste artigo. Caso tenham interesse em saber mais sobre o assunto, conheçam o conteúdo do meu curso sobre WooCoomerce ou o meu livro sobre o mesmo assunto.
A forma mais direta de alterar a apresentação do layout é simplesmente movendo trechos do código de um local para outro, ou adicionando novos trechos de código PHP ou HTML. Convém ressaltar que nunca é aconselhável que você remova ganchos de ação (os trechos que começam com do_action) os os filtros (começados com apply_filters), pois eles podem ser úteis para o próprio WooCommerce ou para extensões do plugin.
Outro plugin bastante útil para que você descubra com qual gancho de ação lidar é o “Simply Show Hooks”. Ele permite visualizar no frontend qual gancho está sendo usado para produzir um determinado trecho da página.
Vamos supor que você queira mover o título de cada produto, que por padrão é apresentado logo abaixo da imagem e antes dos preços.
Primeiramente, vemos que o principal arquivo de template que controla a página é o archive-product.php. Abrindo o arquivo, descobrimos que ele não passa de um punhado de chamadas de ganchos de ação e filtros. Mas entre as linhas 62 e 71 (dependendo da versão do seu WooCommerce) há um loop que chama outro arquivo de template de nome content-product.php:
if ( wc_get_loop_prop( 'total' ) ) {
while ( have_posts() ) {
the_post();
/**
* Hook: woocommerce_shop_loop.
*/
do_action( 'woocommerce_shop_loop' );
wc_get_template_part( 'content', 'product' );
}
}
Cada volta do loop chama um produto da lista. Logo, o que podemos fazer é uma cópia do arquivo content-product.php e colocá-la na pasta woocommerce do nosso tema.
Ao abrir o arquivo, vemos novamente um punhado de ganchos de ação. Cada gancho é responsável por chamar um elemento <li> que engloba cada produto. Se você está usando o plugin “Simply Show Hooks”, verá que o gancho que gera o título se chama ‘woocommerce_shop_loop_item_title’. Para deslocar o título para cima, basta recortar a linha correspondente para o início do bloco PHP. O trecho se parece com isso:
/**
* Hook: woocommerce_shop_loop_item_title.
*
* @hooked woocommerce_template_loop_product_title - 10
*/
do_action( 'woocommerce_shop_loop_item_title' );
Ao salvar o arquivo, o resultado para cada produto individual será parecido com isto:
É claro que você precisará de um pouco de CSS para consertar o layout. Mas esta é a forma correta de modificar um arquivo de template do WooCommerce.
Próximos passos
Agora que você domina o básico, pode pensar em ir mais além, movendo outros elementos do layout, ou abrindo outras páginas internas geradas pelo plugin para alterá-las.
Leve em consideração que nem sempre isso será tão fácil como recortar e colar trechos de código. Alguns elementos do layout são mais difíceis de lidar do que outros. Em alguns momentos, por exemplo, você vai ter que investigar mais a fundo as pastas e arquivos contidos no diretório de templates.
Uma dica que eu dou é inspecionar um trecho da página com a ferramenta de desenvolvedor (Ctrl+Shift+I, ou F12), e procurar por esse trecho usando alguma ferramenta do seu editor de códigos.
Por exemplo, vamos supor que você queira fazer alterações no formulário de avaliações, mas não sabe qual arquivo de template é responsável por aquela área. Você pode inspecionar algum dos elementos dela e copiar algum trecho. No exemplo abaixo, copiamos a classe CSS ‘woocommerce-Reviews-title’ do elemento H2:
No VSCode ou no Sublime Text existe a possibilidade de encontrar um termo qualquer dentro de uma pasta usando a opção “Find in folder”. Uso esse artifício para procurar o nome da classe dentro da pasta templates:
Em seguida, encontro como resultado da pesquisa o arquivo de template desejado. No caso, o arquivo é o single-product-reviews.php.
Basta repetir o processo explicado neste artigo para fazer as alterações no arquivo.
Por fim, depois de ter uma boa experiência nesse tipo de alteração, você pode tentar os outros dois tipos de modificação mencionados neste artigo.
Comece conferindo a documentação do WooCommerce aqui: https://docs.woocommerce.com/document/woocommerce-theme-developer-handbook/#section-3
Caso queira uma abordagem mais prática, pode conferir o meu curso sobre criação de temas com WooCommerce.
Resumo
Existem pelo menos dois tipos de adaptações possíveis para que o WooCommerce funcione num tema qualquer.
O primeiro deles é bem simples. Basta instalar o plugin e sair usando. O segundo é mais completo e depende de declarar suporte.
Qual dos dois usar? Isso vai depender do tipo de customização que você deseja fazer no tema em relação ao WooCommerce. Se não precisar de customizar nada, pode só instalar o plugin. Caso contrário, tem que declarar suporte.
Espero que este artigo/tutorial tenha sido útil. Conte aí pra gente!