Como habilitar amostras de cores do WooCommerce para variações de produtos variáveis ​​no tema Flatsome (globalmente)

Ter variação de produto é um fato comum para eCommerce. Se você tem um e-commerce, com certeza precisa configurar sua loja para a variação de seus produtos. As amostras de cores do WooCommerce podem ajudá-lo a fazer isso.

No WooCommerce, você recebe um menu suspenso por padrão para lidar com a variação do produto.

Eu sei o que você está pensando agora! Você está pensando, “e daí! Por que esses caras estão fazendo barulho?”

Vamos esclarecer nosso ponto de vista. Acreditamos que o objetivo de todo proprietário de comércio eletrônico é aumentar as vendas e manter os visitantes em seu site. Para mantê-los por mais tempo, você precisa oferecer a eles uma experiência perfeita para que eles se sintam confortáveis ​​em permanecer no seu site por um longo tempo.

A lista suspensa para ver variações dos produtos é um processo antigo, também requer mais cliques para visualizar uma variação. Esta não é uma experiência reconfortante para os visitantes, é por isso que você deve usar algo que possa suavizar a experiência de visualizar diferentes variações. Aqui estão as amostras de variação para tornar as coisas fáceis e perfeitas. Embora Variation Swatches ofereça amostras de cores, imagens e botões, neste artigo, focaremos apenas em amostras de cores.

Existem vários benefícios diretos e indiretos de usar WooCommerce Color Swatches para variações de produtos. Vamos descobrir alguns!

1. Dá aos seus visitantes uma experiência suave
2. Explorar variações de cores pode aumentar as vendas
3. Os visitantes precisam de menos cliques para visualizar a variação de um produto
4. Uma melhor experiência do usuário envia um sinal positivo aos mecanismos de pesquisa para que eles possam promover esse conteúdo

Animado para habilitar amostras de cores do WooCommerce em sua loja, certo? Vamos começar com todo o processo!

Como ativar o plug-in WooCommerce Color Swatches na eStore

Antes de começar, queremos informá-lo sobre alguns pré-requisitos. O primeiro é um tema WooCommerce. Você precisa de um tema WooCommerce para começar com Variation Swatches. Você pode escolher qualquer tema gratuito ou premium para sua loja. Sugerimos que você use um tema de alta qualidade como Flatsome, storefront, etc. Então você precisa instalar o plugin Variation Swatches .

Passo 1: Vá para o Painel.

Passo 2: Passe o cursor sobre os Plugins e clique em Adicionar Novo.

Etapa 3: Uma página de pesquisa será exibida. No canto superior direito, você encontrará uma caixa de pesquisa. Digite WooCommerce Variation Swatches, instale e ative o plugin.

Assim, os pré-requisitos estão preparados. Agora, podemos avançar para usar amostras de variação para habilitar amostras de cores para variações de produtos variáveis.

Depois de instalar com sucesso e ativar o plug-in WooCommerce Variation Swatches, é hora de criar amostras de cores.

Vamos iniciar o processo!

Etapa 01: criar atributo de produto variável

Primeiramente, precisamos criar um atributo de cor e variações globalmente. Para criá-lo, vá até o Dashboard , clique em Products , depois vá em Attributes . Você encontrará uma caixa de atributos . Preencha os campos obrigatórios conforme sua exigência. Para fins de demonstração, estamos nomeando o atributo como Color . Estamos deixando o slug vazio porque ele gera automaticamente um slug para o atributo. Estamos selecionando Tipo como Cor .

Você pode escolher as opções e nomear conforme sua preferência. Se você não tem nenhum, siga o nosso. Após preencher os campos obrigatórios, clique no botão Adicionar atributo .

Depois disso, uma lista será criada no lado direito, como na captura de tela a seguir.

Etapa 02: criar variações de atributo

Você pode adicionar mais atributos à lista usando o mesmo processo. Depois de criar um atributo, você precisa criar uma variação de atributo. Para criar variações de produtos para atributos, percorra a lista e clique em Configurar termos do atributo.

Criamos o atributo Color , por exemplo. Dentro do atributo color, você pode adicionar cores como variações dentro do atributo. Você também pode escolher qualquer cor que desejar, mas para fins de demonstração, adicionaremos Vermelho , Verde e Azul . Resumindo, para criar uma variação, preencha o campo de nome, deixe o slug vazio e selecione a cor.

Etapa 03: habilitar variação de atributo no produto variável

Agora, precisamos vincular uma amostra de cor criada globalmente com um produto variável. Para ativar produtos de variação de atributo, acesse os produtos e edite-os. Esteja consciente sobre a seleção de um produto variável dos Dados do Produto .

Depois disso, clique nos atributos à esquerda. Uma nova página será aberta. Há um menu suspenso chamado Atributo de produto personalizado onde você pode encontrar todos os atributos criados globalmente. Aqui, você verá o único atributo Color , porque acabou de criar apenas o atributo Color.

Selecione o atributo que deseja selecionar, para fins de demonstração, selecione Cor . Depois de selecionar, esta página aparecerá.

Para selecionar todas as variações disponíveis, clique no botão Selecionar tudo . Você também pode desmarcar o botão tudo clicando em Selecionar nenhum . Em seguida, marque Usado para variações e clique em Salvar atributos .

Clique na guia Variações e uma nova página aparecerá. Lá você notará duas opções, uma é Adicionar Variação e outra é Criar Variações de todos os atributos .

Selecione qualquer opção dessas duas opções. Para fins de demonstração, vamos selecionar Criar variação de todos os atributos .

Agora, as variações de cores são visíveis com os produtos. Você também adiciona mais detalhes específicos de variação aqui, como imagens de variação, preços de variação e outras variações específicas. Depois de fazer tudo isso, clique no botão Salvar alterações .

PS: Adicione preços em cada variação, caso contrário, as variações não serão visíveis no frontend do produto.

Depois de adicionar amostras de variação com sucesso, a página do produto individual ficará assim.

Configurações simples

Variation Swatches é um plugin essencial para sites WooCommerce. Mais de 300 mil sites WooCommerce estão usando este plugin. Ele ajuda você a ativar a dica de ferramenta, desativar a folha de estilo padrão do plug-in e alternar entre formas redondas e quadradas.

Altere o estilo da forma de redondo para quadrado e ative a dica de ferramenta. Depois disso, o front-end da página do produto ficará assim.

Configurações avançadas

Variation Swatches também possui alguns recursos avançados que podem oferecer mais. Você pode controlar a largura, a altura e o tamanho da fonte da Variation Swatch. Ele também oferece a exibição inteligente de itens esgotados.

Para exibir fora de estoque, você precisa selecionar a opção Blur do Attribute Behavior. Depois de selecionar isso, seu produto responderá da seguinte maneira.

Ativar amostras de cores nas páginas da loja do tema Flatsome

Além de adicionar amostras de cores às páginas do produto, você também pode adicionar as amostras de cores do WooCommerce nas páginas de arquivo do produto. Para usar esse recurso, você precisa atualizar sua versão para o pro. Se você ainda não tem a versão pro, faça com que ela use todo o poder dos Variation Swatches.

Para habilitar amostras de cores na página de arquivo/loja, verifique as configurações Mostrar no arquivo para mostrar amostras de cores na página de loja/arquivo. Se você estiver usando o tema Flatsome, poderá ativar amostras antes e depois de adicionar ao botão do carrinho na loja nas configurações de Posição de amostras de arquivo. Você também pode controlar o tamanho das amostras de variação de cor dessas configurações.

Quando você habilitar amostras na página da loja, ficará assim.

Personalizar dica de ferramenta e amostra nas páginas de loja/arquivo

Se você deseja personalizar a cor da dica de ferramenta e habilitar amostras de variação na loja, você precisa usar a versão premium das amostras de variação.

Ativar dica de ferramenta

Usando as configurações avançadas, você pode personalizar o plano de fundo da dica de ferramenta e a cor do texto. Para personalizar a dica de ferramenta, verifique abaixo.

A visualização final do frontend da dica de ferramenta.

Conclusão

Essa tecnologia aumentará a usabilidade e a conversão do seu site. Também garante que seus clientes tenham uma experiência perfeita ao visitar seu site. Além disso, indiretamente, pode melhorar suas vendas e ajudá-lo a expandir sua loja WooCommerece.

Se você enfrentar algum problema ao instalar este plugin no tema Flatsome, informe-nos na seção de comentários. Tentaremos responder o mais rápido possível!