Como Criar um Tema Filho WooCommerce

Vamos supor que você tem uma loja WooCommerce funcionando.

Se você está usando o tema oficial Storefront, ele pode até parecer bastante profissional. No entanto, você ainda pode querer personalizar a aparência da sua loja WooCommerce para corresponder à sua visão.

A melhor solução é frequentemente criar um tema filho WooCommerce. Isso porque um tema filho permite que você faça alterações no seu tema original sem editá-lo diretamente. Ele simplifica o processo de personalização da aparência da sua loja e elimina riscos potenciais ao seu tema e loja.

Neste artigo, vamos ver como você pode estilizar sua loja WooCommerce usando temas. Em seguida, mostraremos como criar seu próprio tema filho em apenas cinco passos. Vamos começar!

Uma Visão Rápida dos Temas WooCommerce

Com o lançamento do plugin WooCommerce em 2011, o WordPress tornou-se a plataforma de e-commerce mais popular. Atualmente, o WooCommerce é usado para alimentar 25% de todas as lojas online, tornando-o 6% mais popular que seu concorrente mais próximo.

Um dos elementos que tornou o WooCommerce tão bem-sucedido é a facilidade de criar uma loja única com o mínimo de esforço. No entanto, isso por si só não explica a popularidade da plataforma.

Outro fator enorme no sucesso do WooCommerce é as possibilidades de personalização quase infinitas que ele oferece. Quando combinado com o tema certo, você tem acesso a muita flexibilidade de design.

WooCommerce é compatível com quase todos os temas WordPress. No entanto, a maioria deles não será otimizada para lidar com as características únicas do plugin.

Felizmente, o tema Storefront é uma excelente opção. Este é o tema oficial do WooCommerce, desenvolvido especificamente para integrar com o plugin. Ele tem uma aparência atraente logo de início, com um design simples e limpo que coloca o foco nos seus produtos:

Este design básico também faz do Storefront uma base ideal para personalização. É aqui que os temas filhos se tornam úteis, o que veremos a seguir.

Por Que Você Pode Querer Criar um Tema Filho WooCommerce

Se você dedicou algum tempo para ler sobre o WordPress, provavelmente já se deparou com temas filhos antes.

Em resumo, um tema filho começa como uma cópia de outro tema, que é conhecido como ‘tema principal’. Você pode então fazer alterações no tema filho e testá-las sem editar o tema principal diretamente. Isso é importante porque alterar o tema original pode resultar em erros irreversíveis e até danos ao seu site.

Você pode criar um tema filho porque deseja usar outro tema como base, em vez de ter que construir um novo tema inteiramente do zero. Alternativamente, você pode querer fazer apenas algumas alterações menores na marca ou na estética geral de um tema. O céu realmente é o limite, dependendo de quanto tempo você está disposto a dedicar ao projeto.

Quando se trata de WooCommerce, a maioria dos temas filhos são baseados em Storefront:

Você pode baixar várias opções de temas filhos do loja oficial WooCommerce ou de outros sites como ThemeForest. No entanto, é possível que nenhum dos temas filhos existentes atenda às suas necessidades, ou você pode simplesmente querer criar uma aparência única. Além disso, você pode não querer gastar dinheiro em um tema premium se sentir que poderia fazer melhor por conta própria.

Em um post no blog oficial do WooCommerce, os desenvolvedores do plugin discutem a principal motivação por trás do uso de um tema filho para sua loja online:

“O objetivo com nossos próprios temas secundários de Storefront é entregar uma experiência de loja perfeita para o seu nicho específico. Após instalar o Galleria, e sem alterar nenhuma configuração, você instantaneamente tem uma loja adequada para vender itens de moda de alta qualidade. Com o ProShop, você pode rapidamente montar uma loja de esportes estilosa.”

O processo real de criar um tema filho é o mesmo, quer você esteja fazendo um especificamente para WooCommerce ou para um site WordPress mais geral. No entanto, você precisará manter o propósito da sua loja em mente enquanto personaliza seu tema filho. Um site de e-commerce requer uma filosofia de design diferente de um blog, afinal. Vamos ver como esse processo se parece na prática!

Como Criar um Tema Filho WooCommerce (Em 5 Passos)

Agora, vamos guiá-lo sobre como criar um tema filho WooCommerce. Neste exemplo, vamos criar um tema básico que usa Storefront como seu tema principal, embora você possa usar qualquer tema como base.

Vamos mostrar como o processo funciona começando do zero. No entanto, se você quiser pular algumas dessas etapas e ir direto para a personalização do seu site, você também pode baixar e instalar um tema filho Storefront de exemplo.

Finalmente, recomendamos fortemente criar um backup do seu site antes de prosseguir. Isso manterá sua loja segura caso algo quebre durante o processo de desenvolvimento.

Também é inteligente usar um ambiente de staging para criar e ajustar seu tema secundário. Depois de tomar essas precauções de segurança, você pode prosseguir para o primeiro passo!

Passo 1: Crie uma Pasta para o Seu Tema Filho WooCommerce

A primeira coisa que você precisa fazer é criar a pasta que conterá seu tema. Se você está adicionando o tema filho diretamente em um site existente, a melhor maneira de fazer isso é via SFTP. Você pode fazer isso usando um aplicativo gratuito como FileZilla.

Uma vez que você tenha o programa funcionando, faça login no seu site com suas credenciais de hospedagem. Em seguida, você precisará navegar até a pasta wp-content/themes/. É aqui que os temas do seu site estão instalados.

Tudo o que você precisa fazer é criar uma nova pasta dentro desta:

Ao criar um tema filho, é melhor dar um nome que reflita o tema principal. Por exemplo, estamos criando um tema filho para o Storefront, então nomearemos nossa pasta como “storefront-child”.

A primeira coisa que você precisará criar e colocar nesta pasta é um arquivo de texto simples chamado functions.php. Este é um arquivo principal importante que ajuda a ditar como seu site parece e se comporta. No entanto, a maioria dos temas secundários pode usar as funções contidas no arquivo do tema principal e não precisam de um próprio.

Por esse motivo, este arquivo pode ser deixado em branco por enquanto. Simplesmente crie um arquivo de texto com o nome functions.php, e salve-o na pasta do seu tema filho:

Seu tema agora está quase pronto para ser ativado e usado. Primeiro, no entanto, ele precisará de uma folha de estilo.

Passo 2: Crie a Folha de Estilos do Seu Tema Filho

O próximo arquivo que você precisa criar é a Folha de Estilos em Cascata (CSS) do seu tema. Esse arquivo define os estilos que serão aplicados às páginas e ao conteúdo do seu site. Em outras palavras, ele permite que você especifique a aparência de elementos individuais no seu site. Quando as pessoas falam em atualizar estilos, geralmente estão se referindo a atualizar o arquivo CSS do site.

Seu tema principal já conterá uma folha de estilos, mas o CSS do tema filho pode ser usado para substituir esses estilos. Vamos ver mais tarde como isso funciona exatamente.

Por enquanto, você só precisa criar o arquivo CSS. Para fazer isso, adicione novamente um arquivo de texto à sua pasta wp-content/themes/storefront-child (ou qualquer nome que tenha usado para o seu próprio tema filho). Este deve ser chamado de style.css:

Você também precisará adicionar algumas informações básicas. Copie e cole o seguinte trecho no seu novo arquivo style.css:

/*
Theme Name: Storefront Child
Theme URI: http://example.com/storefront-child/
Description: Meu primeiro tema filho WooCommerce
Author: Seu Nome
Author URI: http://example.com
Version: 1.0.0
License: GNU General Public License v2 ou posterior
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Estes são os detalhes sobre o seu tema que você verá ao visualizá-lo em um diretório de temas ou no seu painel do WordPress. Sinta-se à vontade para substituir os dados do espaço reservado por informações mais específicas para você e seu tema.

Etapa 3: Configurar o Tema Filho para Herdar os Estilos do Tema Principal

Como já mencionamos, você vai querer que seu tema filho use os estilos padrão do tema principal. No entanto, você também precisará substituir os estilos que deseja alterar. Isso pode parecer complexo — e CSS pode realmente ser complicado — mas, em sua essência, o tema filho sempre usará os estilos do tema principal, a menos que contenha especificamente uma substituição.

Por exemplo, vamos supor que o seu tema principal define o estilo para os elementos de cabeçalho h1 como 20px e vermelho. Se o arquivo style.css do tema filho não contiver uma entrada para cabeçalhos H1, então o estilo do tema principal será aplicado a todo o conteúdo H1. No entanto, se adicionarmos um estilo H1 à folha de estilo do tema filho que defina esses cabeçalhos como 18px e azul, ele substituirá as direções do tema principal.

Adicionar essa funcionalidade ao seu tema filho é realmente muito simples. Tudo o que você precisa fazer é referenciar o seu tema principal na folha de estilo do seu tema filho.

Adicione simplesmente o seguinte trecho após a informação que você colou anteriormente no arquivo style.css:

Template: storefront

Este código define o tema principal e garantirá que o seu tema filho use os estilos do Storefront onde você não especificou uma substituição. Se você está criando um filho para um tema diferente, pode simplesmente usar o nome da pasta dele.

Passo 4: Ativar o Tema Filho

Neste ponto, seu tema filho está tecnicamente pronto. Ele está configurado para funcionar no seu site, então vamos ativá-lo e ver como fica.

Vá até Aparência > Temas no seu painel do WordPress, e você verá seu tema filho já instalado:

Selecione Ativar para torná-lo o tema atual do seu site. Agora você pode visualizá-lo pelo frontend:

Como você pode ver, ele parece exatamente igual ao tema original neste momento. Enquanto o tema filho está ativo, tudo o que ele faz é incorporar os estilos do seu tema principal. Para personalizar sua aparência, você precisará ser criativo com a folha de estilos do seu tema filho.

Etapa 5: Adicionar Estilos ao Tema Filho

Finalmente, é hora de começar a estilizar o seu tema filho. A maneira de fazer isso depende de você, da sua criatividade e de como você deseja que sua loja pareça. No entanto, vamos passar por um exemplo do que você pode fazer.

Para ilustrar como editar o seu tema filho funciona, vamos mudar a aparência dos botões da nossa loja. No momento, eles aparecem cinza com texto preto, mas poderíamos atualizar esse estilo para torná-los mais destacados:

Abra novamente o arquivo style.css do seu tema filho, e adicione o seguinte código após o último */ no cabeçalho do arquivo:

a.button,
button.button,
input.button,
#review_form #submit {
background: pink;
color: red;
}

Se você salvar seu arquivo e visualizá-lo no frontend agora, verá a mudança em ação. Os botões agora serão rosa vibrante com texto vermelho:

Você também pode fazer alterações nos arquivos de template do seu tema. Você só precisará copiar o arquivo de template que deseja alterar, como header.php, da sua pasta de tema principal para a pasta do seu tema filho.

Entretanto, você também precisará fazer algumas alterações para especificar qual função o WordPress usa para referenciar os arquivos de template. Isso requer o uso da função get_stylesheet_directory(); em vez de get_template_directory() para referenciar seus templates.

Para saber mais sobre como fazer isso, você pode ler sobre todos os modelos que o WooCommerce utiliza.

Neste ponto, você criou um tema filho do WooCommerce! Claro, há muito mais que você pode fazer, mas agora você sabe como começar a mexer. Recomendamos que você aprimore seus conhecimentos em CSS para aproveitar ao máximo o seu estilo!

Crie um Tema Filho WooCommerce

WooCommerce facilita a criação de uma loja online, e você pode até alterar sua aparência usando o tema Storefront ou um dos muitos temas personalizados.

Entretanto, você não precisa depender da criatividade de outras pessoas. Criar seu próprio tema filho WooCommerce não é tão difícil quanto você pode pensar, e isso lhe dá quase total controle sobre a aparência e funcionalidade da sua loja.

Feliz venda!