Como editar e personalizar suas páginas de produtos WooCommerce

A página do produto é crucial para o processo de vendas. É onde o comprador decide prosseguir e comprar o item ou sair sem garantia de devolução. Seu objetivo como proprietário de uma loja on-line é levar os visitantes do site às páginas de seus produtos e, em seguida, fazer com que eles sigam as etapas finais de Adicionar ao carrinho e Check-out.

Para isso, é essencial que suas páginas de produtos façam o melhor trabalho possível para promover o item que está sendo vendido. O modelo de produto padrão WooCommerce é limpo e profissional, oferecendo uma base sólida para sua página que você pode construir usando os métodos abaixo.

Como otimizar seu modelo de página de produto WooCommerce

Existem várias maneiras de personalizar suas páginas ou modelos de produtos WooCommerce. Alguns métodos estão incluídos no WooCommerce. Para outros, você precisará de uma extensão. Você também pode usar o Editor do site ou fazer personalizações manualmente. Vamos dar uma olhada em cada opção.

Como personalizar sua página de produto WooCommerce usando recursos integrados

Muitas otimizações de página de produto podem ser feitas sem nenhum complemento ou codificação. Fotos de alta qualidade, descrições informativas e informações importantes sobre o produto tornam mais fácil para o visitante se sentir confortável ao comprar o produto.

Habilite revisões e classificações para criar confiança. Configure produtos relacionados, vendas cruzadas e vendas adicionais para aumentar o tamanho médio do pedido e facilitar a descoberta de novos itens pelos clientes. Inclua depoimentos de clientes em suas descrições de produtos ou guias para prova social.

Depois de otimizar o conteúdo da página, você pode aprimorar ainda mais as páginas do produto usando extensões WooCommerce, editando o modelo da página do produto com o Editor do site e personalizando-as manualmente com código e ganchos.

Como personalizar sua página de produto usando extensões WooCommerce

Uma extensão é um plug-in do WordPress criado especificamente para fornecer funcionalidade adicional às lojas WooCommerce. Abaixo estão algumas extensões do WooCommerce que você pode usar para fornecer informações adicionais sobre o produto, atualizar a experiência de compra e estender sua página além de seus recursos padrão. Você pode encontrar ainda mais extensões para personalização adicional na biblioteca oficial de extensões WooCommerce.

1. Variação de produto avançada para WooCommerce

Produtos variáveis ​​são itens com opções como tamanho e cor — escolhas que o comprador faz antes de finalizar a compra. No front-end, o WooCommerce exibe uma lista suspensa para cada atributo (como tamanho ou cor) com uma lista de variações disponíveis abaixo (como Pequeno, Médio ou Grande).

Para uma abordagem mais visual, Advanced Product Variation for WooCommerce permite mostrar variações de produtos com amostras (cores, imagens e texto), galerias e tabelas. Você pode até incluir vídeos em suas amostras.

Amostras de variação são exibidas na página do produto ou na página principal da loja, com base nas configurações que você definir. Você pode criar amostras aproveitando imagens de produtos existentes e imagens em destaque.

Você também pode personalizar o layout da galeria de produtos, movendo-o de sua posição padrão abaixo da imagem em destaque para o lado esquerdo.

Saiba mais sobre Variação de produto avançada para WooCommerce.

2. Gerenciador de guias WooCommerce

As guias da página do produto WooCommerce aparecem abaixo do botão Adicionar ao carrinho e permitem que você mostre informações adicionais, mantendo os elementos-chave como título e preço acima da dobra.

Essas informações adicionais podem incluir materiais e ingredientes do produto, pesos e dimensões, tabelas de tamanhos, tabelas de preços, prazos de entrega, taxas de envio, vídeos de instruções - qualquer coisa isso ajudará o cliente a se sentir confiante para fazer sua compra.

Com o WooCommerce Tab Manager, você pode renomear, reordenar e remover as guias padrão — Descrição longa, Informações adicionais e Avaliações — e personalizar esta seção criando suas próprias guias globais, para toda a categoria e específicas do produto.

Use o plug-in para definir uma ordem de tabulação padrão que pode ser substituída no nível do produto. Com uma interface de arrastar e soltar, não há necessidade de modificar arquivos de tema ou entrar no código.

Se você já possui guias personalizadas por meio de outros plug-ins, o WooCommerce Tab Manager as detecta, oferecendo a opção de mostrá-las ou ocultá-las. Um grande benefício desse plug-in é que o conteúdo das guias é incluído nos resultados de pesquisa do site.

Saiba mais sobre o WooCommerce Tab Manager.

3. Perguntas frequentes sobre produtos

Perguntas frequentes, ou FAQs, são uma maneira amigável de organizar e apresentar informações sobre produtos aos seus visitantes. Com a extensão Product FAQs, você pode adicionar uma guia FAQ dedicada para cada produto com perguntas e respostas ilimitadas.

O plug-in funciona com todos os tipos de produtos e adiciona uma seção de perguntas frequentes quando você cria ou edita uma página de produto.

No front-end, as perguntas frequentes são exibidas em estilo sanfona com animação.

Saiba mais sobre as perguntas frequentes sobre produtos.

4. Produtos compostos

Com Composite Products, seus clientes podem construir kits ou produtos configuráveis.

Para cada produto composto, você permitirá que os clientes escolham entre seleções predeterminadas do estoque existente. Você pode atribuir taxas extras para seleções específicas e permitir que certas categorias sejam opcionais.

Por exemplo, um colar pode conter opções para a corrente (prata, ouro), a pedra (rubi, granada, esmeralda) e um amuleto opcional (múltiplas opções de formato).

Para cada um dos blocos de construção do kit - corrente, pedra e amuleto - você pode selecionar SKUs que o cliente pode escolher ou deixá-lo escolher qualquer opção de uma categoria de produto inteira.

A lógica condicional permite mostrar ou ocultar opções com base em escolhas anteriores (por exemplo, a camisa vermelha não está disponível em tamanhos específicos) e o rastreamento em nível de componente oferece suporte ao gerenciamento avançado de estoque. Se você tiver um grande número de opções, poderá criar visualizações com classificação, filtragem e paginação para facilitar as compras.

Saiba mais sobre Produtos Compósitos.

5. Complementos de produto

A extensão Product Add-Ons permite que seus compradores personalizem e atualizem suas compras por meio de extras gratuitos e pagos.

Os complementos podem incluir garantias, materiais de alta qualidade, opções de remessa prioritária ou personalizações como monogramas e gravações personalizados. Se as pessoas costumam comprar seus produtos como presentes, você pode adicionar uma opção de embrulho ou um campo de mensagem de presente.

As organizações sem fins lucrativos podem permitir que os compradores incluam uma doação em sua compra e façam a doação em homenagem a alguém adicionando um nome e uma mensagem.

Se você tiver reservas WooCommerce, os complementos de produtos permitem criar opções para serviços extras (enxágue após o corte de cabelo) ou upgrades VIP para assentos e acesso especiais. Ele também funciona com assinaturas WooCommerce para que você possa oferecer complementos para seus produtos de assinatura.

Seus complementos podem incluir campos personalizados exibidos como caixas de texto, menus suspensos, caixas de seleção, seleções baseadas em imagens e entradas de preço personalizadas para itens como gorjetas e doações. Esses campos podem ser aplicados a todo o seu catálogo ou atribuídos a produtos específicos.

Depois de configurar seus complementos, eles aparecem nas páginas do produto acima do botão Adicionar ao carrinho na ordem que você escolher.

Saiba mais sobre complementos de produtos.

Personalize a página do seu produto usando o Editor do Site

Com temas de bloco, você pode personalizar a aparência da página do produto editando o modelo de página de produto único no Editor do site. No admin do WordPress, vá para Aparência → Editor .  

Escolha “Procurar todos os modelos” no menu suspenso na parte superior central da página. Escolha o modelo de Produto Único na lista que aparece.

O layout de página padrão contém o cabeçalho, rodapé e o bloco WooCommerce Single Product, que exibe informações do produto, preço e elementos de imagem.

Você deve fazer backup de seu site antes de fazer edições em seu modelo de página de produto. Certas alterações - por exemplo, excluir acidentalmente o bloco de produto único e salvá-lo - impossibilitará que seus visitantes comprem ou comprem.

Como editar os modelos de cabeçalho e rodapé da página de produto único

A guia Modelo em Configurações (o ícone de engrenagem no canto superior direito) contém links para gerenciar o Cabeçalho e o Rodapé. Clique em qualquer opção para gerenciar essa parte do modelo de página. Você também pode clicar em uma área do modelo diretamente para iniciar a edição. Lembre-se de que quaisquer alterações feitas aqui serão aplicadas a todos os produtos que usam o modelo.

No cabeçalho, você pode editar o título do site e os links no menu de navegação principal e até mesmo adicionar novos blocos para personalizar especificamente a página do seu produto. Use este espaço para adicionar imagens, texto e muito mais para aumentar o poder de venda da página do seu produto. Você pode adicionar uma nota ou banner promocional ou de política para informar os compradores sobre uma venda atual ou como obter frete grátis em pedidos acima de um determinado valor.

Você pode fazer algo semelhante com o rodapé da página do produto. Por exemplo, adicione um depoimento de cliente ou informações sobre uma política de Garantia de Satisfação.

Como personalizar o corpo de um único produto

O bloco Produto Único exibe um aviso em negrito na parte superior, “Não remova este bloco! A remoção deste bloqueio causará efeitos não intencionais em sua loja.” Leve esta mensagem a sério!

No entanto, você pode adicionar novos blocos em torno do bloco de produto único para personalizar completamente o design da página do produto.

Use o ícone + para adicionar elementos acima ou abaixo do bloco Produto único e, em seguida, inclua os blocos que desejar para personalizar a página.

Use um bloco de parágrafo para incluir ofertas atuais ("Gaste $ 100 ou mais para frete grátis"), uma garantia de satisfação ou qualquer coisa que ajude os visitantes a tomar a decisão de compra. Adicione um bloco de vídeo que oferece uma visão dos bastidores de seus processos. Ou inclua produtos recomendados específicos que você gostaria de promover. O céu é o limite aqui!

E para cada bloco, você pode editar configurações como cor de fundo, tipografia e espaçamento para torná-lo realmente seu.

Personalize sua página de produto manualmente (usando código e ganchos)

Para opções avançadas - sem custo ou manutenção de plug-ins - você pode editar e personalizar sua página de produto manualmente usando código e ganchos.

Antes de fazer qualquer alteração em seus arquivos, é importante que você reserve um tempo para fazer backup do WooCommerce. Se você estiver usando o Jetpack VaultPress Backup, isso será feito para você automaticamente, em tempo real. Portanto, se alguma de suas alterações causar a queda do site, você poderá restaurar um backup com apenas alguns cliques, mesmo que não tenha acesso ao painel do WordPress.

E você também desejará usar um tema filho para fazer essas alterações. Caso contrário, quando você atualizar seu tema ou WooCommerce no futuro, poderá perder todas as suas personalizações. Outra opção é usar um plug-in como o Code Snippets, que permite adicionar código personalizado ao seu site em snippets que você pode ativar e desativar conforme necessário.

Personalize as páginas de produtos WooCommerce usando ganchos

Os ganchos permitem que os proprietários do site adicionem código e personalizem páginas sem os perigos associados à edição de arquivos principais. Existem dois tipos de ganchos: ações e filtros. As ações permitem inserir código em pontos específicos, enquanto os filtros permitem manipular e retornar uma variável.

Por exemplo, você pode usar ações para adicionar um novo campo de check-out e, em seguida, usar filtros para alterar os rótulos ou espaços reservados dos campos de check-out existentes. Você pode encontrar a lista de ganchos WooCommerce disponíveis aqui.

Aqui estão mais alguns exemplos de alterações que você pode fazer em suas páginas de produtos usando ganchos:

• Altere o texto do botão Adicionar ao carrinho. Por exemplo, você pode dizer “Doe agora”.
• Personalize as migalhas de pão do WooCommerce. Mude o separador de pão ralado, remova completamente o pão ralado, etc.
• Remova, renomeie e reordene as guias do produto. Adicione uma guia Ingredientes, por exemplo, ou inclua um vídeo em uma das guias.

Personalize as páginas de produtos WooCommerce usando CSS

CSS é uma linguagem de codificação usada para controlar elementos de design (ao contrário de JavaScript, que controla ações). Você pode usá-lo para modificar o design de suas páginas de produtos. Depois de aprender o básico de CSS, você pode personalizar tudo, desde cores e fontes até tamanhos de elementos individuais.

Você pode facilmente adicionar código CSS acessando Aparência → Personalizar → CSS adicional em seu painel do WordPress. Por exemplo, se você quiser alterar a cor da fonte dos títulos de seus produtos, use o seguinte código, substituindo o código hexadecimal da cor pelo seu:

 .woocommerce div.product .product_title { color: #222222; }

Se você quiser alterar a cor do botão Comprar agora, use este código, novamente substituindo o código hexadecimal pela cor de sua escolha:

 .woocommerce div.product .button {   background: #000000; }

Você pode ver mais exemplos neste artigo do WooCommerce.

Como aumentar a velocidade de carregamento da página do seu produto

Sites de carregamento rápido são importantes tanto para os visitantes quanto para os mecanismos de busca. As pessoas não querem esperar e os mecanismos de pesquisa não querem enviar as pessoas para sites de baixo desempenho.

Literalmente, cada segundo conta — um atraso de um segundo nos tempos de carregamento pode reduzir as taxas de conversão em 20%!

O Jetpack Boost é a principal solução de otimização de desempenho e velocidade do site para WordPress. Ele possui um processo de configuração rápido e fácil - nenhum desenvolvedor é necessário - e apresenta resultados que superam os cinco principais plug-ins de desempenho em um teste frente a frente.

Depois de instalar o plug-in gratuito, você pode executar uma auditoria e obter um relatório sobre as pontuações atuais de desempenho do site. Eles servirão como benchmarks que você pode usar para medir as melhorias em seus Core Web Vitals, métricas que o Google usa para avaliar a experiência do usuário e o desempenho técnico do seu site.

Um painel simples simplifica a configuração das opções de otimização por meio de ativações com um clique. Isso oferece flexibilidade para testar os módulos de desempenho individualmente e configurar o Jetpack Boost para se adequar perfeitamente a qualquer cenário.

Para mais maneiras de acelerar suas páginas de produtos, confira Nove maneiras de acelerar uma loja WooCommerce.

Perguntas frequentes sobre a personalização de páginas de produtos

Ainda tem dúvidas? Dê uma olhada nas respostas para alguns dos mais comuns abaixo.

Qual é a melhor maneira de personalizar uma página de produto WooCommerce?

Não existe uma única maneira melhor. A melhor maneira para você depende do seu nível de conforto com as várias abordagens.

O Site Editor coloca todo o poder em suas mãos, permitindo que você arraste e solte elementos para criar sua própria página de produto personalizada sem ter que editar nenhum código. Esta é uma excelente solução para usuários iniciantes e avançados!

Se você está procurando uma funcionalidade adicional específica, as extensões WooCommerce são uma ótima opção. Eles são examinados e aprovados pelo WooCommerce e oferecem aos comerciantes opções avançadas de personalização sem código personalizado.

A personalização e codificação manual oferecem a maior flexibilidade, mas também exigem o maior conhecimento técnico. Comparado ao uso de bloqueios ou extensões, esse método tem a maior chance de causar um problema ou até mesmo interromper o site.

Devo fazer backup do meu site antes de editar o modelo de página do produto?

Sim. Ao contrário das páginas e postagens, os modelos de site não possuem um histórico de revisão. Faça backup de seu site antes de fazer qualquer atualização no modelo de página do produto, para que você possa fazer uma restauração rápida se houver algum problema.

O Jetpack VaultPress Backup é um plug-in de backup em tempo real do WordPress, o que significa que o backup do seu site não é apenas feito diariamente ou quando você faz uma cópia manual. Em vez disso, ele é salvo automaticamente toda vez que você faz uma alteração em seu site, um cliente faz um pedido ou um visitante deixa um comentário. Sempre que algo importante acontece? Está salvo!

As lojas de comércio eletrônico não podem perder dados, especialmente quando esses dados representam pedidos de clientes do mundo real. Não aceite soluções que salvem seu site apenas ocasionalmente ou exijam uma longa interação com o atendimento ao cliente para restaurar as coisas quando houver um problema.

Com o Jetpack VaultPress Backup, você pode restaurar seu site com um clique e voltar a ficar online rapidamente. Com o aplicativo móvel Jetpack, você pode restaurar a qualquer hora, em qualquer lugar, mesmo que o site esteja completamente fora do ar.

A melhor parte para os donos de lojas? Todos os dados e pedidos de seus clientes estão protegidos e atualizados.

Quais são algumas práticas recomendadas para personalizar uma página de produto WooCommerce?

Independentemente do método que você usa para editar e personalizar sua página de produto WooCommerce, siga estas práticas recomendadas para proteger você, seu site e seus clientes.

Faça backup de seu site primeiro, sempre . Quando você adiciona ou atualiza o código do site, um único erro pode causar problemas. Você precisa estar pronto para restaurar o site o mais rápido possível, sem perder um único pedido. Jetpack VaultPress Backup é a melhor solução de backup automático em tempo real para WordPress.

É feito para você, então você nem precisa se preocupar em salvar seu site antes de experimentar as alterações.

Faça as alterações no código fora dos arquivos do tema pai . Quando você edita um arquivo de tema ou plug-in, essas alterações serão substituídas e desfeitas na próxima vez que o tema ou plug-in for atualizado.

Existem várias maneiras de adicionar código ao seu site sem editar o tema ou os arquivos do plug-in diretamente. Você pode usar o plug-in Code Snippets para adicionar, editar ou remover elementos em uma página e estilizar seu site por meio do campo CSS adicional no Personalizador de tema. Você também pode criar um tema filho. O importante é fazer suas alterações onde não serão afetadas por atualizações de tema ou plugin.

Fique de olho na velocidade. Não importa como você personaliza suas páginas de produtos, você quer ter certeza de que a velocidade do seu site não será prejudicada. Com o Jetpack Boost, você pode melhorar instantaneamente as principais áreas que melhoram a experiência do usuário e a percepção do Google sobre a qualidade do seu site. Um site mais rápido significa que os clientes estarão mais propensos a permanecer e o Google estará mais propenso a recomendá-lo nos resultados da pesquisa. Um impulso rápido pode percorrer um longo caminho.