O WooCommerce é um plugin capaz de transformar qualquer site desenvolvido em WordPress em uma loja virtual super potente. Mas para adaptar o seu tema para o sistema e garantir que o seu layout seja visualizado corretamente existem alguns truques, funções e ações fundamentais para que tudo funcione direitinho. A documentação oficial, embora bem completa, pode ser um pouco confusa pois não está organizada em uma ordem cronológica. Pensando nisto preparei este artigo recheado de dicas úteis para que você possa criar temas em WooCommerce facilmente. Vamos a ele!
Aviso aos navegantes!
Para compreender este artigo você precisará de dois requisitos básicos:
-
Saber criar temas para WordPress.
-
Conhecer as funções básicas do WooCommerce.
Utilizando seu próprio tema
Existem duas opções básicas para ter um tema personalizado: baixar um tema padrão do WooCommerce e realizar modificações na estrutura ou instalar o plugin em um tema comum de WordPress. Vamos trabalhar com a segunda opção por fins didáticos. Mas eu recomendo experimentar as duas possibilidades para que você possa escolher a sua favorita.
O WooCommerce teoricamente é desenvolvido para funcionar corretamente com qualquer tema de WordPress. Tudo que você precisa fazer, teoricamente, é instalar o plugin e copiar os arquivos da pasta **wp-content/plugins/woocommerce/templates/ **para /wp-content/themes/nomedoseutema.
Mas é claro. Se fosse simples assim não iríamos precisar deste artigo, certo? É bem provável que o seu tema fique um Frankenstein desconfigurado, o layout quebre ou até mesmo simplesmente não funcione. Mas, para tudo tem uma solução! Hoje vamos aprender como modificar a estrutura do WooCommerce para que você possa ter uma loja virtual customizada para chamar de sua.
O meu tema não oferece suporte ao WooCommerce. E agora?
Se você acabou de instalar o WooCommerce em um tema não-padrão é provável que aparece uma a mensagem em roxo como “Seu tema não oferece suporte ao WooCommerce – Se você encontrar problemas de design, por favor, leia o guia de integração ou escolha um tema do WooCommerce 🙂“. Isto acontece pois seu tema pode estar utilizando uma estrutura muito diferente e o plugin não tem como adivinhar que página é o que… Não entre em pânico. Existem duas maneiras para solucionar este problema: substituir a estrutura do seu tema e/ou utilizar hooks.
Substituindo o loop
-
Duplique o arquivo page.php do tema (ou o tipo de página personalizada que você deseja utilizar) e renomeio o arquivo para woocommerce.php. A localização dele deve ser a seguinte wp-content/themes/nomedoseutema/woocommerce.php.
-
Procure pelo loop do seu post. Normalmente é algo parecido com:
- Substitua este código por:
- Pronto! Sua loja já deve estar funcionando. Por padrão, utilizando o WooCommerce em português, a url ficará em www.seudominio.com.br/loja.
Substituir o loop é rápido e fácil. O ponto contra desta saída é que todos os tipos de post e taxonomias do WooCommerce ficarão com o mesmo layout… Se você quiser criar templates diferentes para cada seção será necessário partir para a próxima etapa.
Utilizando Hooks
O WooCommerce (assim como o próprio WordPress) trabalha utilizando uma estrutura de hooks ou, em português, ganchos. A idéia aqui é chamar um determinado elemento de forma rápida através de uma função. Desta maneira você pode manipular o código (e criar suas próprias páginas), sem necessariamente modificar os arquivos do core. Esta solução é mais complexa e flexível do que simplesmente substituir o loop, mas também pode ser um pouco mais complicada se você for um iniciante.
Primeiro é necessário desconectar os ganchos padrões do WooCommerce. Para isto basta acrescentar estas linhas no arquivo functions.php
Depois conecte suas próprias funções para mostrar o conteúdo do seu tema. Por exemplo:
Não esqueça de substituir as classes e IDs pelas seções do seu tema.
Criando hooks personalizados
O WooCommerce é um plugin bem completo. Mas as vezes você deseja inserir alguma funcionalidade diferente da do tema padrão. Você pode fazer isto criando novos hooks personalizados através do arquivo functions.php.
Existem dois tipos de hooks: ganchos de ações e ganchos de filtros.
Action hooks
Permite que você insira um código customizado. Você pode criar os seus próprios ganchos de ação através do arquivo functions.php. Para isto basta seguir esta estrutura:
Então chame a função no seu layout obedecendo a seguinte sintaxe:
Filter Hooks
Os ganchos de filtros servem para retornar e/ou manipular uma determinada variável, como por exemplo o preço de um produto. De maneira bem semalhante a ações, você pode criar seus próprios filtros através do nosso bom e velho amigo functios.php
E para chamar a função no seu layout:
Mas nem sempre é preciso reinventar a roda. O WooCommerce possui uma lista bem grande de hooks para diversas situações. A seção snippets da documentação do WooCommerce também possui hooks que podem ser úteis para o seu tema. Vale a pena favoritar e consultar antes de criar uma nova função.
Estrutura básica de um Template
Trabalhar com hooks é uma maneira prática de criar suas próprias páginas de template. Mas as vezes você quer simplesmente fazer uma modificação em alguma estrutura já existente. Na pasta /woocommerce/templates/ você encontrará a estrutura do front-end da loja, bem como os templates para e-mail marketing do seu projeto.
**archive-pro
duct.php**
cart/
cart-empty.php
cart.php
cross-sells.php
mini-cart.php
shipping-calculator.php
shipping-methods.php
totals.php
checkout/
cart-errors.php
form-billing.php
form-checkout.php
form-coupon.php
form-login.php
form-pay.php
form-shipping.php
review-order.php
thankyou.php
content-product_cat.php
content-product.php
content-single-product.php
emails/
admin-new-order.php
customer-completed-order.php
customer-invoice.php
customer-new_account.php
customer-note.php
customer-processing-order.php
customer-reset-password.php
email-addresses.php
email-footer.php
email-header.php
email-order-items.php
loop/
add-to-cart.php
loop-end.php
loop-start.php
no-products-found.php
orderby.php
pagination.php
price.php
rating.php
result-count.php
sale-flash.php
myaccount/
form-change-password.php
form-edit-address.php
form-login.php
form-lost-password.php
my-account.php
my-address.php
my-downloads.php
my-orders.php
order/
form-tracking.php
order-details.php
tracking.php
shop/
breadcrumb.php
errors.php
form-login.php
messages.php
sidebar.php
wrapper-end.php
wrapper-start.php
single-product/
add-to-cart/
external.php
grouped.php
quantity.php
simple.php
variable.php
meta.php
price.php
product-attributes.php
product-image.php
product-thumbnails.php
related.php
review.php
sale-flash.php
share.php
short-description.php
tabs/
additional-information.php
description.php
tabs.php
title.php
up-sells.php
single-product-reviews.php
single-product.php
taxonomy-product_cat.php
taxonomy-product_tag.php
Em tese basta editar estes arquivos para alterar a estrutura. Mas tome cuidado: se você simplesmente alterar e salvar por cima o seu tema vai funcionar, mas toda vez que o plugin for atualizado suas modificações serão perdidas… Se você quiser fazer alterações de forma segura duplique o arquivo desejado e salve na pasta nomedoseuthema/woocommerce/. Desta maneira você não perderá suas modificações em uma atualização futura.
Ex: Vamos supor que você queira modificar o carrinho de compras. Copie o arquivo localizado em /templates/cart/cart.php para nomedoseutema/woocommerce/cart/cart.php.
Modificando o CSS
OK. Vamos supor que você já tenha editado todos os arquivos PHP e esteja satisfeito com a estrutura da loja. Mas o visual provavelmente está todo quebrado! É preciso agora modificar o CSS do seu tema para criar estilos de botões, links, texto, etc.
Dentro da pasta assets/css/ você vai encontrar duas folhas de estilo: woocommerce.less e woocommerce.css A versão .css está minificada, ou seja, o ideal é trabalhar com o arquivo pré-processado (extensão .less) e depois compilar (saiba mais sobre LESS). Se você não curte muito utilizar LESS não se preocupe! Você pode também descomprimir o css padrão.
Aqui vale o mesmo conselho dos outros arquivos do tema: não sobrescreva os arquivos ou eles irão para o grande limbo da internet na próxima atualização do WooCommerce! Ao invés disto crie seus próprios arquivos CSS e/ou LESS a partir de cópias dos originais e desative as folhas antigas. Como fazer isto? Através do arquivo functions.php. Basta inserir a seguinte linha de código:
Depois de desativado é só continuar trabalhando com a cópia dentro da pasta do seu tema (que você fez no inicio do parágrafo, lembra?)
Declararando seu suporte ao WooCommerce
Uma vez que você esteja satisfeito com o visual e as funcionalidades do seu tema, está na hora de remover aquela mensagem chatinha de erro (“seu tema não é compatível blá blá blá…”) e declarar o seu suporte ao WooCommerce. Para isto, basta colar esta linha de código no functions.php
E pronto! Agora é só realizar as configurações básicas, acrescentar produtos e começar a vender. Boa sorte! 🙂