Como personalizar páginas de produtos WooCommerce

Seus produtos são únicos – as páginas de produtos que os exibem também devem ser. O modelo de página de produto padrão do WooCommerce é uma ótima opção para muitas lojas online, mas você pode querer algo que reflita o estilo e os benefícios individuais de seus produtos.

Você não precisa ser um desenvolvedor para colocar seu próprio selo nas páginas dos produtos, graças a algumas extensões do WooCommerce (e um recurso principal do WooCommerce).

Complementos do produto

A extensão Product Add-Ons adiciona mais campos às suas páginas de produtos para que os compradores possam personalizar suas compras. Disponha as opções usando caixas de texto, caixas de seleção ou listas suspensas e adicione variações com imagens de amostra — inclua-as para produtos individuais ou para todo o seu catálogo.

Perfeito para: lojas de comércio eletrônico que oferecem opções adicionais, como embrulho de presente e monograma.

• Se você é uma loja de roupas que oferece bordados, permita que os clientes digitem o texto que desejam bordar antes de finalizar a compra, para que você não precise entrar em contato após a compra.
• Se você vende almofadas de destaque, ofereça opções de tecido, tamanho ou estilo.
• Se você vende joias, deixe os clientes escolherem a cotação que gostariam de gravar na peça.
• Se você oferecer produtos para presente, inclua opções de embrulho ou uma nota de agradecimento.
• Se você vende eletrônicos, permita que os compradores adquiram uma garantia protegendo seu item.
• Se você é uma organização sem fins lucrativos, permita que as pessoas que o apoiam incluam uma doação na compra de mercadorias.

Escolha cobrar por cada complemento ou ofereça personalizações gratuitas. É uma maneira flexível de oferecer aos compradores as opções de que precisam.

Saiba mais sobre os Complementos de Produto.

Amostras e fotos de variação

Se o seu produto tiver variações de cores ou padrões, os compradores querem vê-los em ação. A extensão Variation Swatches and Photos exibe variações — estilos, tamanhos, padrões, cores etc. — com uma imagem ou amostra de cor para dar aos clientes uma ideia melhor do que exatamente estão comprando e melhorar o design das páginas de seus produtos.

Perfeito para: lojas de comércio eletrônico com produtos variáveis.

• Se você vende camisetas, exiba opções de cores.
• Se você vende óculos, mostre todas as opções de armação.
• Se você vende joias, destaque os pingentes que os clientes podem escolher.
• Se você vende skates, inclua imagens dos padrões que oferece.

Saiba mais sobre amostras e fotos de variação e veja-o em ação.

Imagem WooCommerce 360

Com o WooCommerce 360 ​​Image, você pode adicionar uma rotação de imagem 360 dinâmica e personalizada às páginas do produto para que os compradores possam aprimorar os detalhes do produto. Adicione um grupo de imagens a uma galeria de produtos e a imagem em destaque será substituída por uma bela imagem 360 que os clientes podem girar para ver todos os aspectos do produto. Também é totalmente responsivo, para que os compradores em dispositivos móveis tenham a mesma ótima experiência.

Perfeito para: lojas de comércio eletrônico que desejam oferecer aos clientes uma experiência como segurar fisicamente um produto.

• Se você vende móveis, os clientes podem entender seu estilo de todos os ângulos.
• Se você vende peças de automóveis, os clientes podem examinar os detalhes de perto que são importantes para eles.
• Se você vende relógios, os clientes podem ampliar todas as nuances, gravuras e recursos.

Saiba mais sobre a imagem WooCommerce 360.

Vídeo de produto para WooCommerce

Os vídeos são uma maneira poderosa de mostrar seus produtos em ação. Use a extensão Product Video for WooCommerce para adicionar vídeos à sua galeria de imagens do produto ou para substituir imagens em destaque por vídeos. Carregue os vídeos para sua biblioteca de mídia do WordPress ou incorpore-os de serviços de terceiros como Vimeo ou YouTube.

Perfeito para: lojas de comércio eletrônico com produtos que são melhor mostrados em ação

• Se você vende ferramentas elétricas, demonstre o tamanho da ferramenta e como ela funciona.
• Se você vende roupas, mostre como um item se encaixa em uma variedade de tipos de corpo e combina com outras peças.
• Se você vende brinquedos, inclua clipes de crianças brincando com seus produtos e depoimentos de pais felizes.

Saiba mais sobre o Vídeo do produto para WooCommerce.

Tabela de tamanhos para WooCommerce

Se você vende produtos de vários tamanhos, um gráfico ajuda os clientes a entender qual deles comprar e reduz o número de devoluções. A extensão Size Chart for WooCommerce adiciona gráficos de tamanho às páginas de produtos - faça o upload do seu próprio ou crie um em seu painel. Você pode optar por exibir gráficos nos detalhes do produto ou como um pop-up.

Perfeito para: lojas de comércio eletrônico que vendem produtos em vários tamanhos

Exemplos:

• Se você vende camisetas, adicione uma tabela de tamanhos com medidas de ombro, peito e altura.
• Se você vende móveis, adicione uma tabela de tamanhos com medidas de comprimento, altura e profundidade.
• Se você vende adesivos, adicione uma tabela de tamanhos com as medidas de altura e largura.

Saiba mais sobre a Tabela de tamanhos para WooCommerce.

Recomendações de produtos

Upsells e cross-sells são formas eficazes de aumentar o tamanho do carrinho dos clientes e suas vendas gerais. Use as Recomendações de produtos para mostrar aos clientes mais do que eles estão interessados. Adicione produtos recomendados com base no que é popular, no que há de novo, no que está à venda, no que completa uma aparência e muito mais. Ou exiba-os com base no que já está no carrinho do seu cliente.

Perfeito para: lojas de comércio eletrônico com mais de um produto

• Se você vende sapatos, recomende meias ou cadarços.
• Se você vende brincos, recomende pulseiras e colares da mesma coleção.
• Se você vende brinquedos, recomende quebra-cabeças semelhantes ao que o cliente tem no carrinho.
• Se você vende plantas, recomende outras variedades populares ou suplementos de solo.

Saiba mais sobre as recomendações de produtos.

Mudanças CSS simples, sem necessidade de extensão

CSS é uma linguagem de codificação que controla o design do seu site, desde fontes e cores até tamanhos de botões e planos de fundo. Se você tiver algum conhecimento básico de CSS, navegue até Aparência → Personalizar → CSS adicional em seu painel e faça as seguintes alterações:

Alterar o tamanho da fonte dos títulos dos produtos

Use o código abaixo para alterar o tamanho dos títulos dos seus produtos para 36px. Substitua o “36” pelo número que desejar.

 .woocommerce div.product .product_title { font-size: 36px; }

Alterar a cor dos títulos dos produtos

Um código hexadecimal é um código de seis dígitos que representa uma cor específica online. Use o código abaixo para alterar a cor do título do produto para o código hexadecimal #FF5733. Substitua o código hexadecimal por qualquer coisa que desejar; você pode usar o seletor de cores HTML para obter o código de qualquer cor que desejar.

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

Deixe os rótulos de variação em negrito

Use o código abaixo para exibir seus títulos de variação em negrito.

 .woocommerce div.product form.cart .variations label { font-weight: bold; }

Colocar rótulos de variação em itálico

Use o código abaixo para colocar em itálico os rótulos de variação.

 .woocommerce div.product form.cart .variations label { font-style: italic; }

Altere as cores do botão Comprar agora:

Use este código para alterar a cor de fundo do seu botão Comprar agora. Novamente, use o seletor de cores HTML para obter o código hexadecimal da cor que deseja usar.

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

Comece a personalizar suas páginas de produtos

O WooCommerce tem tudo a ver com flexibilidade e personalização, e é por isso que fornece todas as ferramentas necessárias para editar o design e a funcionalidade das páginas de produtos. Ao adicionar campos, vídeos, gráficos de tamanho e muito mais, suas páginas podem ser tão exclusivas quanto os produtos que apresentam.

Veja nossa biblioteca completa de extensões para ainda mais opções.