Como personalizar o modelo de página de produto WooCommerce

Você está procurando maneiras de editar os modelos de suas páginas de produtos? Estamos protegendo você. Neste guia, você aprenderá diferentes maneiras de personalizar o modelo de página do produto WooCommerce .

WooCommerce inclui um grande número de opções de personalização. Uma das opções mais interessantes é a possibilidade de editar os modelos padrão da sua loja de comércio eletrônico. E o fato de poder personalizá-los com mais de um método é ainda mais impressionante.

Vamos dar uma olhada em alguns dos benefícios que você pode esperar ao personalizar seus modelos de página de produto.

Benefícios de editar os modelos de página de produto

Editar os modelos de página do produto melhora a experiência tanto do proprietário do site quanto dos clientes. O modelo de página de produto padrão do WooCommerce é bom para a maioria dos sites. Ele fornece todas as informações necessárias sobre o seu produto que os compradores precisam. No entanto, ter uma página de produto exclusiva lhe dará uma vantagem valiosa para se destacar de seus concorrentes .

Mesmo que haja informações adequadas sobre o produto no modelo padrão, causar uma ótima primeira impressão ajudará você a aumentar suas vendas. Para isso, você ainda pode querer adicionar ou remover alguns detalhes. Também pode ser necessário alterar alguns elementos da página do produto, dependendo do tipo de produto ou serviço que você vende, das demandas dos clientes ou das tendências atuais. Por exemplo, você pode exibir e atualizar regularmente informações sobre descontos, ofertas e vendas anuais para atrair mais visitantes.

Além disso, há alterações de cor, layout e tipografia que você pode aplicar para tornar seu site único e impressionar os compradores.

Essas são algumas das alterações mais comuns que você pode aplicar aos modelos de página do produto, mas há muito mais que você pode fazer. Vamos dar uma olhada em diferentes métodos para editar os modelos de página do produto no WooCommerce.

Como personalizar o modelo de página de produto WooCommerce

Existem diferentes maneiras de editar o modelo de página de produto WooCommerce :

1. Programaticamente
2. Com construtores de páginas
3. Usando um plug-in

Antes de começarmos, há algumas coisas que gostaríamos que você tivesse em mente.

• Certifique-se de ter configurado corretamente o WooCommerce e não perca nenhuma etapa para evitar problemas
• Como modificaremos alguns arquivos de tema que contêm informações delicadas sobre seu site, recomendamos que você faça backup do seu site WordPress e crie um tema filho ou um desses plugins de tema filho antes de continuar
• Para esta demonstração, usaremos o tema Divi. Os arquivos do tema podem ser diferentes em seu site, dependendo do tema, mas você poderá seguir todas as etapas sem problemas
• > Certifique-se de usar um dos temas WooCommerce compatíveis em seu site

Agora, sem mais delongas, vamos para os métodos para editar modelos de página de produto.

1) Personalize o modelo de página de produto WooCommerce programaticamente

Esse método é altamente recomendado se você deseja fazer ajustes simples nos modelos de página do produto. Você pode editá-los facilmente com código, mas é melhor se você tiver algum conhecimento básico de programação se usar essa abordagem.

Usaremos principalmente os ganchos do WooCommerce aqui, portanto, se você não estiver familiarizado com eles, consulte nosso guia sobre como usar os ganchos do WooCommerce. Isso é bastante útil, pois os ganchos também permitem personalizar qualquer tipo de modelo do WooCommerce.

Vamos dar uma olhada em alguns exemplos de coisas que você pode fazer para editar modelos de página de produto.

1.1) Removendo Elementos da Página do Produto

Se você deseja remover elementos da página do produto , pode usar um dos snippets abaixo que usam ganchos para excluir ou ocultar os elementos desejados. Tudo o que você precisa fazer é selecionar o correto e adicionar o código aos arquivos do tema do seu site.

Você pode encontrar todos os ganchos disponíveis nos comentários do arquivo content-single-product.php nos arquivos de modelo de plug-in do WooCommerce. Alternativamente, você pode consultar esta página.

Estes são alguns exemplos de snippets que você pode usar para remover um elemento de suas páginas de produtos:

 // remove o titulo
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// remove estrelas de classificação
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// remove meta do produto 
remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_meta',40 );
// remove a descrição
remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_excerpt',20 );
// remove as imagens
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images',20 );
// remove produtos relacionados
remove_action( 'woocommerce_after_single_product_summary','woocommerce_output_related_products',20);
// remove as guias de informações adicionais
remove_action('woocommerce_after_single_product_summary','woocommerce_output_product_data_tabs',10);

Depois de encontrar o gancho para excluir o elemento desejado, vá para Appearance > Theme Editor em seu painel do WordPress e abra o arquivo functions.php . Em seguida, adicione o snippet de código desejado com a função remove_action na parte inferior do arquivo.

Por exemplo, para remover o título da página do produto, colaríamos o seguinte snippet:

Em seguida, pressione Atualizar arquivo e verifique seu site a partir do front-end. Você verá que o título foi removido da página do produto.

1.2) Adicionar Novos Elementos

Você também pode usar ganchos para personalizar seu modelo de página WooCommerce e adicionar novos elementos a ele. Para incluir um elemento, você precisa usar a função add_action com o gancho necessário.

Por exemplo, para adicionar algum texto à página do produto, você pode colar o trecho a seguir no functions.php do arquivo do tema filho.

 add_action('woocommerce_before_single_product_summary',function(){
  printf('<h4><a href="?added-content">Parabéns, você acabou de adicionar um link!</a></h4>');
}
);

Isso adicionará novo conteúdo à página do produto. Basta ajustar o código acima para alterar o texto e o tamanho para adicionar os elementos desejados às suas páginas de produtos.

1.3) Reordenar Elementos

Outra opção é personalizar o modelo de página do produto WooCommerce reordenando alguns elementos. Semelhante à remoção e adição de elementos, você precisa adicionar trechos de código ao arquivo function.php do tema filho.

Para reordenar os elementos, você precisa primeiro remover o gancho do modelo de página do produto e, em seguida, adicionar o gancho novamente em outra posição. É uma combinação dos trechos de código que usamos nas etapas anteriores.

No exemplo abaixo, o script moverá a descrição do produto logo abaixo do título, alterando a ordem das posições.

 // altera a ordem da descrição
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );

Da mesma forma, você pode usar qualquer um dos ganchos necessários para reordenar os elementos de seus modelos de página de produto. Apenas certifique-se de inserir as ordens de posição corretas.

Se você quiser mais alguns exemplos sobre isso, dê uma olhada em nosso guia sobre como editar a página do produto WooCommerce programaticamente.

2) Edite o modelo de página de produto WooCommerce com construtores de página

Os construtores de páginas são ótimas ferramentas que facilitam o processo de criação e personalização de sites. Esse também é o caso dos modelos de página de produto. Se você não tem habilidades de programação, pode personalizar um modelo de página de produto WooCommerce com construtores de páginas em apenas alguns cliques.

Além disso, os construtores de páginas também permitem que você salve os modelos das páginas do produto com as alterações feitas. E como a maioria dos construtores de páginas fornece um editor de arrastar e soltar para editar os modelos, você pode economizar muito tempo.

Existem muitos construtores de páginas no WordPress. Para este tutorial, usaremos o Divi Builder , pois é um dos melhores construtores de páginas e funciona muito bem com nosso tema, Divi.

Para começar a usá-lo, certifique-se de obter o Divi e, em seguida, instale o Divi Builder em seu site. Depois disso, você está pronto para começar a editar os modelos.

2.1) Abra o Editor Visual

O primeiro passo para editar um modelo de página de produto é abrir uma de suas páginas de produto e clicar na opção “ Habilitar Visual Builder ” na barra de administração. Você será redirecionado para o Editor Visual Divi, onde poderá personalizar o modelo da página do produto.

Se você não vir essa opção, verifique se está conectado ao painel do WordPress na mesma janela do navegador.

2.2) Personalize o modelo com o Editor Visual

Com a ajuda do editor visual, você pode personalizar quase todos os elementos da página do seu produto. Tudo o que você precisa fazer é clicar em qualquer um dos elementos existentes que deseja editar .

Por exemplo, digamos que você queira personalizar a cor de fundo da descrição do produto. Pressione a descrição do produto e abra as configurações da descrição clicando no ícone Configurações .

Em seguida, vá para Background e selecione a cor que deseja definir para a descrição do seu produto. Você verá que a cor de fundo muda imediatamente na visualização ao vivo. Quando estiver satisfeito com a cor, lembre-se de salvar as alterações.

Além de alterar a cor, digamos que você queira adicionar mais módulos ao modelo de página do produto. Basta clicar no símbolo “ + ” na área onde deseja adicionar um módulo, selecionar o tipo de linha e selecionar o módulo desejado.

Se você deseja adicionar algo em particular, você pode pesquisar por módulos específicos digitando no campo de pesquisa. Então, tudo o que você precisa fazer é configurar as opções nas configurações do módulo e salvar as alterações.

Por exemplo, digamos que você queira adicionar um módulo de contagem regressiva para iniciar uma venda de Natal. Pressione o símbolo + e procure as palavras-chave do temporizador de contagem regressiva.

Em seguida, adicione as informações necessárias à contagem regressiva, como texto, hora e data nas configurações do módulo.

Você verá as alterações em tempo real na visualização à medida que as fizer. Quando estiver satisfeito, salve o modelo da página do produto expandindo os 3 pontos horizontais na parte inferior da tela.

Dica rápida para personalizar o modelo de página de produto com o Divi Builder

Você também pode ter diferentes modelos de página de produto, dependendo do tipo de produto que você vende em sua loja online. Tudo o que você precisa fazer é acessar Divi > Divi Builder no painel do WordPress e clicar em Adicionar novo modelo .

Se você rolar para baixo até a seção Produtos , verá que pode criar modelos para páginas de produtos específicos . Isso pode depender das categorias, tags ou produtos específicos. Basta selecionar a opção desejada e pressionar Criar modelo.

Em seguida, você precisa adicionar um corpo personalizado ao modelo de página do produto que acabou de criar. Você pode criar um novo do zero ou usar um dos modelos da biblioteca. Independentemente do que você selecionar, você terá que usar o Editor Visual mais uma vez para personalizar o modelo de página do produto WooCommerce.

Se você quiser saber mais sobre como usar o Divi Builder, dê uma olhada no nosso guia detalhado sobre como personalizar a página do produto WooCommerce no Divi.

Como alternativa, você pode usar outros construtores de página para editar os modelos de página do produto. Se você usa o Elementor, pode conferir nosso tutorial para personalizar a página do produto WooCommerce no Elementor para obter mais informações.

3) Personalize o modelo de página de produto WooCommerce usando um plug-in

Se você deseja fazer alterações muito específicas em seus modelos de página de produto WooCommerce, pode usar um plug-in. Alguns construtores de páginas, como o Elementor, também estão disponíveis como plugins, mas existem outras ferramentas dedicadas que você pode usar para funcionalidades muito específicas.

Um desses plugins é o Direct Checkout for WooCommerce . Esta ferramenta foi projetada para ajudá-lo a simplificar o processo de checkout no WooCommerce. Com este plugin, você pode redirecionar os clientes da página do produto diretamente para a página de checkout após adicionar um produto ao carrinho. Assim você encurta o processo de compra e aumenta suas taxas de conversão.

Em suma, esta é uma excelente ferramenta para editar os botões dos modelos de página do produto em sua loja.

Vamos dar uma olhada nas etapas para editar o modelo de página do produto com o Direct Checkout .

3.1) Instale e Ative o Plugin

Primeiro, você precisa instalar e ativar o plugin. Você pode baixar a versão gratuita aqui ou obter um dos planos premium que incluem mais funcionalidades e começam em 19 USD (pagamento único).

Como alternativa, você pode acessar Plugins> Adicionar novo no painel do WordPress, procurar o plug-in e instalá-lo.

Depois de instalar e ativar o plugin, você precisa configurá-lo.

3.2) Configure as opções de checkout direto

Vá para WooCommerce > Direct Checkout e abra a guia Geral .

Em seguida, defina as seguintes opções:

• Adicionado ao redirecionamento do carrinho: Sim
• Adicionado ao carrinho redirecionar para: Checkout

Por fim, salve as alterações e visualize qualquer uma das páginas do produto em sua loja virtual. Agora, assim que você clicar no botão Comprar em qualquer produto, você será redirecionado diretamente para a página de checkout.

Para obter mais informações sobre como adicionar botões de compra com um clique, confira nosso guia sobre como adicionar um botão de compra rápida no WooCommerce.

Em resumo, personalizar os modelos de página do produto é semelhante a editar a página do produto. Você pode dar uma olhada em nosso tutorial para personalizar as páginas de produtos WooCommerce para obter mais informações e ideias para aproveitar ao máximo seus modelos de página de produtos.

Bônus: Editar modelo de página de produto WooCommerce com CSS

Até agora, vimos como personalizar a página do produto WooCommerce de forma programática, com construtores de páginas e usando plugins dedicados. Mas há outra coisa que você pode fazer. Você também pode editar seu modelo com um pouco de CSS. Este é o método mais rápido para fazer pequenas alterações de design na página do seu produto.

Os scripts CSS são muito úteis para alterar as opções de exibição e design, para que você possa adicioná-los facilmente ao seu site acessando Aparência > Personalizar > CSS Adicional . Uma vez lá, você pode adicionar seus scripts CSS para personalizar os modelos de página do produto.

Aqui estão alguns exemplos de coisas que você pode fazer para melhorar suas páginas de produtos usando CSS.

Alterar o tamanho da fonte do título

O código CSS a seguir alterará o tamanho da fonte do título na página do produto para 16.

 .woocommerce div.product .product_title { 
        tamanho da fonte: 16px; 
}

Você pode escolher qualquer outro tamanho de fonte simplesmente ajustando a linha de tamanho da fonte no snippet.

Alterar a cor do título

Você também pode personalizar os modelos de página do produto alterando a cor do título com CSS. Basta procurar os códigos hexadecimais da cor que você deseja adicionar ao seu site com CSS e usar o código abaixo.

Por exemplo, neste snippet, usamos o código de cor #800000 que altera a cor do título para marrom.

 .woocommerce div.product .product_title { 
            cor: #800000; 
}

Depois de fazer todas as alterações, publique -o.

Para mais exemplos de snippets CSS, dê uma olhada neste post. Ele mostra como personalizar a página da loja, mas você pode aplicar os mesmos snippets para editar os modelos da página do produto.

Para exemplos mais específicos para aplicar ao Divi, você pode conferir este outro artigo.

Conclusão

Em suma, editar os modelos da sua página de produto pode ajudá-lo a criar páginas de produtos exclusivas e se destacar de seus concorrentes. Dependendo do tipo de produto que você vende e do feedback de seus clientes, você pode adicionar, remover ou reorganizar elementos e garantir que está aproveitando ao máximo suas páginas de produtos.

Neste guia, vimos várias maneiras de personalizar o modelo de página do produto WooCommerce em seu site

• Programaticamente
• Com construtores de páginas
• Usando um plug-in

Todos esses métodos são eficazes à sua maneira, portanto, escolha o mais adequado às suas necessidades. Se você tem habilidades de codificação, a abordagem programática é muito eficaz e oferece muita flexibilidade sobre o que você pode mudar. Caso contrário, você pode usar um construtor de páginas para personalizar facilmente diferentes seções de seus modelos. Por fim, você pode usar plugins como o Direct Checkout, que permitem aplicar alterações específicas às suas páginas de produtos.

Você editou seus modelos? Qual método você usou? Deixe-nos saber nos comentários abaixo.

Se você achou este tutorial interessante, aqui estão mais alguns artigos que você também pode gostar:

• Como personalizar os produtos relacionados ao WooCommerce
• Melhores plugins para personalizar a página do produto WooCommerce
• Como adicionar uma imagem a um produto no WooCommerce