Você já desejou criar uma grade classificável e filtrável que contenha todo ou parte de seus produtos WooCommerce?

Se você opera uma loja WooCommerce, sabe que o WooCommerce já vem com uma página de arquivo dedicada que o ajuda a mostrar produtos individuais.Como criar a grade 1 de produtos wordpress woocommerce

Mas, dependendo do que você está vendendo, nem sempre essa é a maneira mais eficaz de mostrar seus produtos.

Em alguns casos, a exibição de produtos WooCommerce em uma grade é mais eficiente.

E se isso soa como a situação em que você está, você está bem, porque eu vou lhe mostrar como criar uma grade de seus produtos WooCommerce.

Mas se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog 

Então, voltemos ao porquê de estarmos aqui.

O que você pode fazer com uma grade de produtos WooCommerce?

Embora não seja uma lista completa, aqui estão algumas situações em que uma grade de produtos pode oferecer aos visitantes uma experiência melhor do que sua página de arquivo regular:

Discover Como instalar uma loja online no WordPress com o plugin WooCommerce

  • Lojas grossistas - se você vender muitos produtos no atacado, oferecer a seus clientes uma maneira fácil de classificar ou filtrar uma grade pode ser mais amigável do que fazer com que eles naveguem em páginas de produtos individuais.
  • Catálogos de produtos - da mesma forma, se você deseja apenas exibir um catálogo de produtos fácil de navegar, uma grade de classificação / filtro AJAX economizará o tempo dos clientes (e recarregamentos de página).
  • Formulários de pedido - se você deseja criar um formulário de pedido baseado em produtos WooCommerce, uma grade fornece uma maneira muito fácil de fazer isso. Também é uma boa abordagem exibir o menu de um restaurante e aceitar pedidos online.

Como criar uma grade de produtos WooCommerce

Nós vamos usar o plugin Tabela de produtos do WooCommerceO plugin é exclusivamente focado na criação de grade de produtos. E graças aos seus parâmetros de interface e shortcode, você pode personalizar quase todos os aspectos de como sua grade funciona.

Leia também o nosso guia sobre: Como aumentar o tempo gasto no seu blog WordPress

Aqui estão alguns dos recursos mais úteis, na minha opinião:

  • Adicione ou exclua colunas facilmente Você pode até adicionar colunas contendo campos personalizados ou taxonomias personalizadas, e a tabela de produtos WooCommerce se integra totalmente aos campos personalizados avançados.
  • Widgets de filtro 4 incluídos. Isso permite que você forneça aos leitores uma experiência perfeita, oferecendo opções de filtragem na barra lateral.
  • Variação do produto / suporte a atributos. Escolha entre 3 maneiras diferentes de exibir variações do produto em sua grade.
  • Caixas de seleção múltipla. Isso facilita a criação de formulários de pedidos, permitindo que os clientes selecionem vários produtos antes de adicioná-los ao carrinho de compras.
  • Pesquisa instantânea, classificação e filtro . Os clientes podem manipular os dados da sua grade sem recarregar a página.
  • Adicionar ao carrinho . Da mesma forma, os clientes podem adicionar produtos às suas cestas sem recarregar a página.
  • Suporte ao Lazy Load. Útil para melhorar o desempenho de grandes redes ( embora isso afete a capacidade de oferecer classificação ou filtragem instantânea )

Aqui está como usar este plugin ...

1 Etapa: configurar o recurso de grade padrão

Após instalar e ativar o plug-in, a primeira coisa a fazer é configurar a funcionalidade padrão para suas grades. Confira nosso guia passo a passo sobre como instalar um plugin do WordPress.

Isso essencialmente define o comportamento padrão do código de acesso. Mas você também pode alterar esse comportamento para grades individuais adicionando parâmetros ao código de acesso.

Para acessar as configurações do plugin, vá para WooCommerce → Configurações. Em seguida, clique na guia Produtos e escolha a opção Tabelas de produtos :

adicione colunas de produtos woocommerce wordpress.png

Configurando a aparência de suas grades

Em primeiro lugar, você pode escolher o estilo de sua grade na seção Design de mesa. Você pode fazer isso com:

  • Padrão - como você pode imaginar, esta opção usa as configurações padrão do plugin sem qualquer intervenção adicional de sua parte. Ele tentará usar o tema atual do seu blog o máximo possível.
  • personnalisé : quando selecionado, expande uma lista de opções de estilo que permite que você personalize as cores e tamanhos das fontes sem a necessidade de CSS personalizado.

personalize a tabela de produtos css.png

Depois de configurar seu estilo, você deve configurar os padrões de código de acesso. Novamente, você pode editá-los para códigos de acesso individuais através dos parâmetros deste último. Mas a configuração vai economizar tempo e tornar as coisas um pouco mais fáceis mais tarde.

configurando as configurações da tabela de produtos.png

A maioria das configurações é auto-explicativa e você pode ver que a Tabela de Produtos WooCommerce fornece um bom trabalho ao fornecer dicas de ferramentas ou links de documentação para ajudá-lo a aprender mais sobre cada configuração.

Descubra também Como adicionar uma loja WooCommerce no Facebook

Depois de definir os padrões dos códigos de acesso, você pode rolar mais para definir configurações mais avançadas de layout e recursos.

configuração avançada do produto tables.png

Novamente, o plug-in faz um ótimo trabalho; aquele que fornece informações adicionais para qualquer um dos parâmetros que podem ser um pouco difíceis de entender. 

Como controlar o estoque de sua loja online WooCommerce ? Descubra-o clicando neste link.

Uma coisa a prestar atenção é a limitação da carga progressiva. Se decidir usar o carregamento progressivo para acelerar sua loja online, você limitará a funcionalidade de pesquisa e classificação do plugin.

Veja também nossa seleção de Os melhores plugins WooCommerce da 12 para aprimorar sua loja online

Depois que a configuração estiver concluída, salve as alterações.

2 Etapa: Adicionar widgets de grade do WooCommerce (opcional)

Como mencionei, a Tabela de produtos WooCommerce também oferece quatro widgets para ajudá-lo a adicionar opções de filtragem à sua barra lateral ( como você pode para as lojas clássicas do WooCommerce ).

Para acessá-lo, vá para Aparência → Widgets como de costume e deslize nos widgets desejados:

tabela de widgets woocommerce.png

Etapa 3: adicione um código de acesso onde deseja exibir sua grade de produtos

Você está na linha de chegada! Agora tudo que você precisa fazer é adicionar o código de acesso [product_table] onde você quiser que sua grade apareça.

Descubra também Como encontrar o link para a página de login do WordPress

Por padrão, o código de acesso funcionará de acordo com as configurações que você escolheu na etapa 1. Mas se quiser personalizar a funcionalidade para códigos de acesso específicos, você pode fazer isso usando o muitos parâmetros de shortcode disponíveis.

Por exemplo, para usar a grade apenas em produtos de uma categoria específica, você pode adicionar um parâmetro como este:

[product_table categoria="chapéus"]

Você pode até ser criativo e usar as condições AND / OR aqui.

Por exemplo:

  • [product_table categoria= "chapéus + in estrela« ] exibe apenas produtos que pertencem ao tempo para as categorias de chapéus et nas estrelas.
  • Product_table categoria= "chapéus em Estrela "] exibe produtos que são se bonés ou a categoria de estrela.

Essa atenção aos pequenos detalhes é o que torna a grade de produtos WooCommerce tão grande. 

Veja também nossa 6 plug-ins do WordPress para dar uma nova vida aos seus artigos

E isso é tudo o que há para fazer com uma grade de produtos no WooCommerce!

Preços do plugin WooCommerce Product Table

WooCommerce Product Table é exclusivamente um plugin premium. Embora existam algumas opções gratuitas listadas no diretório WordPress.org, não encontrei nenhuma que seja tão flexível ou bem documentada, então acho que a Tabela de Produtos WooCommerce vale o preço, que é ...

Para o site 1 - $ 75

Para sites 5 web - $ 135

Para sites 20 - $ 275

Descubra também alguns plugins premium do WordPress  

Você pode usar outro WordPress plugins para dar uma aparência moderna e otimizar o manuseio do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. HBook

HBook é um Extensão WordPress que lhe permitirá criar facilmente uma solução de reservas online no seu website.

Livro

É perfeitamente adequado para quem tem um negócio no sector hoteleiro (hotéis, apartamentos de férias, campismo, etc.).

Descubra também o nosso 5 WordPress plugins para compartilhar o conteúdo do seu blog

através WordPress Plugin HBook, você poderá adicionar calendários de disponibilidade, listas de preços e formulários de reserva ao seu site, em segundos.

Descarregar | Demo | hospedagem na web 

2. WooCommerce Tabs Pro: guias extras para a página do produto

Ce WordPress Plugin fornece abas adicionais ilimitadas na página do produto.Extra guias-produto-page-wordpress-plugin-to-page-builder

Suas principais características são: a possibilidade de alterar o título das guias, um editor para editar conteúdo personalizado, oppossibilidade de fixar guias ou não, a escolha de ícones para guias, remoção fácil guias, o ppersonalização da posição das guias na interface pública, et mais ...

Descarregar | Demo | hospedagem na web

Este plug-in do WooCommerce permite que seus afiliados ganhem pontos de crédito se os assinantes comprarem seus produtos em sua loja online existente.

Plug-in de referência multinível Woocommerce

Suas características incluem: configuração de um limite de crédito e resgate personalizado, relatórios de administração completos para usuários cadastrados, gerenciamento de parâmetros globais ou específicos do produto, suporte de códigos de curto, e muito mais.

Descubra também Como adicionar um formulário de contato suspenso ao cabeçalho global

É um sistema de afiliados multinível WooCommerce, algo que está fora do sistema transacional de afiliados típico.

Descarregar | Demo | hospedagem na web

Outros recursos recomendados

Também convidamos você a consultar os recursos abaixo para aprofundar o controle e controle do seu site e blog.

Conclusão

É isso aí! É isso neste tutorial. Espero que você consiga criar grades de produtos WooCommerce no WordPress. sinta-se livre para compartilhe a dica com seus amigos em suas redes sociais.

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.

Mas, enquanto isso, conte-nos sobre seu Comentários e sugestões na seção dedicada.

...