Digamos que você tenha uma loja WooCommerce em funcionamento.

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

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

Neste artigo, vamos examinar 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 do WooCommerce

Com o lançamento do plugin WooCommerce em 2011, o WordPress tornou-se o plataforma de e-commerce mais popular. O WooCommerce é atualmente usado para alimentar 25% de todas as lojas online, tornando-o 6% mais popular do 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 esforço mínimo. No entanto, isso sozinho não explica a popularidade da plataforma.

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

O WooCommerce é compatível com quase todos os temas do WordPress. No entanto, a maioria deles não estará otimizada para lidar com os recursos únicos do plugin.

Felizmente, o tema Storefront é uma excelente opção. Este é o tema oficial do WooCommerce, construído especificamente para integrar-se ao plugin. Ele parece atraente logo de cara, com um design simples e limpo que coloca o foco em seus produtos:

Este design minimalista também torna o Storefront uma base ideal para personalização. Aqui é onde os temas filhos são úteis, que examinaremos a seguir.

Por que você pode querer criar um tema filho do WooCommerce

Se você já passou muito tempo lendo sobre o WordPress, provavelmente já ouviu falar de temas filhos antes.

Em resumo, um tema filho começa sua vida como uma cópia de outro tema, conhecido como "tema pai". Em seguida, você pode fazer mudanças no tema filho e testá-las sem editar diretamente o tema pai. Isso é importante porque alterar o tema original pode resultar em erros irreversíveis e até mesmo danificar 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 mudanças menores na marca ou estética geral de um tema. O limite realmente é o céu, dependendo do tempo que você está disposto a dedicar ao projeto.

Quando se trata do WooCommerce, a maioria dos temas filhos é baseada no Storefront:

Você pode baixar várias opções de temas filhos na loja oficial do WooCommerce ou em outros sites como o ThemeForest. No entanto, é possível que nenhum dos temas filhos existentes atenda às suas necessidades ou você queira criar um visual único. Além disso, você pode não querer gastar dinheiro em um tema premium se achar que pode fazer melhor sozinho.

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

"O objetivo com nossos próprios temas filhos Storefront é entregar uma experiência de loja perfeita para sua própria nicho. Após instalar o Galleria, sem tocar em nenhuma configuração, você tem instantaneamente uma loja adequada para vender itens de alta moda. Com o ProShop, você pode configurar rapidamente uma loja de esportes elegante".

O processo real de criar um tema filho é o mesmo, independentemente de você estar fazendo um especificamente para o WooCommerce ou para um site WordPress mais geral. No entanto, você precisará levar em consideração o propósito da sua loja enquanto personaliza seu tema filho. Afinal, um site de e-commerce exige uma filosofia de design diferente de um blog. Vamos ver como isso é na prática!

Como Criar um Tema Filho do WooCommerce (Em 5 Passos)

Agora, vamos mostrar como criar um tema filho do WooCommerce. Neste exemplo, criaremos um tema básico que usa o Storefront como seu tema pai, embora você possa usar qualquer tema como base.

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

Por fim, recomendamos fortemente que você crie uma cópia de segurança do seu site antes de continuar. Isso manterá sua loja segura caso algo dê errado durante o processo de desenvolvimento.

Também é sensato usar um ambiente de teste para criar e ajustar seu tema filho. Depois de tomar estas precauções de segurança, você pode prosseguir para o primeiro passo!

Passo 1: Crie uma Pasta para o seu Tema Filho do WooCommerce

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

Assim que o programa estiver em execução, faça login em seu site com suas credenciais de hospedagem. Em seguida, você precisará navegar até a pasta wp-content/themes/. É aqui que os temas de seu site são instalados.

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

Ao criar um tema filho, é melhor dar a ele um nome que reflita o tema pai. Por exemplo, estamos criando um tema filho para o Storefront, então daremos ao nosso diretório o nome "storefront-child".

A primeira coisa que você precisará criar e colocar nesta pasta é um simples arquivo de texto chamado functions.php. Este é um arquivo-núcleo importante que ajuda a ditar como seu site parece e age. No entanto, a maioria dos temas filhos pode usar as funções contidas no arquivo do tema pai e não precisa de seus próprios.

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

Seu tema está quase pronto para ser ativado e usado. No entanto, ele precisará de uma folha de estilo antes disso.

Etapa 2: Crie a Folha de Estilo do Seu Tema Filho

O próximo arquivo que você precisa criar é a folha de estilo em cascata (CSS) do seu tema. Este arquivo define os estilos que serão aplicados nas páginas e conteúdo do seu site. Em outras palavras, permite que você especifique o aspecto de elementos individuais em seu site. Quando as pessoas falam sobre atualizar estilos, normalmente se referem à atualização do arquivo CSS de um site.

Seu tema pai já conterá uma folha de estilo, mas a CSS de um tema filho pode ser usada para substituir esses estilos. Veremos como isso funciona exatamente mais tarde.

Por enquanto, você só precisará criar o arquivo CSS. Para fazer isso, adicione novamente um arquivo de texto à sua pasta wp-content/themes/storefront-child (ou qualquer nome que você tenha usado para o seu próprio tema filho). Este deve ser chamado 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: My first WooCommerce child theme
Author: Your Name
Author URI: http://example.com
Version: 1.0.0
License: GNU General Public License v2 or later
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 painel do WordPress. Sinta-se à vontade para substituir os dados de placeholder por informações mais específicas para você e o seu tema.

Passo 3: Configure o Tema Filho para Herdar os Estilos do Tema Pai

Como já mencionamos, você desejará que o seu tema filho use os estilos padrão do tema pai. No entanto, você também precisará substituir os estilos que deseja mudar. Isso pode parecer complexo - e o CSS pode realmente ficar complicado - mas no seu núcleo, o filho sempre usará os estilos do tema pai a menos que contenha especificamente uma substituição.

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

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

Basta adicionar o seguinte trecho após as informações que você colou no arquivo style.css anteriormente:

Template: storefront

Este código define o tema pai e garantirá que o seu tema filho use os estilos do Storefront onde você não especificou uma substituição. Se você estiver criando um filho para um tema diferente, basta usar o nome da pasta dele em vez disso.

Passo 4: Ative o Tema Filho

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

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

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

Como você pode ver, ele parece exatamente o mesmo que o tema original agora. Enquanto o tema filho estiver ativo, tudo o que ele está fazendo é trazer os estilos do seu tema pai. Para personalizar sua aparência, você precisará ser criativo com a folha de estilo do seu tema filho.

Passo 5: Adicione Estilos ao Tema Filho

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

Para ilustrar como funciona a edição do seu tema filho, mudaremos a aparência dos botões de nossa loja. No momento, eles aparecem cinza com texto preto, mas poderíamos atualizar essa estilização para destacá-los mais:

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

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

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

Você também pode fazer mudanças nos arquivos de modelo do seu tema. Você só precisará copiar o arquivo de modelo que deseja alterar, como header.php, do seu tema pai para a pasta do seu tema filho.

No entanto, você também precisará fazer algumas mudanças para especificar qual função o WordPress usa para referenciar os arquivos de modelo. Isso exige usar a função get_stylesheet_directory(); em vez de get_template_directory() para referenciar seus modelos.

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

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

Criar um Tema Filho do WooCommerce

O WooCommerce torna fácil a criação de uma loja online, e você até pode mudar seu aspecto usando o tema Storefront ou um dos muitos temas personalizados.

No entanto, você não precisa depender da criatividade dos outros. Criar o seu próprio tema filho do WooCommerce não é tão difícil quanto você pode pensar, e ele lhe dá quase total controle sobre a aparência e funcionalidade da sua loja.