Esta é a introdução de um desenvolvedor iniciante ao plugin WordPress WooCommerce. Neste post, veremos o básico de como o WooCommerce funciona e como podemos personalizá-lo em nosso tema ou plugin usando ganchos e modelos.
Em primeiro lugar, o WooCommerce oferece grande flexibilidade para desenvolvedores de temas e plugins ajustarem sua funcionalidade. Para modificações simples, você geralmente tem pelo menos duas alternativas. A escolha de como você modifica depende de como você prefere trabalhar, quão flexível e legível seu código deve ser e como você prefere continuar fazendo a manutenção futura do seu site quando se trata de atualizações de plugins (e WordPress).
Antes de começar a modificar a funcionalidade do WooCommerce via código, você deve verificar se o que deseja alcançar é possível alterando as configurações. O WooCommerce vem com uma enorme página de configurações, permitindo que você mude bastante. Nas versões mais recentes, o WooCommerce também adicionou e moveu configurações adicionais para o WordPress Customizer. Aqui você poderá, por exemplo, ajustar o número de colunas e ajustar alguns dos campos de checkout.
Modelos WooCommerce
O WooCommerce oferece uma grande variedade de arquivos de modelo nos quais você, como desenvolvedor de temas, pode substituir. A maneira como você faz isso é fazendo uma cópia do modelo original do WooCommerce em sua pasta de temas. E então você faz suas alterações no arquivo em seu tema.
Navegue até a pasta do plugin WooCommerce em /wp-content/plugins/woocommerce/. Aqui você encontrará a subpasta templates. Todo o conteúdo dos arquivos (há muito!) ao /wp-content/plugins/woocommerce/templates/incluir suas subpastas são todos os arquivos de modelo que você pode substituir em seu tema.
Para que o WooCommerce encontre seus modelos modificados, você precisa de uma subpasta no diretório raiz do seu tema chamada woocommerce. Se o slug do seu tema for ‘awhitepixel’, sua pasta deve estar localizada em /wp-content/themes/awhitepixel/woocommerce/. Dentro desta pasta você pode colocar suas cópias modificadas dos arquivos de template do WooCommerce. Tenha em mente que os arquivos de modelo localizados em subpastas precisam ser colocados nas subpastas correspondentes na sua pasta woocommerce. Por exemplo; substituir o WooCommerce /templates/single-product/add-to-cart/simple.phpexige que você coloque sua cópia simple.phpna /woocommerce/single-product/add-to-cart/pasta do seu tema.
Você também deve ter notado que há muitas ações e filtros nos modelos. A maioria deles são preenchidos com do_action()s. Para o uso ideal do WooCommerce, você não deve remover nenhum dos ganchos nos modelos. Na maioria dos casos, você pode considerar alterar a funcionalidade usando ações e filtros em vez de substituir modelos. Deixe-me explicar o porquê!
Observação importante sobre a substituição de modelos e atualizações de plug-ins
Para um iniciante, substituir um modelo pode parecer a solução mais fácil e intuitiva. Por que mexer com ganchos se você pode alterar diretamente o modelo que gera a coisa que você deseja alterar? Resposta: Porque essa estratégia gera mais trabalho para manter a manutenção da sua loja virtual.
O WooCommerce é atualizado com frequência e, às vezes, atualiza um arquivo de modelo. Para manter sua loja virtual atualizada, você também precisa atualizar os arquivos de modelo substituídos em seu tema. Normalmente, você precisará substituir todo o arquivo de modelo pelo arquivo atualizado mais recente e, em seguida, adicionar novamente suas alterações. Isso rapidamente se torna muito mais difícil se você não se lembrar de todas as alterações feitas. Acredite em mim, que tem anos de experiência na correção de arquivos de modelo WooCommerce de outros desenvolvedores durante as atualizações de plugins. Confie em mim, não é um trabalho divertido de fazer!
Agora que sabemos que os ganchos são uma estratégia melhor, vamos ver como fazer isso.
Ganchos WooCommerce
O WooCommerce oferece uma enorme quantidade de ganchos, tanto de ações quanto de filtros. Usar ganchos é realmente muito simples!
Com ganchos, você também pode alterar muito mais do que apenas a saída dos modelos. Você pode personalizar preços de produtos, campos de checkout ou fazer sua loja virtual fazer algo quando um produto for adicionado ao carrinho.
Se você está desenvolvendo um plugin, os ganchos também são o único caminho a percorrer. Você só pode substituir modelos em um tema, não em um plug-in. (Ok, existem maneiras de superar isso, mas é muito incomum e não recomendado).
Se você olhou em alguns dos arquivos de modelo do WooCommerce, deve ter visto muitos arquivos do_action(). Estes são ganchos; pontos de verificação que você pode conectar e adicionar seu código ou modificar uma variável. Se você não tiver certeza sobre como os ganchos funcionam, tenho um post que explica isso em profundidade.
Se você deseja produzir algo, por exemplo, um texto ou algo semelhante, procure por ações (do_action()). Por exemplo, produzindo algo no modelo de carrinho, você tem a opção de se conectar a woocommerce_before_cart, woocommerce_before_cart_table, woocommerce_before_cart_contents, woocommerce_cart_contents, woocommerce_cart_actions, woocommerce_after_cart_contents, woocommerce_after_cart_table, woocommerce_cart_collateralsou woocommerce_after_cart. Basta escolher aquele que está posicionado onde você deseja sua saída. Este é um exemplo de exibição de um texto antes da tabela e do formulário na página do carrinho:
add_action('woocommerce_before_cart', function() {
_e('Here are the products you have added in the cart so far', 'textdomain');
});Os filtros (procure por apply_filters()) são para modificar uma saída ou uma variável. Um uso comum de filtros no WooCommerce é modificar o texto "Adicionar ao carrinho" nos botões de compra. O WooCommerce oferece vários filtros para isso, permitindo que você controle o texto em diferentes páginas. Por exemplo, você pode personalizar o texto no loop da loja ou na visualização de um único produto. Os filtros geralmente fornecem vários argumentos para maior controle; por exemplo, o objeto do produto. Veja um exemplo simples de como alterar os textos "Adicionar ao carrinho" na visualização de um único produto:
add_filter('woocommerce_product_single_add_to_cart_text', function($original_text, $product) {
return __('Buy this', 'textdomain');
}, 10, 2);Com algum conhecimento de como os ganchos funcionam e simplesmente olhando dentro dos arquivos de modelo, você pode encontrar muitas funcionalidades facilmente alteráveis. Obviamente WooCommerce oferece modificações muito mais avançadas, alterando preços, métodos de pagamento, modificações de produtos ou importações, tudo possível com o uso de ganchos.
Conclusão
O objetivo deste post é dar ao iniciante o básico de como fazer modificações no WooCommerce e as consequências de como você faz as alterações. Eu sempre recomendo usar ganchos sobrescrevendo arquivos de modelo, a menos que seja absolutamente necessário.
O próximo passo é mergulhar nas modificações avançadas conhecendo os ganchos, processos e objetos do WooCommerce. Como o WooCommerce é a plataforma de comércio eletrônico mais popular que existe, há muitos recursos e exemplos de código disponíveis na web. Dê uma olhada na categoria Woocommerce aqui neste site para saber mais também.