Loja Virtual WooCommerce – Etiquetas de Promoção

Etiquetas servem ao propósito de anunciar uma condição especial de algum produto e gerando mais interesse para seu cliente. Vamos ver neste tutorial como configurar as etiquetas promocionais utilizando a versão gratuita do WooCommerce Advanced Labels.

Por padrão, o WooCommerce utiliza a etiqueta de oferta conforme o print acima, com pouca opção de customização e sem a porcentagem aplicada de desconto. No tutorial iremos modificar a etiqueta para mostrar a porcentagem aplicada de desconto numa caixa azul escuro, posicionado no topo à direita.

Configuração:

O primeiro passo são as configurações globais do plugin, localizadas na barra lateral do painel > BeRocket > Etiquetas de produto

1. Desativar etiquetas globais

Desativa a exibição de todas as etiquetas.

 

2. Desativar etiquetas de produto

Desativa a exibição de etiquetas definidas na página de cadastro de produto

 

3. Desativar etiquetas na página de produto

Desativa a exibição de etiquetas na página do produto

 

4. Remover etiqueta de oferta do WooCommerce

Desativa a exibição padrão da etiqueta do WooCommerce

 

5. Start for Better posição inicial

Define um posicionamento padrão para as etiquetas

 

6. Conjunto de Atributo

Define qual linha de exibição será utilizada (apenas para casos onde será utilizado mais de uma etiqueta ao mesmo tempo)

Com as configurações globais salvas, basta clicar no item 3, submenu do Etiqueta de produto ou no botão + Etiquetas para ser levado  para a criação das etiquetas que serão parte dos produtos da sua loja virtual WooCommerce.

Com uma página semelhante a de posts é possível criar suas etiquetas ou editar etiquetas já existentes.

A etiqueta será criada em duas etapas, a parte visual e a parte lógica. Iremos começar pela parte visual.

Opções:

1. Adicionar título

Nome da etiqueta no painel administrativo

 

2. Abas de configuração

Menu para a seleção de atributos que serão configurados

 

3. Pré-Visualizar

Visualização da sua etiqueta em tempo real

A versão gratuita do plugin permite que seja criada etiquetas em CSS ou utilizando uma imagem. Vamos abordar primeiro o template em CSS:

Aba Geral -> Template em CSS

1. Template em CSS

Habilita as opções para a etiqueta em CSS

 

2. Templates para seleção

Seleciona um template base para a customização

 

3. Tipos de conteúdo

Tipo de conteúdo da etiqueta, pode receber os valores: TextoPorcentagem de desconto, PreçoStatus de Estoque

Texto: Etiqueta mostra um valor em texto

Porcentagem de desconto: Etiqueta mostra a porcentagem de desconto do produto

Preço: Etiqueta mostra o preço do produto

Status de Estoque: Etiqueta mostra o estoque restante do produto

Aba Geral -> Template em imagem

1. Template em Imagem

Habilita as opções para a etiqueta em imagem

 

2. Templates para seleção

Abre a janela de upload de mídia do WordPress para seleção ou upload da imagem

Aba Estilo

1. Usar cor de fundo

Habilita o campo 2 para definir uma cor de fundo na etiqueta

 

2. Cor de fundo

Cor de fundo para a etiqueta

 

3. Família da fonte

Fonte da etiqueta

 

4. Tamanho da fonte

Tamanho da fonte da etiqueta

 

5. Altura da linha

Altura da linha da fonta da etiqueta

 

6. Altura

Altura total da etiqueta

 

7. Largura

Largura total da etiqueta

 

8. Raio de borda

Raio da borda da etiqueta

Aba Posição

1. Tipo

Define se a etiqueta ficará dentro da imagem ou “pendurada” como uma etiqueta física

 

2. Melhor Posição

Habilita a posição definida no Better Position, como posição padrão

 

3. Posição

Posição horizontal da etiqueta na imagem

 

4. Posição da linha

Posição da etiqueta nas linhas (apenas se existir mais de uma etiqueta)

 

5. Paddings

Espaço de preenchimento da etiqueta (padding no CSS)

 

6. Margem

Espaço de margem da etiqueta (margin no CSS)

 

7. Z-Index

Valor de empilhamento da etiqueta (z-index no CSS)

Aba Caixa de ajuda

1. Conteúdo

Texto que será exibido naa caixa de ajuda

 

2. Estilo

Estilo da caixa de ajuda

 

3. Posição

Posição de exibição referente à etiqueta da caixa de ajuda

 

4. Delay de abertura

Tempo entre a ação e a abertura da caixa de ajuda

 

5. Delay de fechamento

Tempo entre a ação e o fechamento da caixa de ajuda

 

6. Abrir em

Ação para abrir a caixa de ajuda

 

7. Fechar ao clicar em qualquer lugar

Fecha a caixa de ajuda clicando em qualquer lugar da tela

 

8. Usar seta

Habilita uma seta entre a etiqueta e a caixa de ajuda

 

8. Largura máxima

Largura máxima que a caixa de ajuda terá

Condições:

O campo de condições é o motor que fará com que suas etiquetas sejam mostradas corretamente. Vamos ao campo:

1. Aŕea de Condição

Condição que aplicará o cupom no produto. O valor do campo de texto será referente ao valor do menu dropdown escolhido. A relação entre eles será igual ou diferente

 

2. Adicionar condição E

Adiciona uma condição E, que trabalhará em conjunto com as condições de dentro da sua seção numa relação de (Condição 1 E Condição 2)

 

3. Adicionar condição OU

Adiciona uma condição OU, que trabalhará  em conjunto com as condições de diferentes seções numa relação de ([Condição 1 E Condição 2OU Condição 3)

 

Criação:

Vamos criar uma etiqueta de imagem para destacar todos os produtos que estão em promoção e uma etiqueta de porcentagem para mostrar o desconto dado pela promoção. Vamos lá, começando pela etiqueta de imagem.

1. Nome definido como Etiqueta de Promoção

2. Condição definida para a etiqueta como On Sale: Yes

3. Template de imagem selecionado

4. Upload da imagem feita

5. Pré-visualização da imagem carregada e selecionada

1. Tipo de etiqueta definido como Na imagem

2. Melhor Posição ativada

3. Posição Direita

4. Posição da linha Linha1

5. Margem: Topo -30px, Direita -30px, Rodapé 0px, Esquerda 0px

6. Z-Index: 500

Salvo a etiqueta e volto na minha loja para verificar o resultado.

Partindo para a etiqueta de porcentagem de desconto agora.

1. Nome definido como Etiqueta de Porcentagem

2. Condição definida para a etiqueta como On Sale: Yes

3. Template CSS selecionado

4. Modelo selecionado

5. Tipo de conteúdo Porcentagem de desconto

6. Texto após: OFF, texto numa nova linha habilitado

7. Pré-visualização da etiqueta

1. Usar cor de fundo habilitado

2. Cor de fundo #099C52

3. Cor da fonte #FFFFFF

4. Família da fonte: Padrão

5. Tamanho da fonte: 16px

6. Altura da linha: 1.2em

7. Pré-visualização da etiqueta

1. Tipo de etiqueta definido como Na imagem

2. Melhor Posição desativada

3. Padding do topo: 5px

4. Padding da esquerda: 5px

5. Posição: Esquerda

6. Margem: Topo -30px, Direita -30px, Rodapé 0px, Esquerda 0px

7. Z-Index: 500

8. Pré-visualização

Salvo a etiqueta e vamos para a loja ver o resultado final dos produtos em promoção com ambas as etiquetas ativas.

Conseguimos configurar duas etiquetas, assim o cliente tem uma visão geral dos produtos em oferta e já batendo o olho consegue ver o desconto aplicado.

Com essa ferramenta você conseguirá criar diversas etiquetas para os mais variados eventos da sua loja virtual.

Últimas postagens:

Loja Virtual WooCommerce – FRENET módulo de frete

Loja Virtual WooCommerce – FRENET módulo de frete

A operação de uma loja virtual implica também na distribuição dos produtos e o cálculo do frete é peça fundamental nesse processo. O frete, por muita vezes, é o fator determinante para a finalização de um pedido. Vamos aprender juntos como integrar seu WooCommerce com...

Loja Virtual WooCommerce – Edição em Massa de Produtos

Loja Virtual WooCommerce – Edição em Massa de Produtos

Não há tempo a perder quando se está vendendo na internet e a possibilidade de editar vários produtos ao mesmo tempo, com um vínculo em comum ou não, é imprescindível para o gestor de loja virtual da atualidade. Utilizando o YITH Bulk Product Editing você realiza essa...

Loja Virtual WooCommerce – Cupom de desconto

Loja Virtual WooCommerce – Cupom de desconto

O cupom de desconto é um atrativo para capturar clientes e incentivar um ticket médio maior na sua loja virtual. Aqui você irá aprender como configurar um cupom de desconto no seu Woocommerce utilizando diversas customizações para dar um gás nas suas vendas.Antes de...