Liste os produtos no Elementor com a tabela de produtos WooCommerce

Neste post, mostraremos como combinar Elementor e WC Product Table para criar um site WordPress mais personalizado e, ao mesmo tempo, aumentar as vendas de sua loja WooCommerce.

O WordPress simplifica o processo de criação de um site e de colocá-lo em funcionamento rapidamente. WooCommerce é um plugin WordPress que permite transformar qualquer site WordPress em uma loja online totalmente funcional. Você corre o risco de produzir um site copiado, no entanto, se continuar com as opções e recursos padrão, isso pode não ser apropriado para suas necessidades de negócios. É fundamental localizar as melhores ferramentas para projetar e personalizar seu site até que esteja o que você deseja.

Muitos WordPress e WooCommerce plugin s estão disponíveis para melhorar a funcionalidade da sua loja - Elementor, por ex amp le, é a ferramenta mais simples para personalizar a sua página do produto WooCommerce. Embora seja uma de suas vantagens mais significativas, também apresenta algumas desvantagens significativas. Para ex amp le, quando você combina WordPress plugin s de diferentes autores, você corre o risco de encontrar erros de compatibilidade e outras complicações; este não é o caso ao usar os plugin WooCommerce Product Table e Elementor para sites WordPress. Você terá maior controle sobre a aparência e a funcionalidade do seu site ao usar qualquer um desses plugin , e eles podem ser usados ​​em conjunto para obter resultados ainda mais excelentes.

Uma rápida visão geral da tabela de produtos WooCommerce e estruturas de elementos

Como afirmado anteriormente, há uma vasta seleção de plugin WordPress disponíveis para ajudá-lo a criar um site WordPress melhor, personalizado de acordo com seus requisitos específicos. Alguns plugin são projetados para serem usados ​​em grande escala, enquanto outros são projetados para adicionar um aspecto ou recurso específico.

Elementor é um ex amp le do primeiro tipo de aplicação:

Nosso plugin construtor de páginas oferece uma interface completamente nova para construir páginas da web e criar seu site WordPress. Você ganha muito controle sobre a forma como seu site é montado, selecionando e personalizando uma ampla biblioteca de widgets, blocos e layouts.

Embora a Tabela de produtos WooCommerce seja uma solução mais geral, ela também é mais direcionada:

Este plugin permite que você crie tabelas dinâmicas e totalmente personalizáveis ​​que listam seus produtos e serviços WooCommerce. No entanto, por causa de sua interação com o WooCommerce, essas tabelas são particularmente adequadas para exibir itens e serviços de uma maneira amigável e visualmente atraente para os compradores online. O plugin Posts Table Pro interage igualmente com Elementor e lista qualquer tipo de conteúdo WordPress em uma tabela em vez de simplesmente produtos WooCommerce (se você deseja exibir algo diferente de produtos - como postagens, páginas ou documentos), pode ser usado.

Quando usados ​​em conjunto, Elementor e WooCommerce Product Table fornecem recursos significativamente diversos. Você pode utilizá-los para produzir alguns impactos altamente significativos que ajudarão a aumentar o número de vendas de sua loja WooCommerce.

Agora é hora de começar a trabalhar. Nas seções seguintes, vamos olhar para alguns do mundo real ex amp les de como você pode utilizar o WooCommerce Mesa e Elementor produto para criar efeitos semelhantes aos mostrados acima.

Quando se trata de combinar esses dois plugin , o céu é o limite - e essas são apenas algumas das possibilidades. Com um pouco de tentativa e erro, você pode reunir várias páginas usando a mesma abordagem fundamental que demonstraremos.

Em primeiro lugar, você desejará certificar-se de que ambos os plugin estão instalados corretamente em seu site. É bom que a instalação do Elementor e a configuração da Tabela de produtos WooCommerce sejam simples e fáceis. O próprio WooCommerce também deve ser instalado e habilitado antes de prosseguir com esta etapa. Então você estará pronto para trabalhar em seu projeto.

Para incorporar uma Tabela de produtos WooCommerce em um editor de texto ou widget de shortcode, siga estas etapas:

Vamos começar com a aplicação mais fundamental e benéfica possível. Alternativamente, se você simplesmente deseja usar uma tabela de produtos dinâmica em seu site Elementor, você pode adicioná-la a um widget e fazer com que apareça no front end do site.

Certifique-se de usar o editor Elementor ao abrir qualquer página ou postagem para fazer isso. Se você for apresentado à interface familiar do WordPress, clique no botão Editar com Elementor para alternar para a interface do Elementor:

Se esta é sua primeira vez trabalhando com o Elementor, vamos fazer um pequeno tour pela plataforma. Uma grande área aparecerá à direita, onde seu conteúdo será exibido, e será atualizado em tempo real conforme você o adiciona e altera. No lado esquerdo da tela, há uma lista de 'widgets' que você pode arrastar para a área designada e, em seguida, reorganizar e configurar conforme necessário:

Uma tabela de produtos pode ser usada com uma variedade de widgets Elementor diferentes. Se você deseja exibir apenas uma única tabela de produtos em uma página, no entanto, pode fazê-lo incluindo uma seção de texto introdutório no código HTML da página. Pegue o widget Editor de Texto e mova-o para um local vazio da seguinte maneira:

Depois disso, você pode clicar dentro do widget para remover o texto padrão e substituí-lo pelo conteúdo que desejar. Quando se trata da própria tabela de produtos, você pode incluí-la colando neste código curto simples:

[tabela de produtos]

Quando você insere o shortcode em sua página, a tabela aparecerá no local que você especificar, que você pode verificar visualizando-a no front end:

Se você deseja usar apenas um elemento para o próprio código, pode usar o widget Shortcode.

Nunca se esqueça de salvar a página quando terminar de posicionar a mesa, não importa onde você decida colocá-la. Depois disso, você provavelmente desejará fazer algumas alterações em como a tabela aparece e funciona.

Retorne ao painel do WordPress e navegue até a guia WooCommerce> Configurações para concluir esta tarefa. As tabelas de produtos podem ser encontradas selecionando Produtos na parte superior da tela e, em seguida, tabelas de produtos:

Uma lista completa de opções para configurar sua tabela de produtos WooCommerce pode ser encontrada aqui. Você tem controle total sobre as informações que aparecem na tabela e pode personalizá-las adicionando filtros e variáveis, entre outras coisas. Verifique a documentação do plugin para obter mais informações sobre as diferentes opções.

Você poderá modificar a tabela de produtos que acabou de criar usando o Elementor sem ter que fazer mais nada. Assim que terminar de personalizar a mesa de acordo com suas especificações, simplesmente salve suas alterações e você estará pronto para começar!

Acordeões, guias e alternadores podem ser usados ​​para organizar várias tabelas de produtos.

A solução acima funciona bem se você deseja apresentar uma única tabela com seus produtos WooCommerce. Se você vai construir muitas tabelas, cada uma com uma categoria diferente de objetos, esta não é a melhor opção.

Existem várias maneiras diferentes de fazer isso no Elementor. O Widget de acordeão, por ex amp le, pode ser usado para gerar o mesmo efeito que vimos no último estudo de caso. Começando na área de edição à direita, mova o widget Acordeão para a área de edição à esquerda.

Você pode criar quantas guias separadas desejar clicando nos sinais de mais e pode personalizar os títulos e o texto de cada uma. Além disso, você pode adicionar uma tabela de produtos a uma ou mais guias usando o mesmo código de acesso mencionado anteriormente.

Claro, simplesmente adicionar o shortcode básico resultará em uma sucessão de tabelas de produtos semelhantes, o que provavelmente não é o que você estava procurando em primeiro lugar. Em vez disso, você vai precisar para personalizar cada shortcode para exibir apenas produtos especificados - por ex amp le, itens de uma categoria específica - em vez de todos os produtos.

O método usado será determinado pelos produtos que você deseja incluir e omitir de cada tabela em questão. Para obter informações adicionais, consulte o guia completo para personalizar os códigos de acesso da Tabela de produtos WooCommerce.

Vale a pena notar que você pode obter um efeito semelhante com a ajuda de alguns outros widgets Elementor úteis; isso inclui o widget Toggle e o widget Tabs, entre outros componentes. Em termos de apresentar várias tabelas de produtos WooCommerce de maneira atraente e bem organizada, o Elementor é sua ferramenta preferida.

Limpe sua marcação desleixada graças aos organizadores online gratuitos de HTML, CSS e JavaScript!

Pense seriamente no design do seu site de comércio eletrônico se quiser que sua empresa se destaque da concorrência. Para ex amp le, você vai querer determinar a forma mais eficaz de mostrar os seus produtos, de preferência em um estilo que é tanto user-friendly e visualmente atraente para os olhos.

Felizmente, usar o plugin WooCommerce Product Table com Elementor torna essa tarefa simples. O shortcode da sua tabela de produtos pode ser usado para exibir tudo o que o seu site tem a oferecer (ou apenas uma seleção) de uma forma verdadeiramente dinâmica.

Deixe um comentário

Seu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *