Deal Products é um widget geral do ShopEngine que você pode usar em qualquer um dos modelos wooCommerce. Este widget destaca os produtos que são à venda com cronograma de início e término da venda, produtos disponíveis, número total de itens vendidos e muito mais opções.

Observação: Este widget mostra apenas produtos que estão em venda com agendamento. Produtos em promoção sem agendamento não aparecerão neste widget.

Vamos aprender como você pode usar widgets de produtos de negócios em seu site wooCommerce:

Etapa 1: ativar o widget de produtos da oferta #

Para ativar o widget,

• Vá para ShopEngine > Widgets > Produtos promocionais
• Ligar Oferta de produtos na seção Geral
• Salvar mudanças

Observação: Você também pode ativar os Produtos da Oferta com uma configuração global que ativa todos os widgets do ShopEngine.

Etapa 2: adicionar produtos da oferta #

Antes de adicionar o widget, você precisa primeiro criar um modelo ShopEngine WooCommerce. Confira a documentação em como criar um modelo.

Para adicionar produtos da oferta:

• Vá para ShopEngine > Modelos > Qualquer modelo do ShopEngine
• Clique em Editar com Elementor

• Procurar para a opção de pesquisa de produtos de oferta na Elements
• Arraste e solte o widget 
• Clique em Atualizar para salvar as alterações.

Etapa 3: configurações de conteúdo dos produtos da oferta #

Clique no ícone de edição e vá para o Contente guia para personalizar as seguintes configurações:

Expandir Layout e Produto opção para editar:

• Ordem: Você pode definir a ordem como crescente ou decrescente.
• Ordenar por: Escolha entre opções, incluindo ID, Título, Nome, Data e Popularidade.
• Mostrar produto: Defina quantos produtos você deseja mostrar neste widget de produtos promocionais.
• Coluna: Escolha o número do produto que deseja mostrar por coluna.
• Lacuna da coluna: Selecione a lacuna desejada entre as colunas.
• Espaço entre linhas: Aqui você pode selecionar a lacuna entre cada coluna.

Expandir o Configurações opção para editar:

• Ativar selo de venda: Você pode optar por mostrar ou ocultar o selo de venda.
• Limite de palavras do título: Personalize o título do selo de venda.
• Selo de porcentagem: Você pode usar esta opção para mostrar a porcentagem de venda.
• Relógio de contagem regressiva: Ative esta opção para mostrar o relógio de contagem regressiva.
• Dias: Se você estiver doando por menos de um dia, poderá usar esta opção para ocultar a opção do dia do relógio de contagem regressiva.

Etapa 4: configurações de estilo dos produtos da oferta #

Vou ao Estilo para personalizar as seguintes configurações de estilo:

• Invólucro do produto
  • Preenchimento: Ajuste o preenchimento superior, direito, inferior e esquerdo.
  • Cor de fundo: Altere a cor de fundo do widget.
  • Largura da borda: Selecione a largura da borda desejada em torno de cada uma das seções do produto.
  • Cor da borda: Escolha uma cor para a borda.

• Imagem do Produto
  • Altura: Selecione a altura da imagem do produto para o widget.
  • Tamanho: Você pode selecionar o tamanho da imagem como conteúdo ou capa.
  • Posição: Se decidir escolher uma capa, você terá outra opção para escolher a posição. Aqui você pode escolher a posição superior, central ou inferior.
• Selo de porcentagem:
  • Preenchimento: Ajuste o preenchimento superior, direito, inferior e esquerdo.
  • Raio da borda: Escolha os valores superior, direito, inferior e esquerdo para o raio da borda.
  • Posição esquerda:  Aqui você pode ajustar a posição horizontal do emblema de porcentagem.
  • Posição superior: Ajuste a posição vertical do emblema de porcentagem.
  • Cor:  Escolha a cor do texto percentual.
  • Fundo: Escolha uma cor de fundo para o fundo do emblema de porcentagem.
  • Tipografia:  Clique em editar tipografia para escolher a cor e a espessura da fonte.
• Selo de venda:
  • Preenchimento: Ajuste o preenchimento superior, direito, inferior e esquerdo. 
  • Raio da borda: Escolha os valores superior, direito, inferior e esquerdo para o raio da borda.
  • Posição esquerda:  Aqui você pode ajustar a posição horizontal do emblema de venda.
  • Posição superior: Ajuste a posição vertical do emblema de venda.
  • Cor:  Escolha a cor do texto da venda.
  • Fundo: Escolha uma cor de fundo para o fundo do emblema de venda.
  • Tipografia:  Clique em editar tipografia para escolher a cor e a espessura da fonte.
• Relógio de contagem regressiva:
  • Cor do número: Escolha uma cor para os números no relógio de contagem regressiva.
  • Tipografia numérica: Aqui você pode escolher o tamanho da fonte, a espessura e o estilo de transformação.
  • Cor da etiqueta: Escolha a cor do rótulo dia, hora, minuto e segundo.
  • Tipografia da etiqueta:  Aqui você pode escolher o tamanho da fonte, espessura, estilo de transformação e altura da linha dos rótulos.
  • Fundo: Altere a cor de fundo dos rótulos.
  • Cor da borda: Escolha a cor da borda.
  • Largura da borda: Selecione o tamanho da largura da borda.
  • Preenchimento: Ajuste o preenchimento superior, direito, inferior e esquerdo 
  • Fundo do espaço: Aqui você pode escolher o espaço inferior.
  • Largura do invólucro de contagem regressiva:  Escolha a largura de toda a seção de contagem regressiva.

• Estilo de conteúdo:
  • Cor do título: Altere a cor do título do produto.
  • Cor do título ao passar o mouse: Escolha uma cor de foco para o título.
  • Tipografia do título: Aqui você pode alterar o tamanho da fonte, peso, transformação e altura da linha do título.
  • Margem do título: Escolha as margens superior, direita, inferior e esquerda do título.
  • Margem da linha de preço: Selecione as margens superior, direita, inferior e esquerda da linha de preço.
  • Cor do preço normal: Escolha uma cor pelo preço normal.
  • Tipografia de preço normal: Aqui você pode selecionar o tamanho e a espessura da fonte e transformá-la pelo preço normal.
  • Cor do preço de venda: Escolha uma cor para o preço de venda.
  • Tipografia de preço de venda: Aqui você pode selecionar o tamanho da fonte, peso e transformá-lo para o preço de venda.

• Barra de estoque e progresso
  • Cor do texto: Altere a cor das opções disponíveis e vendidas.
  • Tipografia de texto:  Aqui você pode selecionar o tamanho da fonte, espessura, transformação e altura da linha para a opção disponível e vendida.
  • Estilo de tampa de linha: Você pode escolher o estilo da tampa redonda como redondo ou quadrado.
  • Cor da linha normal: Escolha a cor da borda de cada seção de estoque.
  • Altura normal da linha: Selecione a altura da linha.
  • Cor da linha ativa: Altere a cor da linha ativa aqui.
  • Altura da linha ativa: Aqui você pode escolher a altura da linha ativa.
• Fonte Global
  • Família de fontes: Aqui você pode alterar a família de fontes de todo o widget.

Depois de fazer todas as alterações clique atualizar salvar. Agora os Deal Products devem estar visíveis na vitrine com toda a customização e estilo.

Aqui está uma prévia da aparência do widget Deal Products