O widget Guias de produtos é um widget de modelo de página única. Isso é usado para exibir descrições e análises de produtos e também fornece um formulário para enviar uma nova avaliação.

Vamos aprender como você pode usar widgets de guias de produtos em seu site wooCommerce:

Etapa 1: ativar o widget de guias de produtos #

Para ativar o widget,

• Vá para ShopEngine > Widgets > Guias de produtos
• Ligar 
• Salvar mudanças

Observação: Você também pode ativar as guias de produtos com uma configuração global que ativa todos os widgets do ShopEngine.

Etapa 2: Adicionar widget de guias de produtos #

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

Adicionar Guias de produtos:

• Vá para ShopEngine > Modelos > Modelo de página única
• Clique em Editar com Elementor

• Procurar para Guias de produtos na opção Pesquisa de Elementos
• Arraste e solte tele widget 
• Clique em Atualizar para salvar as alterações.

Etapa 3: Configurações do widget de guias de produtos #

Você pode personalizar as seguintes configurações no Estilo Aba:

Estilo de navegação: #

• Tipografia: Você pode alterar o tamanho da fonte das opções do menu aqui.
• Cor do Menu: Altere a cor do menu.
• Cor do menu ativo/flutuante: Escolha uma cor para o modo ativo/focalizado do menu selecionado.
• Cor do indicador de navegação: Selecione uma cor para o indicador do menu ativo.
• Borda do indicador de navegação (px): Escolha um valor superior e inferior para a borda do indicador de navegação.
• Espaçamento do menu (px): Dê um espaçamento entre os menus em pixels.
• Sombra da caixa: Clique na opção de edição para escolher a cor da sombra, valor horizontal, vertical, desfoque e propagação. Você também pode definir a posição como contorno ou inserção.
• Tipo de borda: você pode escolher o tipo de borda como sólida, pontilhada, tracejada dupla, ranhura ou nenhuma.
• Tipografia: Você pode alterar o tamanho da fonte das opções do menu aqui.
• Cor do Menu: Altere a cor do menu.
• Cor do menu ativo/flutuante: Escolha uma cor para o modo ativo/focalizado do menu selecionado.
• Cor do indicador de navegação: Selecione uma cor para o indicador do menu ativo.
• Borda do indicador de navegação (px): Escolha um valor superior e inferior para a borda do indicador de navegação.
• Espaçamento do menu (px): Dê um espaçamento entre os menus em pixels.
• Sombra da caixa: Clique na opção de edição para escolher a cor da sombra, valor horizontal, vertical, desfoque e propagação. Você também pode definir a posição como contorno ou inserção.
• Tipo de borda: você pode escolher o tipo de borda como sólida, pontilhada, tracejada dupla, ranhura ou nenhuma.

Conteúdo da guia: #

• Título do conteúdo da guia
  • Mostrar título: Ative esta opção para mostrar o título no conteúdo da guia.
  • Cor: Escolha a cor do título para a área da guia.
  • Preenchimento: Ajuste o preenchimento superior, esquerdo, direito e inferior ao redor do título.
• Quebra de conteúdo da guia
  • Preenchimento (px): Ajuste o preenchimento superior, esquerdo, direito e inferior do conteúdo da guia.

Informações adicionais: #

• Tipografia: Você pode alterar o tamanho da fonte para informações adicionais aqui.
• Cor do divisor de célula da tabela: Escolha uma cor para o divisor de células da tabela.
• Preenchimento de célula de tabela:  Ajuste o preenchimento superior, esquerdo, direito e inferior.
• Rótulo:
  • Cor: Escolha uma cor para a etiqueta.
  • Fundo: Escolha uma cor de fundo.
  • Largura: Você pode escolher a largura em px ou porcentagem.

• Valor:
  • Cor: Escolha uma cor para o valor
  • Fundo: Escolha uma cor de fundo para o valor

Classificação média: #

• Título da classificação:
  • Cor: Altere a cor do título da classificação.
  • Tipografia: Você pode alterar o tamanho da fonte do título da classificação.

• Título da classificação:
  • Cor: Altere a cor do título da classificação.
  • Tipografia: Você pode alterar o tamanho da fonte do título da classificação.

• Título da classificação:
  • Cor: Altere a cor do título da classificação.
  • Tipografia: Você pode alterar o tamanho da fonte do título da classificação.

Título da revisão: #

• Cor: Altere a cor da média de classificação.
• Tipografia: Você pode alterar o tamanho da fonte da média de classificação.
• Margem: Ajuste as margens superior, esquerda, direita e inferior.

Estilo de revisão: #

• Cor: Escolha uma cor para as classificações.
• Data, autor e cor da descrição: Aqui você pode escolher a cor para data, autor e descrição.
• Cor do separador de comentários: Selecione uma cor para o separador de comentários.
• Tipografia do autor: Escolha o tamanho da fonte do autor.
• Tipografia de data: Selecione o tamanho da fonte para a data.
• Descrição Tipografia: Você pode escolher o tamanho da fonte da descrição aqui.
• Espaçamento de revisão único (px): Selecione um valor para espaçamento de revisão simples.

Formulário de revisão: #

• Etiqueta de entrada:
  • Cor: escolha uma cor para o rótulo de entrada.
  • Cor necessária: Seleja uma cor para o símbolo desejado.
  • Tipografia: Selecione o tamanho da fonte para o rótulo de entrada
• Entrada do formulário:
  • Cor: PEscolha uma cor para a entrada do formulário.
  • Cor da borda: Selecione uma cor de borda.
  • Cor da borda do foco: Escolha uma cor para a borda do foco.
  • Tipografia: Selecione o tamanho da fonte para a entrada do formulário.

• Espaçamento de campo (px):  Escolha quanto espaço você deseja entre o campo de entrada.
• Raio da borda de entrada (px): Selecione o valor do raio da borda para o campo de entrada.
• Preenchimento de entradas (px): Ajuste o preenchimento superior, esquerdo, direito e inferior do campo de entrada.

Botão de envio: #

• Tipografia de botão: Você pode alterar a família da fonte, o tamanho da fonte, a espessura da fonte, a transformação e a altura da linha aqui.
• Alinhamento: Defina o alinhamento como esquerdo, direito ou central.
• Normal/Hover: Escolha a cor e a cor de fundo para as visualizações normal e instantânea.
• Tipo de borda: você pode escolher o tipo de borda como sólida, pontilhada, tracejada dupla, ranhura ou nenhuma.
• Largura: Selecione a largura superior, esquerda, direita e inferior da borda.
• Cor: Escolha uma cor para a borda.
• Raio da borda: Selecione os valores superior, esquerdo, direito e inferior para o raio da borda.
• Preenchimento: Ajuste o preenchimento superior, esquerdo, direito e inferior.

Fonte global: #

• Família de fontes: Aqui você pode alterar a família de fontes de todo o widget.

Clique no Atualizar botão para salvar todas as mudanças.

Aqui está uma prévia da aparência de um widget da guia de produto: