Gênios Academy

Dicas e tutoriais para amantes do wordpress

Construindo listagens de produtos Woocommerce com a Dynamic Tag

Construindo uma consulta WooCommerce

Navegue até a guia JetEngine > Construtor de consultas . Pressione o botão “ Adicionar nova consulta ”.

Defina as seguintes configurações da consulta:

  • digite o Nome da consulta (aqui, Produtos );
  • selecione a opção Consulta de Produtos WC no menu suspenso Tipo de Consulta ;
  • selecione a opção Qualquer no menu suspenso Status dos produtos .

configurações de consulta de produtos woocommercePressione o botão “ Adicionar consulta ” para salvar as alterações.

Construindo uma listagem para produtos WooCommerce

Configurações do item de listagem

Navegue até JetEngine> guia Listagem e pressione o botão “ Adicionar novo ” para criar um novo item de listagem com as seguintes configurações:

  • selecione a opção Query Builder no menu suspenso Listing Source ;
  • escolha a consulta criada anteriormente (aqui, Produtos ) no menu suspenso Consulta ;
  • digite o nome do item da listagem (aqui, Products_listing_items );
  • selecione a opção Elementor no menu suspenso  Visualização de listagem .

listando configurações de itensPressione o botão “ Criar item de listagem ”.

Adicionando tags dinâmicas à imagem da listagem

Pressione o botão “ Adicionar nova seção ” e selecione uma seção como estrutura do item da listagem.

configurações de layout para o item de listagemAdicione o widget Imagem ao item da listagem e navegue até o campo Escolher imagem nas configurações do widget Imagem . Pressione o botão “ Tags dinâmicas ” no canto inferior esquerdo do campo.

Escolha a opção Imagem do produto WooCommerce no menu suspenso.

adicionando tags dinâmicas a widgets de imagemNavegue até o menu suspenso Link das configurações do widget de imagem . Selecione a opção URL personalizado neste menu suspenso.

adicionando URL personalizado aos widgets de imagemSe habilitada, esta opção ativa o campo para selecionar o link: pressione o botão “ Tag dinâmica ” e selecione a tag WooCommerce Product Field no menu suspenso.

” alt=”adicionando links de produtos ao widget de imagem” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/adding-product-links-to-the-image-widget-2x.png” />Selecione a opção URL do produto no menu suspenso Configurações .

configurações do produto woocommerce do widget de imagemPressione o botão “ Atualizar ” para salvar as alterações.

Adicionando o campo de título do produto

Adicione o widget Título ao item da listagem. Clique no botão “ Tag Dinâmica ”. Selecione a tag WooCommerce Product Field no menu suspenso.

adicionando tags dinâmicas ao widget de títuloSelecione a opção Título no menu suspenso Configurações .

adicionando tag woocommerce ao widget de títuloNavegue até o campo “ Link ”, pressione o botão “ Tag dinâmica ” e selecione a tag WooCommerce Product Field no menu suspenso. Escolha a opção URL do produto no menu suspenso Configurações .

adicionando o URL do produto ao widget de títuloPressione o botão “ Atualizar ” para salvar as alterações.

Aplicando o widget Classificação

Adicione o widget Classificação por estrelas ao item da listagem. Pressione o botão “ Tag dinâmica ” e selecione a opção URL do produto no menu suspenso.

” alt=”adicionando tag woocommerce ao widget de classificação por estrelas” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/adding-woocommerce-tag-to-the-star-rating-widget-2x.png” />Selecione a opção Avaliação Média no menu suspenso da janela Configurações .

” alt=”adicionando configurações de produto woocommerce ao widget de classificação” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/adding-woocommerce-product-settings-to-the-rating-widget-2x.png” />Pressione o botão “ Atualizar ” para salvar as alterações.

Adicionando preço

Adicione o widget Editor de Texto ao item da listagem. Pressione o botão “ Tag dinâmica ” e defina a tag WooCommerce Product Field .

” alt=”adicionando a tag dinâmica ao widget do editor de texto” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/adding-dynamic-tag-to-the-text-editor-widget-1x.png” />Defina a opção Price HTML String na janela Configurações .

” alt=”adicionando configurações do produto woo às configurações do widget do editor” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/adding-woo-product-settings-to-editor-widget-settings-2x.png” />Pressione o botão “ Atualizar ”.

Adicionando o widget de botão

Aqui, a funcionalidade de adicionar ao carrinho é implementada por meio do botão Elementor padrão. Permite exibir o texto e URL corretos dependendo do tipo de produto.

Adicione o widget Button ao item da listagem. Se necessário, alinhe a posição do widget.

Pressione o botão “ Tag dinâmica ” e defina a tag WooCommerce Product Field .

adicionando tag dinâmica ao widget de botãoDefina a opção Adicionar texto ao carrinho na janela Configurações .

adicionando produto woo às configurações do botãoNavegue até o campo Link, pressione o botão “ Tag dinâmica ”, selecione a tag WooCommerce Product Field e escolha a opção Adicionar ao carrinho URL de texto no campo Configurações .

adicionando o URL do produto woocommerce ao widget do botãoPressione o botão “ Atualizar ”.

Adicionando o item de listagem a uma página

Abra uma página onde deseja colocar o item da listagem. Arraste e solte o widget “ Grade de listagem ”. Especifique o item de listagem (aqui, Products_listing_item ) como origem e defina as configurações da grade de listagem.

Leia o tutorial para conhecer todas as opções do widget Grid de listagem .

A visualização frontal da página com a grade de listagem é a seguinte.

visualização frontal do widget de grade de listagem

Estilizando o preço de venda

Para aplicar o mesmo estilo ao texto do preço com desconto (normal, não em itálico como está agora), adicione um código para a classe personalizada do widget de preço com CSS personalizado e edite os estilos desejados.

Listagem de configurações de itens

Abra o item de listagem criado (aqui, Products_listing_items). Navegue até as configurações do widget Editor de Texto , clique na guia Configuração avançada e desenrole as configurações de Layout .

Digite “listing-price” no campo da classe CSS:

configurações de classes css do widget do editor de textoPressione o botão “ Atualizar ”.

Navegue até o painel do WordPress > Aparência > guia Personalizar.

personalizar guiaDesenrole a guia CSS adicional .

guia CSS adicional Cole o código no campo CSS adicional:

view rawgistfile1.txt hosted with ❤ by GitHub

.hide-listing {
visibility: hidden;
height: 0;
}
view rawgistfile1.txt hosted with ❤ by GitHub
view rawHide Listing Grid widget before filtering hosted with ❤ by GitHub

jQuery( document ).ready(function( $ ) {
$( document ).on( ‘jet-filter-content-rendered’, function() {
$( ‘.hide-listing’ ).removeClass( ‘hide-listing’ );
});
});
view rawHide Listing Grid widget before filtering hosted with ❤ by GitHub

adicionando código CSS personalizado ao campo de guia CSS adicionalPressione o botão “ Publicar ” para salvar as alterações.

Estilo de preço personalizado

Abra a página com a grade de listagem (aqui Listing_grid_with_products ). Atualize a página. Agora os preços têm o mesmo estilo.

visualização frontal do widget de grade de listagem com estilos CSS personalizados

Trata-se de criar listas de produtos WooCommerce com tags dinâmicas e personalizar sua aparência usando uma classe personalizada com CSS personalizado.