Como adicionar dinamicamente uma barra de código de cupom a páginas de produtos específicos com Divi

Quando você administra uma loja online que fez com Divi e WooCommerce, ocasionalmente deseja mostrar códigos de cupom em seu site para aumentar o senso de urgência. Em toda a web, você notará que muitas lojas online compartilham os códigos de cupom em uma barra que fica presa no topo da página. Agora, com o Divi's Theme Builder, você pode adicionar automaticamente essa barra de código de cupom a produtos que são elegíveis para o código de cupom.

Neste tutorial, mostraremos exatamente como fazer isso. Este tutorial contém várias partes, desde a configuração do código do cupom até a criação de um modelo de produto separado para produtos na categoria de desconto. Você também poderá baixar o arquivo JSON do modelo gratuitamente! O estilo geral que estamos usando é baseado no layout de página de produto ousado que compartilhamos no passado.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o modelo da página do produto GRATUITAMENTE

Para colocar as mãos no modelo da página do produto, primeiro você precisa baixá-lo usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Visão geral do tutorial

• Certifique-se de ter o Divi e o plugin WooCommerce instalados em seu site
• Na primeira parte do tutorial, criaremos uma nova categoria de produto com desconto
• Iremos atribuir os produtos elegíveis a esta nova categoria de produto
• Em seguida, criaremos um novo código de cupom e garantiremos que ele se aplique apenas à categoria de produto que criamos
• Dentro do criador de temas, criaremos um novo modelo para essa categoria de produto específica
• Vamos reutilizar o corpo normal da página do produto para este modelo e adicionar uma barra de código de cupom usando as opções integradas do Divi

1. Crie uma nova categoria de produto com desconto

Vá para Categorias de produtos e adicione uma nova categoria de produto com desconto

Comece instalando o plugin WooCommerce em seu site WordPress e adicione uma nova categoria de produto dedicada a todos os produtos elegíveis para o novo desconto. Se estiver planejando usar o código de cupom em categorias de produtos existentes, você pode usá-los.

2. Atribuir produtos a uma nova categoria de desconto

Editar Produto

Em seguida, abra os produtos que deseja incluir na venda.

Atribuir produtos a uma nova categoria de desconto

E inclua-os na nova categoria de produtos com desconto.

3. Crie um código de cupom WooCommerce

Vá para Cupons e Adicionar Novo Cupom

A próxima parte deste tutorial trata da criação de um novo código de cupom. Vá para o painel do WordPress> Cupons> e clique em 'Criar seu primeiro cupom' .

Adicionar código de cupom e dados de cupom

Adicione o código do cupom na parte superior e selecione as configurações gerais que deseja aplicar ao código do cupom.

• Código de desconto: adicione o código de desconto
• Tipo de desconto: desconto percentual
• Valor do cupom: Adicionar porcentagem
• Data de validade do cupom: selecione a data

Adicionar restrição de uso

Em seguida, avance para a restrição de uso e certifique-se de que o código do cupom funciona apenas em produtos dentro da sua categoria de produto com desconto.

• Categorias de produtos: desconto

4. Adicionar novo modelo para categoria de desconto

Adicionar novo modelo

Depois de criar o código do cupom, é hora de incluí-lo nas páginas de produtos relevantes! Para fazer isso, vá para o Divi Theme Builder e adicione um novo modelo.

Usar em

Use este novo modelo na categoria de produto com desconto.

• Use em: Produto na categoria de produto específica: Desconto

5. Reutilize o corpo da página de produto global para um novo modelo

Arraste o corpo do modelo do produto para o corpo do novo modelo

Você pode reutilizar o corpo do modelo da página do produto normal apenas arrastando-o para o novo modelo. Neste tutorial, estamos usando o layout de página de produto em negrito que criamos em outro tutorial. Você pode baixar o arquivo JSON do layout na postagem do blog.

6. Adicione a barra de código do cupom superior ao corpo do novo modelo

Entrar no Editor de modelo de corpo

Depois de adicionar o corpo da página do produto ao seu novo modelo, você pode começar a editá-lo. As alterações feitas neste modelo aparecerão apenas nas páginas dos produtos que fazem parte da categoria de produtos com desconto.

Adicionar nova seção ao topo

Dentro do editor de modelos, a primeira coisa que faremos é adicionar uma nova seção ao topo.

Cor de fundo

Abra as configurações da seção e altere a cor de fundo.

• Cor de fundo: # e02b20

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Animação

Conclua as configurações da seção adicionando uma animação.

• Estilo de animação: slide
• Direção da animação: baixo
• Duração da animação: 1500ms
• Atraso de animação: 1000 ms
• Opacidade inicial da animação: 100%
• Curva de velocidade de animação: Ease-In-Out
• Repetição de animação: uma vez

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha e permita que a linha ocupe toda a largura do contêiner de seção.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Coluna 1

Espaçamento

Em seguida, abra as configurações da coluna 1 e adicione um pouco de preenchimento superior e inferior.

• Enchimento superior: 25px
• Preenchimento inferior: 25 px

Coluna 2

Cor de fundo

Abra as configurações da coluna 2 também e adicione uma cor de fundo branca.

• Cor de fundo: #ffffff

Espaçamento

Adicione também algum preenchimento personalizado superior e inferior a esta coluna.

• Enchimento superior: 20 px
• Preenchimento inferior: 20 px

Fronteira

E inclua algum raio da borda superior esquerda e direita.

• Superior esquerdo + superior direito: 30 px

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

O primeiro e único módulo de que precisamos na coluna 1 é um Módulo de Texto. Insira alguma cópia de sua escolha.

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto de acordo:

• Fonte do texto: Montserrat
• Cor do texto: #ffffff
• Tamanho do texto: 16px
• Alinhamento de Texto: Centro

Adicionar Módulo de Texto à Coluna 2

Adicionar código de cupom à caixa de conteúdo

Na segunda coluna, adicione outro Módulo de texto com o código de desconto adicionado na primeira parte do tutorial.

Configurações de texto

Altere as configurações de texto do módulo da seguinte forma:

• Fonte do texto: Montserrat
• Peso da fonte do texto: pesado
• Cor do texto: # 000000
• Tamanho do texto: 19px
• Alinhamento de Texto: Centro

Dimensionamento

Em seguida, modifique as configurações de dimensionamento.

• Largura: 50%
• Alinhamento do Módulo: Centro

Espaçamento

Adicione um pouco de preenchimento inferior também.

• Preenchimento inferior: 10 px

Fronteira

E complete as configurações do módulo adicionando uma borda inferior.

• Largura da borda inferior: 1 px
• Cor da borda inferior: # 333333

7. Salvar alterações do Theme Builder e visualizar o resultado

Depois de concluir a página do produto modificado, você pode salvar as alterações do modelo, sair do Theme Builder e ver o resultado nas páginas do produto com desconto!

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como criar uma barra de código de cupom e permitir que ela apareça automaticamente nas páginas de produtos que são elegíveis para o código de cupom em questão. Essa é uma ótima maneira de dar incentivo extra aos visitantes para que comprem seus produtos. Você também conseguiu baixar o arquivo JSON de modelo gratuitamente! Se você tiver alguma dúvida, deixe um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.