Garantir um fluxo de compra contínuo em uma loja virtual é algo vital para o sucesso de um ecommerce. Lojas virtuais onde a seleção de produtos é difícil de realizar, geralmente desestimula o cliente de chegar até a página de checkout e concretizar a compra. Logo, as vendas diminuem e você perde dinheiro.

Para que a experiência de compra dentro da sua loja WooCommerce aconteça de forma simples é essencial que você dê atenção a forma como seus produtos são selecionados. Sua loja usa uma dinâmica fácil para selecionar produtos, características e atributos do mesmo (tamanho, cor, etc)?

Se você ainda não oferece uma solução adequada para a seleção de atributos para o produto, o CanalWP tem um plugin maravilhoso e o tutorial para configurá-lo passo a passo. Para quem quer vender mais, o post de hoje para usar cor e imagem na variação de produtos WooCommerce é altamente indicado.

Cor e Imagem para Variação WooCommerce

WooSwatches

O plugin WooSwatches está entre os plugins para WooCommerce que nós sempre buscamos para indicar aqui no blog. Prezando por qualidade e eficácia, as extensões que você encontra como indicação em nosso site podem te ajudar de alguma maneira a ganhar mais dinheiro e fidelizar clientes.

WooSwatches é um dos plugins PRO mais vendidos e utilizados por lojas WooCommerce, que desejam customizar a exibição e seleção de atributos para produtos variáveis. Dispondo de uma documentação completa e de claro entendimento, o plugin permite o uso de shortcodes e para personalização de atributos de produtos – você pode definir se quer utilizar paleta de cores, imagens ou texto. Algo que destaca ainda mais o WooSwatches é a prontidão, cuidado e atenção no suporte que os compradores do plugin recebem.

Baixar Demo | Hospedagem

Criando Atributos de Produtos

Se você já conhece um pouco sobre WooCommerce, a criação e adição de atributos para produtos não deve ser nenhuma novidade. Assim que se alguma dúvida ainda pairar, você pode seguir os passos a seguir para criá-los.

Dentro do seu Painel Administrativo, acesse Produtos > Atributos.

Adicione um nome do seu novo atributo, slug e clique no botão Adicionar atributo.

Depois, clique na opção de configurar termos do atributo.

Esse é o momento onde você vai adicionar as cores, tamanhos ou outras características pertencentes ao atributo que acabou de criar.

Para esse tutorial eu estou criando 2 tipos de atributos: cor e tamanho. A seguir você verá a configuração dos termos para o atributo cor e a configuração de suas respectivas amostras.

Adicione um nome e slug para a cor que deseja adicionar como termo do atributo Cor.

Em Display type selecione a opção Color. E em Chose color escolha na aquarela a respectiva cor.

Clique em Adicionar novo.

Esse processo deve ser feito quantas vezes forem necessárias para adicionar os temos de cada atributo que deseje utilizar para a venda de produtos WooCommerce.

Configurando Amostras de Atributos

Esse é o ponto em que vamos configurar o uso geral do plugin WooSwatches. Beleza? Para fazer isso, preciso que você acesse WooCommerce > Configurações e selecione a aba com o título WooSwatches.

Dentro da página de configurações do plugin, você precisa seguir as instruções que vou te passar agora.

Quando você obteve o plugin, deve ter recebido um Purchase Code (código de compra). A primeira opção da configuração do plugin pede que você insira-o para obter atualizações automáticas. Todavia, mesmo que você não informe tal código, conseguirá utilizar o plugin normalmente.

As 2 opções que vem a seguir são referentes a altura e largura que a amostra do atributo deve ter dentro da página do produto. Informe o tamanho que deseja em pixels.

Marque a opção Enable tooltip on swatches caso queira utilizar a exibição de balões explicativos com os nomes de cada termo do atributo.

Em Shop swatches location você vai selecionar em qual posição as amostras devem ser exibidas na página da loja: Após título e preço do item, Antes do título e preço ou Após o botão de opções.

Shop hover image size permite que você defina o tamanho da imagem ao passar o mouse (hover). Escolha entre: tamanho do catálogo, miniatura, médio ou completo.

Em Unavailable options behavior você define o comportamento do atributos para quando algum deles estiver indisponível. Escolha entre Não desabilitar e Desabilitar.

A configuração seguinte é idêntica a que você fez para o tamanho das amostras na página da Loja, mas com a diferença de que agora você vai dizer o tamanho das amostras na página do produto.

Para aplicativos mobile, você pode substituir o comportamento hover pela opção de “clicar”. Se quiser substituir dessa forma, marque o checkbox Replace hover with click on mobile devices.

Marque Enable direct variation link, para que quando um cliente clicar em cima das amostras dos atributos, eles sejam redirecionados para a página detalhada do produto.

A última opção é para que você habilite padrões para atributos – marque Enable default attribute options para habilitar.

Uma nova área para configuração será exibida com o título Default attribute options e nela será mostrado todos os atributos que você possui cadastrados em seu WooCommerce.

Configure o tipo, tamanho e formato das miniaturas. Clicar em Set color/images não será necessário, caso você já tenha definido tais informações no momento de criação dos atributos (Produtos > Atributos).

Finalizando todas as configurações, clique no botão Salvar alterações.

Adicionando Atributos e Configurando as Amostras

Agora que você configurou o comportamento padrão do plugin WooSwatches para sua loja WooCommerce, precisamos configurar nossos produtos.

Atributos e Variações

Crie um novo produto (Produtos > Adicionar produto) e especifique seu tipo como Produto variável. Para saber mais sobre a configuração de produtos variáveis, veja o post Como Cadastrar Produtos com Preços Variáveis no WooCommerce.

Na aba Atributos, selecione quais atributos você deseja adicionar para aquele produto e configure-o com as informações que desejar. Não esqueça de marcar a opção “Usado para variações” na configuração dos atributos!

Depois clique no botão Salvar atributos.

Agora clique para acessar a aba Variações. Como estamos trabalhando com a criação de um produto variável, precisamos adicionar os atributos criados antes para as variações do produto.

Produtos variáveis podem ser utilizados para a variação de preços ou simplesmente, manter os mesmos preços, mas alterar as suas características – essas características são os nossos atributos.

Adicione os atributos para as variações do produto e caso queira, altere os preços para cada variação. É importante atentar que, caso você queira que ao clicar em um dos atributos do produto a imagem de destaque seja alterada, é preciso configurar as imagens personalizadas dentro de cada variação!

Prossiga clicando no botão Salvar alterações.

Configurando Amostras

Agora estamos prontos para configurar as amostras dos atributos para nosso produto. Acesse a aba WooSwatches.

Você deve lembrar que no início desse tutorial nós criamos e configuramos o atributo cor e para ele, suas cores e amostras. Assim que caso queira exibir as cores que criamos como padrão, nenhuma alteração precisará ser feita – deixe selecionada a opção Global Values.

Entretanto, para o atributo tamanho nós não configuramos nada. Então, vamos configurar suas amostras agora.

Dentro de WooSwatches, clique para ver as configurações referentes a Tamanho.

Aqui eu vou te mostrar o uso Texto e Imagem para as amostras de atributos. Selecionei Text block para o tamanho G, Image para o tamanho M e Text block para o tamanho P.

Você pode configurar da forma que eu fiz ou fazer com as configurações que achar melhor.

Caso ache interessante exibir algum dos atributos do produto, na página da Loja ou das Categorias – marque o checkbox para “Enable one attribute swatches On shop/archive pages” e escolha qual atributo quer exibir. Veja a imagem:

Salve o produto e acesse a loja para ver como tudo ficou.

Resultado Cor e Imagem para Atributos

Página da Categoria do Produto

Página do Produto

Conclusão

No CanalWP nós temos objetivos e um dos principais é garantir que nossos leitores possam aumentar segurança, qualidade e experiência dos visitantes de seus sites e lojas virtuais. Já te ensinamos Como Instalar e Configurar o WooCommerce no WordPress para que você conquiste uma loja virtual excelente e com um sistema estável e robusto para vender produtos na internet.

A dica de hoje foi referente a customização e otimização do uso de atributos para produtos, utilizando o exemplo de cor e imagem para variação de produtos no WooCommerce. A ferramenta que utilizamos para alcançar o nosso objetivo é altamente intuitiva e muito utilizada por lojas WWC de todo o mundo. Por isso, se você quer que seus clientes façam compras de forma prática e fiquem satisfeitos com isso, o WooSwatches vai te ajudar.

Se de alguma forma você gostou desse artigo considere compartilhar nas redes sociais, se foi útil para você de alguma forma deixa a sua opinião nos comentários.