O WooCommerce adiciona funcionalidade de eCommerce em um site WordPress, mas o que acontece quando você deseja mais do que as ferramentas de design integradas do WooCommerce?

Como você deve ter descoberto, o WooCommerce limita suas perspectivas de design, especialmente para as páginas de produtos e a área de checkout.

É aí que a integração do Elementor com o WooCommerce entra em ação: ela oferece a funcionalidade de drag and drop, o controle criativo sobre todas as páginas do WooCommerce e o suporte para complementos e temas avançados do Elementor WooCommerce que você talvez não use.

Neste guia, exploramos os conceitos básicos por trás do WooCommerce e do Elementor, como eles funcionam juntos e como você pode criar um belo site de eCommerce com a combinação do WooCommerce Elementor.

O que é WooCommerce?

O WooCommerce é um plugin para WordPress que transforma qualquer instalação padrão do WordPress em um site de eCommerce.

WooCommerce
WooCommerce

É a solução mais popular para administrar uma loja on-line no WordPress devido à sua rápida integração ao ecossistema do WordPress, uma coleção robusta de temas de eCommerce compatíveis e flexibilidade de desenvolvimento avançada.

Aqui estão alguns dos principais recursos do WooCommerce:

  • Vendas de produtos digitais e físicos: O WooCommerce também oferece suporte para uma ampla gama de outros tipos de produtos, incluindo assinaturas, produtos variáveis, produtos de afiliados e produtos agrupados.
  • Gerenciamento da loja de eCommerce: O WooCommerce lida com pedidos, estoque de produtos e todos os contatos em seu painel de controle.
  • Criação automatizada de páginas essenciais de eCommerce: Você recebe uma página de Loja, página de Carrinho, página Minha Conta e muitas outras ao ativar o WooCommerce em seu site.
  • Capacidade de expansão e escalabilidade: Existe um grande ecossistema de plugins, extensões e complementos para WooCommerce, permitindo que você incorpore novos recursos que não estão integrados. Também é fácil escalar um negócio com WooCommerce devido ao seu suporte para grandes quantidades de pedidos, produtos e outros dados.
  • Comunidade e suporte: Embora não haja suporte humano, o WooCommerce tem uma grande comunidade de desenvolvedores e usuários ativos, e a Internet está repleta de fóruns e tutoriais para você encontrar soluções.
  • Pagamentos, envio e impostos: Você pode escolher entre centenas de processadores de pagamento e vincular-se ao fornecedor de envio da sua preferência. Você pode até mesmo configurar impostos com base em zonas.
  • Análise de dados: Poucas plataformas de eCommerce rivalizam com o conjunto robusto de relatórios e análises fornecidos pelo WooCommerce. Você pode acompanhar o desempenho da sua loja ao longo do ano e analisar tudo, desde as ações dos clientes até a receita diária.

De modo geral, o WooCommerce oferece uma ampla gama de recursos, o que o torna o plugin de eCommerce ideal para o WordPress. Dito isso, há outros plugins de eCommerce que você pode considerar e que recomendamos antes de se comprometer totalmente com o WooCommerce.

Para que serve o Elementor?

O Elementor é usado para controlar facilmente o design de qualquer site WordPress. Ele se integra muito bem ao WooCommerce. Dessa forma, você pode personalizar elementos da sua loja WooCommerce que normalmente não têm recursos de edição.

Elementor
Elementor

Por exemplo, o Elementor ajuda você a personalizar:

  • A página da loja de WooCommerce
  • Páginas de produtos
  • As páginas de checkout e carrinho
  • A página Minha conta
  • A página da loja

O Elementor oferece uma experiência de edição de drag and drop, criando uma interface de design visual que utiliza principalmente um mouse de computador, em vez de código de computador ou configurações de desenvolvimento avançadas.

O editor de drag and drop não só permite a personalização das páginas listadas acima, mas também oferece maior controle sobre o design de cada parte do seu site.

Você pode, por exemplo, personalizar a página inicial ou adicionar uma página “Em breve” em questão de segundos, tudo graças aos templates de página e seção que vêm com o Elementor.

No geral, o Elementor oferece:

  • Um construtor de drag and drop com blocos de WooCommerce
  • Templates pré-criados com o eCommerce em mente
  • Uma ferramenta específica de WooCommerce Builder com widgets e recursos dedicados a elementos de eCommerce
  • Estilo avançado para cada bloco, seção e página criados no WooCommerce

Devido à facilidade de uso do Elementor com o WooCommerce, o plugin é utilizado por desenvolvedores e proprietários de sites em todo o mundo para criar lojas on-line altamente personalizadas.

O WooCommerce funciona com o Elementor?

Sim, o Elementor foi projetado para funcionar com o plugin WooCommerce.

De fato, o Elementor é vendido como um produto que:

  • Reduz os plugins necessários para o WooCommerce
  • Aumenta as conversões (com seções e temas pré-fabricados e otimizados para o WooCommerce)
  • Ajuda a visualizar o desenvolvimento da loja on-line sem a necessidade de código

O Elementor também vem com vários widgets do WooCommerce.

Aqui está uma lista de alguns widgets do Elementor para WooCommerce:

  • Metadados do produto
  • Descrição curta
  • Breadcrumbs de produtos
  • Minha conta
  • Carrinho de compras
  • Menu Carrinho
  • Estoque de produtos
  • Adicionar ao carrinho
  • Avaliação do produto
  • Muito mais

Quanto ao design personalizado, o Elementor ajuda você a personalizar áreas de uma loja WooCommerce que, anteriormente, geralmente não estavam disponíveis para personalizações. O Elementor permite que você edite o Checkout, Resumo da Compra, página Minha Conta, páginas de Produto, Carrinho e muito mais.

Juntamente com os kits completos de sites do WooCommerce e um recurso de configuração de página única para o WooCommerce, é seguro dizer que o WooCommerce e o Elementor funcionam muito bem juntos.

Por que você deveria usar o Elementor para sites WooCommerce?

Usar o WooCommerce sem o Elementor é perfeitamente aceitável. Ele ainda é uma plataforma de eCommerce poderosa para a grande maioria dos negócios. Contudo, você descobrirá que as opções de personalização são limitadas sem o Elementor e gastará mais tempo desenvolvendo seu site.

Aqui estão os principais motivos para você usar o Elementor com o WooCommerce:

Design visual aprimorado

O WordPress tem seu construtor de páginas Gutenberg, mas o Elementor expande essa funcionalidade com um número maior de blocos e seções pré-construídas.

Personalização de páginas não editáveis do WooCommerce

Desde a página do Carrinho até a página Minha Conta, o Elementor permite que você personalize várias páginas WooCommerce que geralmente estão inacessíveis. Ele também permite que você personalize quase todos os aspectos das páginas de Produto.

Designs orientados para a conversão

Todos os elementos do Elementor são responsivos e muitos de seus widgets e blocos do WooCommerce são feitos especificamente para aumentar as vendas, como tabelas de preços, depoimentos e cronômetros de contagem regressiva.

Integração perfeita com o WooCommerce

O Elementor funciona perfeitamente com o WooCommerce, o que revela um grande ecossistema de temas e complementos compatíveis com o WooCommerce, criados apenas para a criação de páginas no Elementor.

Economia de tempo e custo-benefício

Os modelos, blocos e seções pré-projetados do Elementor eliminam a necessidade de codificação personalizada e configuração manual tediosa. Você só precisa de alguns minutos para criar páginas de eCommerce com aparência profissional. Isso reduz as possíveis taxas de desenvolvimento e o tempo gasto na criação da sua loja.

Com vantagens como essas, recomendamos sempre usar o Elementor (ou outro construtor de páginas que você goste) ao construir um site com o WooCommerce.

Como criar um site de eCommerce com o Elementor e o WooCommerce?

O Elementor e o WooCommerce são a melhor combinação de ferramentas para você criar um site de eCommerce no WordPress. Neste guia, explicamos todas as etapas necessárias para você criar uma loja on-line com os dois.

1. Instale o WooCommerce e o Elementor

Para começar, você precisa ter:

  1. WordPress
  2. Hospedagem (de preferência uma solução de hospedagem poderosa e gerenciada, como a Kinsta)

Instale o WordPress em seu provedor de hospedagem de sites. A Kinsta oferece uma instalação com um clique para o WordPress.

Adicionando um novo site WordPress na Kinsta
Adicionando um novo site WordPress na Kinsta

Com esses elementos no lugar, instale o plugin WooCommerce. Os usuários da Kinsta têm a vantagem de instalar automaticamente o WooCommerce ao criar uma conta.

Opção para instalar o WooCommerce com a criação do seu site na Kinsta.
Opção para instalar o WooCommerce com a criação do seu site na Kinsta.

Caso contrário, adicione o plugin gratuito WooCommerce ao seu site WordPress.

Você também pode aprender como configurar o WooCommerce em seu site com o mínimo de esforço. Certifique-se de ativar o WooCommerce e seguir as etapas de configuração.

Após concluído, você verá uma aba WooCommerce no WordPress e links para adicionar produtos, configurar pagamentos, adicionar taxas de impostos e muito mais.

O painel de controle do WooCommerce no WordPress
O painel de controle do WooCommerce no WordPress

A última parte desta etapa envolve a instalação e a ativação do Elementor Page Builder. Você pode instalar a versão gratuita do Elementor ou seguir as etapas de compra e download do Elementor Pro.

2. Adicione um tema do WooCommerce Elementor

O WooCommerce é compatível com a grande maioria dos temas de WordPress. O mesmo pode ser dito sobre o Elementor. No entanto, é melhor escolher um tema multiúso (um que permita que você crie qualquer tipo de site) ou um tema voltado para o eCommerce. Dessa forma, você não ficará preso a um tema de blog quando tentar criar uma loja on-line completa.

Mais adiante neste artigo, você verá nossas recomendações dos melhores temas de WooCommerce Elementor para começar. Você também pode pesquisar on-line por temas de WooCommerce Elementor.

Quando você encontrar o tema perfeito para suas necessidades, instale em seu site WordPress.

3. Crie uma página inicial do WooCommerce

Por padrão, não é gerada uma página inicial para uma loja WooCommerce, o que faz com que você tenha de criá-la do zero. Para acelerar esse processo, você pode criar automaticamente uma página inicial acessando WooCommerce > Home no WordPress. Clique em Create a custom homepage e personalize de acordo com suas necessidades.

Clique para criar uma página inicial personalizada e carregar uma logo.
Clique para criar uma página inicial personalizada e carregar uma logo.

Com isso, você adiciona uma página inicial para personalização.

Clique na opção Homepage.
Clique na opção Homepage.

Por fim, vá para Appearance > Customize e selecione Homepage Settings. Escolha A static page em Your homepage displays. Selecione Homepage no menu suspenso Homepage.

Tornar sua página inicial estática.
Tornar sua página inicial estática.

Isso dedica essa página específica como sua página inicial global e permite que você a personalize com o Elementor ou o WordPress Theme Customizer.

O design da sua página inicial (e de todo o site em geral) depende do tema escolhido. Por exemplo, o tema Astra oferece templates iniciais para você criar uma bela loja on-line em segundos. Eles estão localizados em Appearance > Starter Templates (se você estiver usando o Astra).

Procure templates de página específicos do setor no Astra.
Procure templates de página específicos do setor no Astra.

Também recomendamos que você explore o Theme Builder do Elementor. Para isso, vá para Templates > Theme Builder.

Use a opção Single Page e clique em Add New. Use as abas Pages e Blocks para criar rapidamente uma página inicial profissional ou qualquer outra página em seu site.

Use a aba Pages para obter uma página inicial pré-construída
Use a aba Pages para obter uma página inicial pré-construída

4. Adicione produtos ao WooCommerce

Para adicionar um produto ao WooCommerce, vá para Products > Add New. Você também tem a opção de importar vários produtos com um arquivo CSV.

Clique para adicionar um novo produto no WooCommerce.
Clique para adicionar um novo produto no WooCommerce.

Você pode preencher tudo, desde o Product Name, Product Description, Price até a Product Category. Clique no botão Publish quando você terminar de criar o produto.

Adicione detalhes como nome do produto, preço e mídia.
Adicione detalhes como nome do produto, preço e mídia.

Sua lista de produtos estará sempre disponível em Products > All Products no WordPress.

Lista de produtos no WooCommerce.
Lista de produtos no WooCommerce.

5. Configure o envio, formas de pagamento e impostos

É importante que você configure itens essenciais como processamento de pagamentos, envio e regras de impostos antes de aceitar compras de clientes.

Todos eles estão situados na área WooCommerce > Settings no WordPress.

Para envio, vá para a aba Shipping. Clique em Add Shipping Zone. Isso permite que você defina taxas de envio específicas com base em zonas geográficas.

Adicionar uma zona de envio.
Adicionar uma zona de envio.

Como alternativa, você pode rolar até a parte inferior da página para configurar a extensão WooCommerce Shipping, que oferece etiquetas USPS e DHL imprimíveis.

Clicando no botão Get Started para o WooCommerce Shipping.
Clicando no botão Get Started para o WooCommerce Shipping.

Há também muitos outros complementos e extensões de envio do WooCommerce disponíveis para diferentes regiões, transportadoras e gerenciamento de envios.

Para configurar o processamento de pagamentos, navegue até a aba Payments em WooCommerce Settings. Instale a extensão WooCommerce Payments para aceitar métodos de pagamento como cartões de crédito e Apple Pay.

Você também pode considerar outra solução de processamento de pagamentos, como Stripe, Alipay ou Klarna. Siga as etapas apresentadas para ativar o processamento de pagamentos, como inserir o endereço da sua empresa e adicionar uma conta-corrente para receber pagamentos.

Instale o WooCommerce Payments.
Instale o WooCommerce Payments.

Para impostos, vá para a aba General em WooCommerce. Certifique-se de que você tenha preenchido seu endereço comercial; os impostos e as taxas de envio são calculados com base nesse endereço.

Role até a caixa Enable Taxes e marque para calculá-los com base em seu endereço durante a finalização da compra.

Como ativar os cálculos de impostos no WooCommerce.
Como ativar os cálculos de impostos no WooCommerce.

Isso revela uma nova aba em WooCommerce Settings chamada Tax. Selecione para definir configurações como classes de impostos adicionais, preços inseridos com impostos e como os impostos devem ser calculados.

Abra a nova aba Tax.
Abra a nova aba Tax.

Assim como no caso do envio, existem várias extensões de impostos para o WooCommerce que você pode ativar para obter recursos mais avançados.

6. Configure uma página de loja no WooCommerce usando o Elementor

Por padrão, o WooCommerce cria uma página de Loja/Store para você. Você pode encontrar isso indo para a aba Pages no WordPress.

Clique na Página da Loja — Página de Compras para projetá-la.
Clique na Página da Loja — Página de Compras para projetá-la.

Clique em Edit With Elementor. Há também um botão Template Kits do Elementor para você adicionar rapidamente um design à sua página da loja.

Vários kits de templates para páginas do Elementor
Vários kits de templates para páginas do Elementor

Use o Elementor para editar o estilo e a formatação da página de Compras e considere inserir um kit de modelo para um processo mais rápido.

Uma vez concluído, você terá uma página de Compras com uma vitrine de seus produtos, ferramentas de filtragem e uma barra de pesquisa.

Uma página de Compras completa com filtros, uma barra de pesquisa e itens.
Uma página de Compras completa com filtros, uma barra de pesquisa e itens.

7. Exiba coleções de produtos com estilo com o Elementor

Para criar uma coleção de produtos – exibida em sua página inicial ou como uma página de categoria separada, recomendamos que você use o Elementor Theme Builder ou adicione um widget simples para uma página existente.

Usando o Theme Builder, escolha Product Archive e, em seguida, selecione e salve um dos layouts fornecidos para coleções de produtos.

Você pode atribuir esses templates à página da sua escolha ou criar uma página totalmente nova.

Escolha um bloco do Product Archive para obter uma coleção bem projetada.
Escolha um bloco do Product Archive para obter uma coleção bem projetada.

Por outro lado, você pode ir para uma página criada anteriormente, abri-la no Elementor e adicionar o widget Products a qualquer seção para obter uma coleção de seus produtos com aparência agradável.

Arraste e solte o widget Products no editor
Arraste e solte o widget Products no editor

Depois disso, o Elementor fornece configurações para que você ajuste o número de colunas, linhas e todo o estilo do widget.

8. Personalize páginas de produtos com o Elementor

As páginas de produtos são gerenciadas de forma semelhante a qualquer outra página no Elementor.

Uma opção é abrir qualquer produto em seu estoque e clicar no botão Edit With Elementor.

Editar qualquer página de produto com o Elementor
Editar qualquer página de produto com o Elementor

Para obter um controle mais granular e adicionar um design profissional, vá para Templates > Theme Builder no WordPress. Selecione a opção Single Product e clique em Add New.

Você pode optar por blocos ou páginas projetados especificamente para páginas de produtos do WooCommerce.

Blocos pré-criados para produtos individuais no Elementor
Blocos pré-criados para produtos individuais no Elementor

Isso conecta você à biblioteca de templates do Elementor. Depois disso, você pode inserir qualquer um dos blocos de página de produto ou modelos de página globalmente, ou em páginas de produtos individuais.

9. Personalize o carrinho e o checkout do WooCommerce com o Elementor

As próximas seções envolvem a personalização de páginas essenciais de eCommerce geradas automaticamente pelo WooCommerce.

Por padrão, essas páginas (como Checkout, Cart e My Account) têm um potencial de edição limitado. Mas com o Elementor, você tem controle total sobre a formatação, o estilo e a aparência geral de cada uma delas.

Para editar as páginas Checkout e Cart, vá para Pages no WordPress. Role até a página desejada e clique em Edit with Elementor.

Edite sua página de carrinho com o Elementor para que você tenha o máximo de controle.
Edite sua página de carrinho com o Elementor para que você tenha o máximo de controle.

O Elementor Pro oferece widgets de substituição para trocar completamente o carrinho/checkout padrão do WooCommerce.

Encontre o widget do Carrinho sob WooCommerce e adicione ao seu design. Você pode então deletar o carrinho padrão do WooCommerce.

Arrastando o módulo do Carrinho para a sua página de Carrinho.
Arrastando o módulo do Carrinho para a sua página de Carrinho.

Depois, você pode editar o conteúdo, estilo e configurações avançadas do carrinho no Elementor. Na página do Carrinho, por exemplo, você pode ajustar as cores e fontes para se adequar melhor à sua marca.

Também é possível adicionar widgets para texto extra, produtos recomendados ou mídia enquanto os clientes visualizam seus carrinhos. Existem até ferramentas para editar cupons, totais e o resumo do pedido.

Você pode se livrar do antigo módulo de carrinho do WooCommerce e editar tudo, desde as configurações de cupom até o estilo.
Você pode se livrar do antigo módulo de carrinho do WooCommerce e editar tudo, desde as configurações de cupom até o estilo.

A edição da área de checkout é semelhante, pois você abre a página de checkout no Elementor e arrasta o widget Elementor Checkout para o editor. Isso substitui o módulo de checkout padrão do WooCommerce, desde que você exclua o antigo.

Adicionando o widget Checkout ao Elementor
Adicionando o widget Checkout ao Elementor

Uma vez inserido e selecionado, o widget Checkout oferece guias para configurações de Content, Style e Advanced.

Modifique a página Checkout no Elementor - tudo, desde as configurações de cupom até os estilos de pagamento.
Modifique a página Checkout no Elementor – tudo, desde as configurações de cupom até os estilos de pagamento.

Você pode personalizar elementos como a seção Your Order, detalhes do Returning Customer e informações de Payment. Você pode modificar as cores, os estilos, os tamanhos e muito mais.

10. Personalize a página My Account com o WooCommerce e o Elementor

Para personalizar a página padrão My Account do WooCommerce, abra Pages no WordPress. Clique em Edit with Elementor após rolar a página My Account.

Exclua o módulo My Account antigo e adicione a versão do Elementor localizada como um widget no WooCommerce.

Isso mostrará as configurações de conteúdo para guias e opções adicionais, juntamente com estilo e configurações avançadas.

Editando a página My Account com opções de conteúdo, estilo e configurações avançadas.
Editando a página My Account com opções de conteúdo, estilo e configurações avançadas.

Por exemplo, você pode querer alterar o tipo de borda ou a cor da página My Account para obter uma sensação mais relevante para a marca.

E é assim que você cria uma loja on-line com a integração do WooCommerce Elementor!

A seguir, temos os melhores temas e complementos do Elementor WooCommerce para ajudar você no processo de design.

11 melhores temas do Elementor WooCommerce para você

Quando você estiver procurando por temas de WooCommerce Elementor, é melhor escolher temas com:

  • Suporte para WooCommerce e Elementor
  • Um design responsivo
  • Carregamento rápido de páginas
  • Compatibilidade com todos os principais navegadores
  • Os recursos essenciais de eCommerce que você precisa (você pode preencher as lacunas com o Elementor e o WooCommerce)
  • Um design que combina com sua marca
  • Uma interface limpa
  • Avaliações excelentes e suporte/documentação de alta qualidade para os clientes.

Você pode visualizar nossos temas favoritos para WooCommerce e verificar se algum deles é adequado para sua marca. No entanto, você deve verificar se esses temas realmente suportam o Elementor.

Por outro lado, você pode optar pelos temas WooCommerce mais rápidos, focando primeiro na velocidade antes de qualquer outra coisa. A boa notícia é que a grande maioria dos temas é compatível tanto com WooCommerce quanto com Elementor.

Temos uma lista dos melhores temas para Elementor; alguns deles são excelentes para WooCommerce, mas nem todos são voltados para lojas on-line.

1. Astra

Astra
Astra.

O Astra oferece integração perfeita com o WooCommerce e, juntamente com o Elementor, funciona como um tema de múltiplos propósitos para construir qualquer tipo de site, incluindo lojas de eCommerce.

Ele possui uma base leve e rápida, opções de personalização poderosas e algumas das funcionalidades mais amigáveis para editar fontes, cabeçalhos e rodapés.

2. Hello Elementor (com o Elementor WooCommerce Builder)

Tema Hello
Tema Hello

Hello Elementor é o tema oficial do Elementor. Ele apresenta um design elegante e minimalista, sem elementos desnecessários, o que lhe permite criar diversos tipos de sites com facilidade.

Recomendamos que você o combine com o Elementor WooCommerce Builder para criar sites de WooCommerce limpos e modernos, e alguns dos mais rápidos que existem.

3. OceanWP

OceanWP
OceanWP

Como um tema WordPress multiúso, o OceanWP tem integração com o WooCommerce e suporte direto para o construtor de páginas Elementor.

Você receberá suporte ao cliente de alta qualidade, atualizações regulares e ampla documentação para esse tema WordPress leve e rápido.

Ele é altamente personalizável para melhorar a aparência da sua marca de eCommerce, com configurações rápidas para editar tudo, desde cores a fontes e layouts a cabeçalhos.

4. Shopkeeper

Shopkeeper
Shopkeeper.

Shopkeeper não é um tema multiúso, mas é voltado diretamente para proprietários de lojas de eCommerce. Grande parte da infraestrutura do site de eCommerce que você espera já está construída e pronta para ser usada.

Existem templates pré-criados para categorias específicas de eCommerce e uma integração com o WooCommerce. O Elementor também funciona bem com o tema, permitindo que você ajuste layouts, edite o carrinho e personalize praticamente todos os aspectos da sua loja on-line.

5. Zakra

Página inicial do Zakra.
Zakra

O tema Zakra oferece demonstrações iniciais para acelerar o processo de criação da loja. Ele se integra ao Elementor e ao WooCommerce e oferece demonstrações de nicho que você pode implementar com um clique.

É considerado um dos temas multiúso mais rápidos do mercado, e você obtém controle sobre esquemas de cores, fontes e variações de layout.

6. Storefront

Página inicial do tema Storefront.
Storefront.

Talvez um dos temas de eCommerce gratuito mais versátil para você escolher, o Storefront inclui uma ampla gama de recursos de loja on-line prontos para uso.

O tema é desenvolvido pelas mesmas pessoas por trás do WooCommerce, então você sabe que foi projetado para funcionar perfeitamente com o plugin de eCommerce. Ele também funciona bem com o Elementor e oferece uma simplicidade que você não encontra em outros temas de eCommerce.

7. ShopIsle Pro

ShopIsle.
ShopIsle Pro.

O tema ShopIsle Pro é uma solução premium com tipografia avançada, demonstrações de eCommerce pré-criadas e integração com o Elementor e o WooCommerce.

Combinado com o Elementor WooCommerce Builder, você pode criar um design elegante para qualquer loja on-line, personalizar fontes e cabeçalhos e abrir uma loja on-line em minutos. Além disso, você recebe excelente suporte ao cliente e documentação sobre o tema.

8. Neve

Neve
Neve.

O tema Neve oferece funcionalidade multiúso com uma interface rápida e leve. Com o Elementor, você pode criar um site para qualquer setor, especialmente no mundo do eCommerce.

O tema ajuda a adicionar uma visualização rápida de produtos, juntamente com avisos de carrinho e filtros de loja off-canvas. Também gostamos dele para ajustar os layouts do carrinho WooCommerce ou configurar um carrinho fixo.

O tema Neve vem com uma infinidade de sites iniciais criados apenas para lojas de eCommerce.

9. Customify

Customify
Customify.

A ideia por trás do tema Customify é construir virtualmente qualquer tipo de site, blog ou loja on-line ao aproveitar opções de personalização avançadas para estilos, fontes e áreas de widgets.

Quanto a uma loja on-line, a integração de WooCommerce Elementor permite que você exiba facilmente os produtos e edite toda a experiência de checkout sem nenhum conhecimento de programação.

 

10. GeneratePress

Registro na página inicial da GeneratePress.
GeneratePress

O tema WordPress GeneratePress é uma solução multiúso com suporte para WooCommerce e Elementor. Sua principal vantagem em relação a outros temas é sua natureza leve, mas também seu design modular.

Portanto, você pode ativar e desativar módulos de acordo com suas necessidades e acessar o personalizador em tempo real para ter o máximo controle sobre os requisitos de design da sua marca.

11. Phlox

Phlox
Phlox.

O tema Phlox para WordPress é outro tema multiúso que apresenta uma forte experiência de criação de sites para desenvolvedores de WooCommerce e do Elementor.

Todas as demonstrações de um clique são incorporadas ao design e proporcionam uma aparência moderna sem muito esforço para você. Você também pode personalizar a maioria dos aspectos de uma loja on-line, desde o carrinho de compras até a forma como os produtos são exibidos em um dispositivo móvel.

Incentivamos você a explorar esses temas e testá-los no WooCommerce e no Elementor. Ao tomar sua decisão, talvez você queira ter controle total, o que significa que um tema multiúso pode ser o ideal para você.

Outros usuários, no entanto, querem que seu tema tenha a aparência e o comportamento de um site de eCommerce desde o início. Nesse caso, opte por um tema como Storefront ou ShopIsle Pro para que você tenha uma experiência mais voltada para o eCommerce.

Você também pode procurar complementos de WooCommerce para o Elementor para expandir o número de widgets e recursos no Elementor. Confira-os abaixo.

Os 5 principais complementos de WooCommerce para o Elementor

Existem vários plugins essenciais de WooCommerce que você deve adicionar à sua loja desde o início. No entanto, recomendamos que você procure complementos e plugins ainda mais específicos que não apenas se integrem ao WooCommerce, mas também expandam os recursos do Elementor.

Aqui estão nossos complementos favoritos de WooCommerce Elementor:

1. HappyAddons

HappyAddons
HappyAddons

O plugin HappyAddons é, na verdade, uma coleção de widgets e complementos criados especificamente para o Elementor. Alguns exemplos de widgets do HappyAddons incluem um mega menu, navegação de página única, um carrinho de WooCommerce e um kit de artigos de blog.

Alguns widgets específicos de WooCommerce são para carrosséis de produtos, grades, checkouts e minicarrinhos. Há ainda widgets para melhorar outros aspectos da sua loja on-line, como artigos de blog, gráficos, marketing e rede social.

2. PowerPack for Elementor

PowerPack for Elementor
PowerPack for Elementor

O PowerPack for Elementor apresenta uma ampla variedade de widgets exclusivos para sites de WooCommerce que usam o Elementor. Com mais de 70 widgets do Elementor, você pode incorporar trilhas de navegação, depoimentos, botões e muito mais.

Há uma biblioteca de templates para adicionar imediatamente designs e widgets especiais de WooCommerce para campos como a página Minha Conta, estilização da página de checkout e botão de adicionar ao carrinho.

3. WooLentor

WooLentor
WooLentor

O WooLentor é um complemento para o construtor de páginas Elementor, pois aprimora o construtor de páginas de WooCommerce e oferece recursos para personalizações de e-mail.

O complemento inclui um gerenciador de campos de checkout e opções para aceitar pagamentos parciais dos clientes. Existe até mesmo uma opção para os clientes sugerirem preços ou para que ofereçam uma oferta especial para o dia.

4. Essential Addons for Elementor

Essential Addons for Elementor
Essential Addons for Elementor

A solução Essential Addons tem uma versão gratuita e uma versão premium. Esse complemento melhora a experiência de criação de páginas no Elementor com widgets para tabelas de preços, grades de produtos, call to action e muito mais.

Alguns dos elementos premium incluem um mapa avançado do Google, feed do Instagram e designs de paralaxe.

5. JetWooBuilder

JetWooBuilder
JetWooBuilder.

O JetWooBuilder é um complemento de WooCommerce Elementor da Crocoblock, outro complemento do Elementor que vale a pena conferir. A opção JetWooBuilder permite que você misture e combine elementos como templates personalizados, alternadores de layout e páginas específicas da loja.

Você pode configurar tipos de carrossel e cartões de categoria com facilidade e, ao mesmo tempo, criar páginas de produtos individuais a partir de um modelo elegante.

Talvez o mais importante seja que o complemento JetWooBuilder oferece controle absoluto sobre a página da sua loja, ajudando você a configurar filtros avançados e inteligentes.

Quando você deve considerar o Elementor Pro ou o Elementor?

Você pode se perguntar: “Qual é a diferença entre o Elementor e o Elementor Pro?”

Felizmente, a versão gratuita do Elementor é bastante poderosa e inclui a maioria dos recursos de que você precisa para criar um site ou loja on-line com a funcionalidade de drag and drop. Dito isso, as ferramentas de WooCommerce melhoram drasticamente quando você faz o upgrade para o Elementor Pro.

Primeiro, aqui está a diferença de preços entre o Elementor e o Elementor Pro:

  • Elementor: Gratuito
  • Elementor Pro: A partir de $59 por ano. Outros planos custam $99, $199 e $399 por ano

Geralmente, as atualizações são feitas para suportar sites adicionais com a mesma assinatura do Elementor, e não para obter mais recursos.

No entanto, o upgrade do Elementor para o Elementor Pro oferece novos recursos.

O Elementor gratuito oferece:

  • Personalização básica do construtor de temas
  • Templates e blocos limitados
  • Exportação e importação de templates
  • Edição para dispositivo móvel
  • Mais de 40 elementos de design, como depoimentos, botões, caixas de ícones, editores de texto e muito mais

Aqui está o que você ganha com o Elementor Pro (que não está incluído no Elementor Básico):

  • Personalização de cada parte do seu tema
  • Design e integração de formulários
  • Todos os blocos e templates profissionais
  • Todos os widgets profissionais
  • Um construtor de pop-ups
  • Efeitos de rolagem
  • Construtor de cabeçalho e rodapé
  • Cerca de mais 30 elementos de widget e design como citações em bloco, paginação de blog, contagem regressiva e layout em masonry
  • Elementos de design específicos do WooCommerce, como WC Categorias, WC Produtos e WC Adicionar ao Carrinho.

Quando você deve fazer o upgrade do Elementor para o Elementor Pro?

A resposta para isso é simples. Faça o upgrade para o Elementor Pro:

  • Se você deseja a maioria das funcionalidades de WooCommerce Builder, como edição e templates para a seção “Adicionar ao carrinho, Categorias e Produtos”
  • Se você quiser ter controle total sobre a personalização da sua loja on-line
  • Quando você deseja começar a usar elementos adicionais como o efeito Ken Burns, widget de login ou flip box:

Os usuários de WooCommerce devem atualizar para a versão Pro do Elementor em algum momento para obter a melhor experiência.

Resumo

Neste artigo, destacamos quais recursos tornam o WooCommerce e o Elementor especiais e mostramos a você como eles se complementam quando combinados. Também fizemos um tutorial passo a passo sobre como criar uma loja de eCommerce com a integração de WooCommerce com o Elementor.

Durante esse processo, lembre-se de conferir nossa lista dos melhores complementos e temas do Elementor. Dessa forma, você terá uma vantagem inicial em comparação com aqueles que projetam suas lojas do zero.

Lembre-se de que é essencial que você escolha uma solução de hospedagem rápida e segura, como a Kinsta, para qualquer operação de eCommerce. A Kinsta também fornece hospedagem para Elementor, alimentada pelas máquinas C2 do Google Cloud para oferecer o melhor desempenho possível.

O que mais você gostaria de aprender sobre o WooCommerce e o Elementor? Comente abaixo.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).