Como construir um site WooCommerce com o tema Elementor e Astra

Quer lançar uma loja WooCommerce e começar a vender produtos pela Internet? Embora você possa encontrar muitas informações on-line, todo o processo de criação de uma loja que realmente parece boa pode parecer um pouco esmagador.

E daí se lhe disséssemos que você pode configurar uma loja de comércio eletrônico de ótima aparência em menos de uma hora… de graça?

Nós sabemos – isso é uma tarefa difícil. Mas com a combinação de Elementor, WooCommerce e o tema Astra, você pode fazer isso . E neste post, mostraremos as etapas exatas que você precisa seguir para começar a usar sua própria loja rapidamente.

O que procurar em um tema Elementor WooCommerce

Por mais emocionante que seja começar sua loja online usando WooCommerce e Elementor, é igualmente essencial encontrar um tema adequado para acompanhá-lo.

A última coisa que você quer é acabar com o combate a incêndios e corrigir problemas antes de entrar no ar!

Quais são os elementos-chave que você deve considerar ao restringir o seu tema WordPress ideal?

1. Velocidade

Tudo se resume a quão rápido seu site carrega. É ainda mais importante quando você tem produtos para vender em sua loja WooCommerce.

A velocidade de carregamento da página não é apenas uma necessidade. É o que sublinha o seu sucesso.

Você sabia que 1 em cada 4 visitantes abandonará seu site se demorar mais de quatro segundos para carregar? Mesmo um segundo atraso pode reduzir a satisfação do cliente em 16%. (Fonte: Especialista em Construtor de Sites)

Com um tempo de carregamento de página maior, seus clientes têm mais chances de sair sem ver o que sua loja tem a oferecer. O que significa uma taxa de rejeição mais alta.

Isso não vai bem com os motores de busca e só reduz o ranking do seu site.

No final das contas, tudo se resume à experiência do usuário. Quanto melhor a experiência do usuário, melhores são as conversões da sua loja.

2. Personalização

Quer controle total sobre a aparência da sua loja online? Em seguida, considere um tema que você possa personalizar facilmente.

Ao criar uma loja online, a ideia é criar uma que seja melhor que seus concorrentes. Seu logotipo, fontes e cores devem refletir a identidade da sua marca.

Então, por que manter as configurações padrão do tema?

Você deve poder personalizar todos os elementos do tema no personalizador ou usando o Elementor. Embora a maioria dos temas ofereça essa flexibilidade, é útil verificar isso desde o início.

3. Modelos de demonstração

Por que começar em uma tela em branco quando você pode aproveitar alguns modelos de loja prontos?

Admite. Quando você começa, não é mais fácil criar uma loja online vendo como já está feito? É como fazer referência ao que está funcionando antes de se tornar um profissional em criar o seu próprio.

Procure temas que oferecem a flexibilidade de usar modelos de loja WooCommerce pré-criados que podem ser facilmente personalizados usando o Elementor.

4. Otimizado para vendas móveis

As vendas de dispositivos móveis estão em constante crescimento.

Os relatórios indicam que as vendas de dispositivos móveis devem atingir US$ 3,56 trilhões em 2021, 22,3% a mais do que o registrado em 2020.

(Fonte: Estatista)

Sua loja está otimizada para dispositivos móveis? Seu tema é responsivo e funciona bem em todos os dispositivos? Se não for, recomendamos que você considere isso seriamente.

5. Processo de checkout mais rápido

Vamos começar com alguns fatos.

• A taxa média de abandono de carrinho é de quase 70% (69,57 para ser preciso) e chega a 85,65% quando se trata de usuários de dispositivos móveis
• Devido ao abandono de carrinho, as marcas de comércio eletrônico perdem até US$ 18 bilhões em receita de vendas a cada ano

A boa notícia é que o mesmo relatório também indica que, ao otimizar a experiência de checkout, há um aumento de 35,62% nas conversões.

Embora o motivo número um seja a inclusão de cobranças extras, 26% citaram que o processo de checkout é muito longo durante o checkout.

(Fonte: Sleeknote)

Todos esses dados comprovam a importância de uma página de checkout bem projetada.

A menos que você queira ver um impacto significativo em sua receita de vendas, você deve garantir que seu tema tenha um processo de checkout otimizado para conversão.

6. Suporte incrível

Um pouco de apoio não ajudaria ocasionalmente? E nada melhor do que ter uma equipe de suporte, exatamente quando você quiser.

Embora a maioria dos temas ofereça suporte por meio de documentação, é bom optar por um tema WordPress que ofereça suporte humano amigável.

7. Seguro

Por último, mas não menos importante, escolha um tema estável e seguro. Um que permite que você instale praticamente qualquer plugin WooCommerce e Elementor sem o medo de quebrar sua loja.

Para encurtar a história, procure um tema construído para desempenho, conversão e que funcione como um encanto.

Um tema como Astra!

O que você precisa para fazer sua loja WooCommerce

Como o título deste post sugere, existem duas ferramentas principais que você precisará para construir sua loja além do plugin principal do WooCommerce:

• Tema Astra – este é um tema WordPress gratuito que inclui opções de personalização profunda, bem como uma integração interna do WooCommerce e sites de demonstração.
• Elementor – este é um construtor de páginas gratuito que o ajudará a personalizar várias páginas em sua loja, como sua página inicial e página sobre.

A única coisa que vamos supor para este tutorial é que você já tem o WooCommerce instalado - abordaremos todo o resto sobre como fazer sua loja parecer e funcionar muito bem.

Se você precisar de ajuda para configurar o WooCommerce, consulte nosso guia completo.

Depois de instalar o WooCommerce, veja como deixar sua loja incrível!

Parte 1: Construa um site WooCommerce em menos de 10 minutos

Além de seu design leve geral e opções de personalização, o Astra ajuda você especificamente com o WooCommerce de duas maneiras principais.

Você pode:

• Importe modelos gratuitos do Elementor WooCommerce, bem como configurações do WordPress Customizer para criar rapidamente uma loja WooCommerce de ótima aparência.
• Use a integração WooCommerce dedicada do Astra para personalizar aspectos importantes da sua loja por meio do WordPress Customizer em tempo real.

Veja como usar o Astra para configurar o núcleo da sua loja WooCommerce:

Passo 1: Tema e Plugin

Para começar, você precisará instalar um tema e um plugin. Ambos estão listados no WordPress.org, o que significa que você pode instalá-los diretamente do seu painel do WordPress:

• Tema Astra
• Plug-in de modelos iniciais

Etapa 2: Importar o site inicial do Astra WooCommerce

Depois de instalar o tema Astra e o plug-in Starter Templates, vá para Appearance → Starter Templates no painel do WordPress para importar seu site de demonstração (este artigo de ajuda tem mais informações, se necessário).

Isso iniciará o assistente de modelo inicial para instalar o modelo pré-criado em seu site.

Clique no botão “ Construa seu site agora ”.

Em seguida, selecione o construtor de páginas Elementor :

Você pode usar as opções de filtragem para encontrar os vários modelos de eCommerce Elementor.

Alguns desses modelos são gratuitos, enquanto outros, marcados como “Premium”, exigem o plug-in Premium Starter Templates que faz parte do Astra Essential Bundle and Growth Bundle.

Sinta-se à vontade para escolher qualquer site de demonstração que chame sua atenção. Mas para este tutorial, usaremos o site de demonstração gratuito da Brand Store :

Depois de clicar no site de demonstração desejado, ele abrirá uma nova página onde você poderá fazer o upload do logotipo e do esquema de cores do seu site. Isso facilita sua vida porque você não precisará adicionar o logotipo ou escolher cores na segunda vez.

No entanto, se o seu logotipo e as cores não estiverem prontos, você pode simplesmente pular a etapa. Para este tutorial, clique em “ Pular e continuar ”.

Em seguida, você encontrará uma caixa que solicita que você preencha seus dados (que você pode optar por deixar em branco) e instale os dados personalizados adicionados ao site.

Portanto, nesta etapa, basta clicar em Enviar e criar meu site .

Depois de clicar no botão Enviar e criar meu site , ele começará a importar o site.

Agora, você está pronto para fazer as coisas do seu jeito!

Passo 3: Use o WordPress Customizer para tornar as coisas suas

Astra usa o WordPress Customizer nativo para ajudá-lo a personalizar a aparência da sua loja. Essa ferramenta permite que você faça alterações sem código em vários aspectos da sua loja e veja os resultados imediatamente em uma visualização em tempo real.

Para acessar o WordPress Customizer, vá para Appearance → Customize no seu painel do WordPress:

Além das configurações específicas do WooCommerce aqui, o Astra também inclui opções para ajudá-lo a personalizar outros aspectos do seu site, como fontes, cores, logotipos e muito mais.

Para obter uma explicação completa dessas configurações, você pode ler os artigos de suporte de configurações do personalizador. Para este tutorial, no entanto, vamos nos concentrar especificamente nas integrações do WooCommerce do Astra.

Eles permitem que você controle aspectos de sua loja como:

• Como funcionam suas páginas de listagem de produtos
• Upsells na página do seu carrinho de compras
• As imagens do seu produto
• Outras configurações menores

A maioria das configurações do WooCommerce está localizada em duas áreas principais.

Configurações do WooCommerce

Para acessar o conjunto de opções, acesse WooCommerce na barra lateral do WordPress Customizer. Aqui, você verá as seguintes áreas:

• Catálogo de produtos – permite controlar quantos produtos exibir na página da sua loja, bem como quais informações exibir e quantas colunas de produtos exibir.
• Produto único – permite desativar as migalhas de pão.
• Carrinho – permite ativar o upsell de produtos na página do carrinho. Os upsells podem ajudar a aumentar suas vendas mostrando produtos direcionados relacionados aos produtos que já estão no carrinho de um usuário.
• Aviso da loja – permite ativar um aviso em toda a loja e personalizar seu texto.

Por exemplo, se você habilitar um Store Notice , você receberá este belo banner de notificação em todo o site:

Esse recurso é ótimo para promover uma venda ou oferta especial.

Alterar as colunas da loja para 4 adiciona outro produto em cada linha:

Além da parte do WooCommerce , você também pode encontrar as configurações do WooCommerce em:

• Global → Container – permite controlar a largura da área que suas páginas WooCommerce ocupam.
• Barra lateral – permite controlar a localização da sua barra lateral nas páginas do WooCommerce. Por exemplo, ao alterá-la de Esquerda para Direita , sua lista de categorias de produtos mudaria para o lado direito

Etapas para construir um site WooCommerce com o tema Elementor e Astra.

Parte 2: Use o Elementor Page Builder para personalizar suas páginas de loja

O Astra ajuda você a personalizar sua loja e páginas de produtos, bem como seu menu de navegação e barra lateral.

Mas quando se trata de ajustar sua página inicial e a página Sobre nós, é aí que entra o plug-in gratuito do construtor de páginas Elementor.

Para editar sua página inicial, clique em Editar com Elementor . O Elementor facilita:

• Alterar texto e imagens
• Mova os elementos de design usando arrastar e soltar
• Adicione novos elementos de design

Por exemplo, para editar o título da sua página inicial, basta clicar e digitar:

Se você precisar de ajuda para usar o construtor de páginas Elementor para editar as páginas principais da sua loja, os vídeos oficiais do Elementor 101 são um ótimo lugar para aprender sobre o Elementor. Se você é um novato total, deve se familiarizar primeiro com o construtor de páginas Elementor.

Você sabia que pode criar um carrinho de compras inteiro, uma página de checkout, uma página de conta de cliente e muito mais usando apenas um código de acesso?

Aqui está uma lista completa de códigos de acesso do WooCommerce que você pode explorar.

Melhores temas Elementor WooCommerce

Existem muitos temas do WordPress e muitos deles são compatíveis com Elementor e WooCommerce.

Embora não tenhamos listado todos eles aqui, mencionamos alguns dos principais temas do Elementor WooCommerce. A seleção de um deles deve proporcionar a experiência que você está procurando.

1. Astra

Com mais de um milhão de instalações e sendo o único tema WordPress não padrão a atingir essa marca, sabemos uma coisa ou duas sobre a criação de temas otimizados e de alto desempenho que convertem.

Astra é um tema WordPress leve que oferece integrações com Elementor e WooCommerce. Além disso, o Astra vem com sites de demonstração WooCommerce prontos que podem ser facilmente personalizados usando o Elementor.

Usando o Astra, você obtém:

• Lojas muito mais rápidas que ajudam a aumentar a taxa de conversão
• Um carrinho suspenso que permite que os usuários visualizem seu carrinho de praticamente qualquer página
• Processo de checkout otimizado para conversão, reduzindo assim a taxa de abandono de carrinho
• Atraia a atenção do usuário com bolhas de vendas que ajudam a aumentar as vendas
• Sites totalmente responsivos que funcionam muito bem em todos os dispositivos
• Lojas personalizáveis ​​sem ter que escrever uma única linha de código

Quer mais recursos?

Atualize para o Astra Pro e obtenha recursos extras do WooCommerce, como:

• Rolagem infinita que carrega dinamicamente seus produtos à medida que os usuários continuam rolando
• Opções de checkout adicionais para aprimorar as experiências do usuário, como checkouts em duas etapas, checkouts sem distrações e muito mais
• Mais opções de exibição e galeria de produtos que podem ser facilmente ajustadas. Opção para abrir imagens em um lightbox também disponível
• O recurso de visualização rápida do produto permite que os usuários visualizem os detalhes do produto sem visitar a página detalhada do produto. Isso ajuda a aumentar a taxa de conversão
• Barra lateral fora da tela para filtros de produtos

2. Olá Elementor + Construtor de Temas

O Elementor é um plugin de construtor de páginas WordPress extremamente popular e tem alguns temas próprios que você pode querer conferir.

Os modelos funcionam muito bem com o WooCommerce e podem ser personalizados facilmente usando o Elementor WooCommerce Builder.

Usando os widgets dedicados do WooCommerce, como preços, botões de adicionar ao carrinho e recursos no Elementor Theme Builder, você pode projetar sua loja e páginas de produtos da maneira que desejar.

3. Gerar Imprensa

GeneratePress é outro tema WordPress popular compatível com WooCommerce.

Usando o personalizador do WordPress, as configurações do GeneratePress WooCommerce permitem que você configure praticamente qualquer coisa, como o carrinho suspenso, o modo de checkout sem distrações e muito mais.

Embora o tema GeneratePress esteja disponível gratuitamente no WordPress, para acessar as configurações do WooCommerce, você precisará do GeneratePress Premium.

4. Neve

Neve é ​​um tema WordPress pronto para WooCommerce que vem com vários sites de demonstração prontos desenvolvidos pela Elementor.

A versão gratuita do Neve oferece compatibilidade completa com WooCommerce. Para mais integração com o WooCommerce, você pode considerar a versão Pro.

A versão Neve Pro inclui um módulo de reforço WooCommerce que permite personalizar sua loja, produto e páginas de checkout.

5. OceanWP

Com mais de 700.000 instalações ativas, o OceanWP é um tema WordPress popular que vem com muitos recursos integrados para lojas WooCommerce.

Você tem sites de demonstração WooCommerce prontos que são todos desenvolvidos pela Elementor.

Alguns recursos adicionais para WooCommerce incluem:

• Visualização rápida do produto
• Carrinho de compras suspenso
• Botão flutuante adicionar ao carrinho
• Processo de checkout sem distrações

O OceanWP oferece várias opções de personalização e é compatível com o Elementor.

Quando considerar se tornar profissional com o Astra

Tanto o Astra quanto o Elementor oferecem versões pro que podem adicionar funcionalidades à sua loja WooCommerce.

Essa funcionalidade não é apenas atraente – ela adiciona recursos que podem ter um efeito real nos resultados da sua loja, facilitando para os visitantes comprar seus produtos, além de oferecer opções para controlar a página de checkout da sua loja:

• Rolagem infinita para produtos: mais produtos são carregados automaticamente à medida que um visitante rola a página para baixo. Uma pesquisa do Baymard Institute sugere que os compradores de comércio eletrônico tendem a visualizar mais produtos com rolagem infinita, o que é ótimo se sua loja tiver um catálogo profundo.
• Barra lateral fora da tela: permite adicionar filtros úteis sem atrapalhar a navegação de seus compradores. A filtragem de qualidade é um aspecto essencial de qualquer loja de comércio eletrônico. Feito corretamente, ele permite que seus clientes encontrem rapidamente o produto certo para que possam fazer sua compra.
• Visualização rápida do produto: os compradores podem clicar em um botão Visualização rápida quando passam o mouse sobre um produto para ver mais informações sobre esse produto. Isso permite que eles vejam detalhes importantes sem exigir que eles carreguem uma nova página, o que pode facilitar a experiência de compra.
• Mais opções de checkout: você pode adicionar um checkout sem distrações ou ativar um processo de checkout em duas etapas. Você também pode optar por ativar ou não o campo de cupom, bem como algumas outras configurações menores. Todas essas opções ajudam você a ajustar seu processo de checkout para garantir que sua taxa de abandono de carrinho seja a mais baixa possível.
• Marca branca: se você estiver construindo uma loja para um cliente, esse recurso permite remover toda a marca Astra do painel do WordPress para oferecer um produto final mais personalizado.

Onde o Astra Pro oferece acesso a recursos e funcionalidades de comércio eletrônico abrangentes e exclusivos, o Astra Essential Bundle e o Growth Bundle permitem que você use sites premium prontos para uso com tags “Premium” da biblioteca de sites iniciais.

Elementor vs. Elementor Pro: quando atualizar

A versão gratuita do Elementor funciona muito bem. Se você está apenas começando ou é um desenvolvedor experiente de sites WordPress, a Elementor oferece uma ampla gama de possibilidades de design.

No entanto, se você estiver procurando por mais ferramentas e recursos para melhorar as conversões e as vendas, sempre há o Elementor Pro.

Embora tenhamos nos concentrado mais nos aspectos WooCommerce e Elementor em uma tabela de comparação abaixo, veja algumas das diferenças significativas entre Elementor e Elementor Pro.

1. Enquanto o construtor de temas permite que você personalize cada parte do seu tema, o construtor de temas do Elementor Pro permite que você vá além das restrições do tema. Usando o Elementor, você pode projetar visualmente os vários elementos do seu site, como cabeçalho, rodapé, página de arquivo, postagens únicas e muito mais. Isso envolve codificação? De jeito nenhum! E funciona em praticamente qualquer tema do WordPress.
   
2. Como você cria formulários de contato? Estamos supondo que é instalando um plug-in de formulário de contato, como WP Forms, Ninja Forms, Contact Form 7 e muito mais. Embora todas essas sejam ótimas opções, o widget de formulários do Elementor Pro oferece a mesma flexibilidade. Crie seus formulários rapidamente e defina alertas e notificações personalizados. Quer integrar algumas ferramentas de automação ou CRM? Os widgets de formulário do Elementor Pro permitem que você faça isso com apenas alguns cliques.
   
3. Você já usou os modelos e blocos profissionais da biblioteca Elementor? Se você tiver, saberá que há muito mais opções disponíveis na versão Pro. Usando esses modelos e blocos projetados profissionalmente, você pode personalizá-los facilmente para criar páginas de destino, páginas da Web, títulos animados, formulários e muito mais.

Além do acima, eis por que você pode considerar a versão Elementor Pro, especialmente se você possui uma loja online.

WooCommerce, Astra e Elementor: melhor juntos

Junte todos eles e WooCommerce, Astra e Elementor são uma ameaça tripla que permite que você construa uma loja de comércio eletrônico completamente personalizada em pouco tempo, sem escrever uma única linha de código.

Lembre-se, tudo o que você precisa fazer é:

• Instalar e configurar o WooCommerce
• Importar um site de demonstração do Astra
• Personalize sua loja por meio das configurações do Personalizador em tempo real do Astra
• Edite sua página inicial e outras páginas principais com o construtor de páginas Elementor

Agora saia e comece a vender seus produtos!