Como criar um site WooCommerce com Elementor

Não basta que a própria plataforma WordPress seja o Sistema de Gerenciamento de Conteúdo (CMS) mais popular do mundo. Também temos o construtor de páginas e as plataformas de comércio eletrônico mais populares no Elementor e no WooCommerce. Como tal, faz sentido usar todos os três para criar uma loja online com aparência estelar e desempenho.

Se dividirmos, o WordPress é ideal para organizar suas postagens, páginas e produtos. O WooCommerce oferece uma forte integração com a plataforma por causa de seus desenvolvedores (Automattic). Além disso, o Elementor oferece uma construção de página poderosa e intuitiva de arrastar e soltar. É uma solução completa sem código para construir sua loja.

Neste artigo, veremos como construir uma loja usando Elementor e WooCommerce. Ao longo, veremos como ambos se encaixam para fornecer a você a maior flexibilidade para seu site.

Por que WordPress, Elementor e WooCommerce funcionam bem juntos

Vale a pena dar uma olhada em como o WordPress, Elementor e WooCommerce podem se combinar para ajudá-lo a criar lojas online de primeira linha.

Para começar, o WordPress é o CMS mais usado no mercado. Claro, isso não é suficiente para garantir uma posição tão dominante entre os usuários. Na verdade, analisamos isso em uma postagem anterior, por isso recomendamos que você leia essa postagem mais adiante. Resumindo, é uma plataforma segura, estável e escalável sobre a qual você pode construir.

Falando nisso, você também tem o WooCommerce. Como a Automattic desenvolve o plugin, ele tem ótima integração com o núcleo do WordPress, mas isso não é tudo.

É também a plataforma de comércio eletrônico mais popular. Dentro do ecossistema WordPress, ele tem cerca de 20% de participação, o que se traduz em cerca de 8% de todos os sites. Em comparação, Shopify tem cerca de cinco ou seis por cento de participação de mercado. Novamente, os números de uso não são tudo.

WooCommerce leva o processo de criação de uma loja online e agiliza o processo. Você pode estar em funcionamento em minutos e ter uma plataforma de comércio eletrônico robusta, poderosa e extensível pronta para funcionar.

Para tricotá-los juntos, você tem Elementor. Ele também tem uma grande participação de mercado em seu campo e uma enorme base de usuários.

É um construtor de páginas de arrastar e soltar com uma abordagem exclusiva para ajudá-lo a criar todo o seu site do zero. Esta é uma solução tentadora de usar, porque há muitos recursos poderosos e funcionalidades que outras ferramentas não têm. O mais relevante aqui é o dedicado WooCommerce Builder.

Resumindo, o Elementor é um plugin com muitas polegadas de coluna no blog do WPKube, e você deve acessar nossos arquivos para ver o que ele pode fazer.

O que um site WooCommerce precisa de um construtor de páginas

A conclusão implícita da última seção é que o Elementor pode fornecer a combinação certa de recursos e funcionalidades que o WooCommerce precisa para levar seu site ao próximo nível. No entanto, é importante entender por que isso é e o que ele oferece.

Em um sentido geral, um site WooCommerce precisa do seguinte de um construtor de páginas:

• Integração forte, para que não haja conflitos entre o construtor de páginas e o WooCommerce.
• Muitas opções de personalização para ajudar a destacar seus produtos e páginas de loja.
• Uma maneira de editar os elementos individuais que compõem uma página de produto típica.
• Funcionalidade extra para ajudar a 'subir de nível' sua loja.

Você deve (é claro) observar suas necessidades individuais também. Por exemplo, você pode descobrir que formulários e pop-ups são importantes para sua loja e estratégia de vendas. A boa notícia é que o Elementor é mais do que capaz de atender às suas necessidades.

Por exemplo, ele possui um ótimo Construtor de Popup que funciona muito bem para vendas, ofertas por tempo limitado, cupons e muito mais:

Você pode criá-los como faria com outros modelos de página e pode aplicá-los rapidamente. Além disso, você pode personalizá-los da maneira que quiser. É perfeito se você tiver uma campanha específica para promover em seu site.

Como escolher um tema adequado para WooCommerce

Não entraremos em muitos detalhes aqui, pois abordamos isso em nosso tutorial e também reunimos alguns temas em um artigo dedicado.

A principal consideração que você precisa neste caso é um tema compatível com Elementor e WooCommerce. Mesmo uma rápida olhada em sites de marketplace premium mostrará que muitos temas anunciam isso, então suas escolhas são amplas.

Mesmo assim, existem alguns temas de destaque que podemos mencionar:

• Vitrine. Ele provavelmente terá a menor compatibilidade com o Elementor daqui para frente, pois o Block Editor é uma tecnologia nativa. Ainda,
• Olá. Este é o tema inicial em branco do Elementor e é ideal para desenvolver um site WooCommerce do zero. Claro, se você tiver menos tempo disponível, pode ser sábio escolher outro tema mais completo.
• GerarPress. Este é um tema principal com uma infraestrutura flexível. Isso significa que, independentemente de você usar o Block Editor, Elementor ou qualquer outra coisa, sua loja ficará incrível.

Recomendamos que você encontre o tema certo antes de se aprofundar na criação do seu site. Lembre-se, os melhores resultados serão com algo compatível com Elementor e WooCommerce.

Como criar um site WooCommerce com Elementor em 3 etapas

No restante deste artigo, mostraremos como usar o Elementor e o WooCommerce juntos para criar um site de comércio eletrônico. Há três etapas a serem observadas:

• Instale e configure o WooCommerce.
• Crie suas linhas de produtos WooCommerce e use o Elementor para criar as páginas de produtos.
• Crie uma página de loja dedicada, novamente usando o Elementor.

No entanto, para este tutorial, vamos supor que você já tenha o Elementor Pro instalado e ativado. É algo que explicamos em nosso artigo sobre como criar um funil do WordPress. Esse post irá ajudá-lo quando você tiver problemas.

1. Instale o WooCommerce e configure-o

Há dois aspectos a serem considerados ao configurar uma instalação do WooCommerce: o plug-in em si e as configurações da sua loja. Na verdade, a instalação do plugin leva o mesmo processo de qualquer outro plugin do WordPress.

Quanto à configuração do próprio WooCommerce, embora você possa estar pronto para começar em alguns minutos, vale a pena levar mais algum tempo para passar pelo Assistente de Configuração.

Quando se trata deste ponto da configuração, nós o cobrimos. Na verdade, temos uma postagem de tutorial completa do WooCommerce que detalha passo a passo como começar com o WooCommerce e criar seu primeiro produto. É uma boa postagem para abrir em uma guia sobressalente enquanto você percorre esta. As informações contidas nele serão valiosas para o próximo conjunto de etapas.

2. Crie seus produtos WooCommerce

Depois de ter uma instalação do WooCommerce funcionando, você deve procurar criar produtos no back-end. Novamente, nosso tutorial WooCommerce aborda como fazer isso em detalhes, mas aqui estão as notas do Cliff:

• Vá para a guia Produtos> Adicionar novo no WordPress.
• Preencha o nome do seu produto e uma breve descrição.
• Use as meta boxes do WooCommerce para preencher os dados do seu produto, como o preço.
• Adicione uma imagem.
• Publique seu produto.

No entanto, é aqui que o Elementor mostra seu primeiro movimento de poder - o WooCommerce Builder. Essa é uma maneira de usar o construtor de páginas para criar o design das suas páginas de produtos.

Para começar, clique em Modelos > Adicionar Novo no WordPress:

A partir daqui, selecione Produto único no menu suspenso Tipo de modelo e insira um nome opcional:

Isso abrirá a Biblioteca de Modelos para mostrar todos os Blocos pré-construídos dentro de:

Depois de ver um design que você gosta, clique no botão Inserir e o Elementor importará o bloco:

Essa é uma maneira rápida de criar uma página de produto dedicada. Você pode ter este grande começo e adicionar mais também. O Elementor inclui vários widgets dedicados para ajudá-lo a criar páginas específicas do WooCommerce:

Depois de ter um layout de página que você gosta, clique no botão verde Publicar na parte inferior da tela:

Isso abrirá um pop-up para ajudá-lo a configurar uma condição específica para exibir o modelo:

Quando estiver pronto, clique em Salvar e Fechar . A partir daqui, você pode adicionar mais produtos à sua loja, trabalhar em mais modelos ou começar a trabalhar em uma página dedicada da Loja.

3. Crie sua página de loja dedicada usando Elementor e WooCommerce

Uma experiência útil do usuário (UX) do WooCommerce é como ele gera a maioria das páginas necessárias que você precisa para sua loja. A página da Loja de nível superior é a mais importante, pois é o toldo frontal que decora a porta.

Se você usa o WordPress e o WooCommerce com um tema específico do WooCommerce, como o Storefront, seu principal porto de escala para personalizar a página da loja é por meio do personalizador. No entanto, nosso foco é com a Elementor. A maneira de fazer isso com o construtor de páginas é usar uma página de arquivo de produtos .

Isso permite que você personalize como os produtos são exibidos em seu site, mas não lida com o restante de sua página. Em alguns casos, pode ser difícil gerenciar dois conjuntos de personalizações e configurações, mas em nossa experiência isso não foi um problema até agora.

Assim como acontece com produtos individuais, você precisará acessar Modelos> Adicionar novo no WordPress e escolher Arquivo de produtos no menu suspenso:

Novamente, você pode escolher um bloco, editar uma página do zero ou combinar ambos para criar algo único. Além disso, como antes, você pode usar qualquer um dos widgets específicos do WooCommerce para ajudá-lo a criar uma página ao seu gosto.

Depois de clicar no botão Publicar novamente e chegar à caixa de diálogo Configurações de publicação, você pode invocar o magic. Em sua forma básica, você pode incluir o novo modelo na Página da Loja :

Embora, isso não é tudo. Você pode adicionar outras condições de inclusão para usar o modelo em vários locais do site. Isso é ótimo para dar continuidade e dar aos visitantes um motivo para visitar sua loja.

Uma nota rápida sobre outras páginas geradas do WooCommerce

Antes de encerrarmos, queremos mencionar as outras páginas WooCommerce geradas. A má notícia é que eles não caem sob o olhar de Elementor. Em outras palavras, você não pode editar páginas como as páginas Checkout ou Thank You sem uma extensão WooCommerce adicional.

Isso é decepcionante, mas compreensível. Mesmo assim, você ainda pode usar o Elementor para desenvolver os elementos circundantes e, em seguida, soltar a funcionalidade da página específica com códigos de acesso. Embora, não seja o ideal.

Se editar essas páginas na íntegra é importante para você, você vai querer olhar para o Editor de Campo Checkout ($ 49 por ano) e a extensão Custom Thank You Pages (também $ 49 por ano).

Em conclusão

O que poderia dar errado ao usar três das ferramentas mais populares para publicar uma loja de comércio eletrônico? Neste caso, não há muito. WordPress, Elementor e WooCommerce oferecem uma experiência estelar. Combiná-los pode dar a você o que há de melhor na criação e administração de uma loja online.

Ao longo deste post, vimos como usar o Elementor e o WooCommerce juntos para construir uma loja. Depois de instalar e ativar os dois plugins, sua primeira tarefa é criar produtos junto com suas páginas associadas. A partir daí, você precisa de uma página de loja dedicada - algo que a Elementor é capaz de lidar. Além disso, a funcionalidade extra do plug-in do construtor de páginas (como o construtor de pop-up e muito mais) pode ajudar a levar sua loja para a estratosfera.

Você deseja criar uma combinação Elementor e WooCommerce para sua próxima loja e, em caso afirmativo, este artigo o ajudará? Deixe-nos saber na seção de comentários abaixo!