Como criar amostras de variação de rádio, etiqueta, cor e imagem para atributos de produtos variáveis do WooCommerce
Publicados: 2018-06-13A amostra de variação do produto WooCommerce é uma tecnologia incrível introduzida para aumentar as vendas e a conversão do site.
Pensando por que as amostras são incríveis, certo?
As amostras de variação do produto substituem o campo suspenso de seleção de variação de produto padrão do WooCommerce e habilitam amostras de cor, imagem, rótulo e rádio. Consequentemente, os clientes podem selecionar facilmente a variação de produto desejada e adicioná-la ao carrinho imediatamente.
Neste tutorial, mostrarei como você pode habilitar amostras de variação de rádio, rótulo, cor e foto no produto variável WooCommerce usando o tema OceanWP .
Estou assumindo que você tem o tema OceanWP instalado. Para habilitar amostras em seus produtos variáveis, instale primeiro o plugin WooCommerce Variation Swatches .
Demonstração ao vivo | Baixe o plugin WooCommerce Variation Swatches
Instalação de amostras de variação do WooCommerce
Você também pode baixar o plug-in WooCommerce Variation Swatches no back-end do seu site. Selecione Começar a instalar plug-ins no principal aviso do administrador.
Instale e ative o plugin WooCommerce Variation Swatches e Ocean Extra .
Se você não receber o aviso principal para instalar o plug-in de amostras, navegue até Plugins >> Adicionar novo . Pesquise amostras de variação do WooCommerce no campo de pesquisa. Instale e ative o plug-in WooCommerce Variation Swatches de Emran Ahmed .
Após a instalação e ativação do plugin com sucesso, é hora de criar amostras de variação de rádio, etiqueta, cor e imagem no tema OceanWP. Vamos iniciar o processo.
Configuração de amostras de variação do WooCommerce
Depois de instalar o plugin Woocommerce Variation Swatches and Photos no seu tema OceanWP. É hora de configurar este plugin para seus produtos variáveis. Existem duas maneiras de instalar este plugin.
- Ativar amostras de variação para produtos variáveis existentes
- Amostras de variação de configuração Para novos produtos variáveis
Neste tutorial, vou descrever as duas maneiras.
Ativar amostras de variação para produtos variáveis existentes
Muitos de vocês já têm produtos variáveis criados em sua loja. Se você deseja transformar a seleção suspensa de variação do produto em amostras de rádio, etiqueta, cor e imagens, você seguiu este tutorial aqui. Verifique a captura de tela a seguir. A lista suspensa de seleção de variação padrão atualmente se parece com a captura de tela a seguir em seu site. Nas próximas etapas, mostrarei como você transforma o campo de seleção de variação em belas amostras.
Antes
Depois
Etapa 01: Editando o atributo
Vá para Produtos >> Atributos . Todos os atributos globais existentes são listados na seção de atributos. Depois de instalar o plugin WooCommerce Variation Swatches, ele adiciona o campo Type . Por padrão, ele mostraria select em Type title.
Como o WooCommerce Swatches Plugin vem com três tipos de atributos: Cor, Imagem, Botão . Você pode definir qualquer tipo de atributo para o atributo desejado.
Para fins de demonstração, foi criado o atributo Tecidos, Padrão e Etiqueta . Adicione o tipo de atributo Color para o atributo Pattern , o tipo de atributo Image para o atributo Fabrics e o tipo de atributo Button para o atributo Label .
Para definir o tipo de atributo de cor para o atributo Padrão , clique em Editar .
Selecione Tipo de cor na lista suspensa de tipos.
Voltar Produtos >> Atributos . Edite o atributo Fabrics como o atributo Pattern .
Voltar Produtos >> Atributos novamente. Edite o atributo Label como o atributo Tecidos e Padrão .
Quando a seleção do tipo de atributo estiver concluída, volte para a página da lista de atributos. A lista de atributos se parece com a imagem a seguir.
O frontend do produto se pareceria com a captura de tela a seguir após selecionar os tipos de atributo para os atributos do produto.
As variações para o atributo Label parecem boas, mas as variações para o atributo Pattern precisam definir cores e as variações para o atributo Fabrics precisam adicionar imagens.
Passo 02: Editando Variações
Para definir cores como variações dentro do atributo Pattern . Vá até Produtos >> Atributos . Selecione Configurar termos do atributo Padrões .
Depois de selecionar Configurar termos, aparece uma lista de variações de atributos. Para Padrão, três variações: variações de Azul , Verde e Vermelho são listadas aqui. Edite cada variação uma por uma para adicionar a cor da variação.
Para demonstração, selecione Editar link para variação de verde .
Do painel de edição de variação. Selecione a cor desejada no Colorpicker e atualize as alterações pressionando o botão Atualizar .
Quando todas as cores das variações são atualizadas com sucesso, o frontend se parece com o seguinte.
Após atualizar as variações do atributo padrão, edite o atributo Fabrics selecionando Configurar termos como atributo padrão .
Depois de pressionar Configurar termos, uma lista de termos do Fabrics aparece como padrão. Edite cada variação para inserir a imagem das variações. Para fins de demonstração, edite o link para o atributo Chambray .
Do painel de edição de variação. carregue a imagem de variação desejada da imagem e atualize as alterações pressionando o botão Atualizar .
Depois de atualizar as imagens para todas as variações, o frontend gostaria da seguinte captura de tela.
Amostras de variação de configuração para novos produtos variáveis
Este é o passo para quem não tem nenhum produto variável criado para sua loja. Primeiro, criaremos produtos variáveis e habilitaremos amostras para eles.
Etapa 01: Criar Atributos e Variações Globais
Após a instalação e ativação do plugin com sucesso, crie seu atributo desejado globalmente em Products >> Attributes . Criar variação de padrão , tecidos, comprimento e tamanho , insira o título do atributo e o tipo de atributo correspondente no menu suspenso Tipo.
Quando o atributo cor, imagem e etiqueta Padrão , Tecidos , Etiqueta e Tamanho é criado com sucesso, ele cria uma lista de atributos à esquerda.
Depois de criar atributos globais, adicione variações de atributo selecionando Configurar termos. Para criar variações para atributos de padrão , selecione Configurar links de termos . Preencha o campo Nome e selecione os códigos de cores. Crie variações de verde , azul e vermelho para atributos de cor.
Uma lista de variações de atributos aparece na tela esquerda após a adição de variações para atributos de padrão .
Vá para Produtos >> Atributos novamente. Crie variações para os atributos do Fabrics , selecione Configurar links de termos do Fabrics . Preencha o campo Nome e adicione uma imagem de variação da biblioteca de mídia ou faça o upload do computador.
Crie variações de Chambray, Velduroy e Embossed para atributos de imagem e eles aparecerão à esquerda.
Crie variações para os atributos Radio e Label, como as variações Image e Color.
Etapa 02: exibir amostras na página de produto variável
Para habilitar amostras na página do produto variável. Entre no modo de edição do produto desejado, selecione o produto variável em Dados do produto .
Vá para a guia Atributos . Clique no menu suspenso Atributo de produto personalizado . Aqui todos os atributos criados globalmente aparecem. Adicione todos os atributos um por um.
Depois de adicionar todos os atributos, pressione o botão Selecionar tudo em cada configuração de atributo para adicionar todas as variações disponíveis de uma só vez. Depois de adicionar variações de atributos do produto, salve as configurações selecionando os botões Salvar atributos .
Agora entre na guia Variações . Clique no menu suspenso Adicionar variação . Aqui surgem duas opções. A primeira é Adicionar variação e a segunda é Criar variações de todos os atributos.
Selecione Criar variações de todos os atributos e pressione Ir . Ele adicionará todas as combinações de variações disponíveis criadas para atributos. Adicione preço e imagem de variação para variação individual e salve as configurações.
Conclusão
Eu tentei cobrir todas as etapas para instalar o WooCommerce Variation Swatches Plugin no tema OceanWP. Deixe-me saber na caixa de comentários se você precisar de mais ajuda.