Como construir uma loja com um construtor WooCommerce para Elementor

Você está procurando um construtor WooCommerce para Elementor para que possa criar e personalizar sua loja usando o poderoso construtor visual da Elementor.

Com o ShopReady, você pode criar e personalizar toda a sua loja WooCommerce com Elementor - mesmo se estiver usando apenas a versão gratuita do Elementor!

Se você quiser saber mais sobre o ShopReady, pode conferir nossa análise completa do ShopReady.

Neste artigo, porém, estamos mais focados em como usar o ShopReady como um construtor WooCommerce para Elementor.

A seguir, mostraremos passo a passo como você pode usar o ShopReady para criar e personalizar sua loja, incluindo a adição de recursos avançados, como listas de desejos, visualização rápida de produtos, checkouts otimizados e muito mais.

Você poderá criar uma loja com esta aparência:

E você poderá personalizar tudo usando o Elementor, incluindo seu produto, carrinho e páginas de checkout ( e muito mais ):

Como usar ShopReady como WooCommerce Builder para Elementor

Sem mais delongas, vamos direto ao nosso tutorial passo a passo.

Novamente, se você quiser aprender mais sobre os vários recursos do ShopReady antes de entrar no tutorial, leia nossa análise completa do ShopReady.

E sempre que você optar por experimentá-lo, poderá obter 30% de desconto usando o código de cupom exclusivo WPMaor30 na finalização da compra.

1. Crie sua loja WooCommerce básica e instale o Elementor

Se ainda não o fez, o primeiro passo é configurar sua loja WooCommerce básica.

Você vai querer escolher hospedagem WooCommerce de qualidade, instalar WooCommerce, passar pelo assistente de configuração, adicionar alguns produtos e assim por diante.

Se precisar de ajuda aqui, você pode conferir nosso guia para configurar uma loja WooCommerce.

Não se preocupe em escolher um tema WooCommerce ou personalizar o design ainda, porque é para isso que servem o Elementor e o ShopReady. Concentre-se apenas em configurar as coisas no back-end para que você tenha uma loja funcional, embora básica.

Depois de fazer isso, você também desejará instalar o plug-in Elementor.

Com o ShopReady, você pode usar apenas a versão gratuita do Elementor.

Ou, se você já possui o Elementor Pro, também pode instalá-lo - o ShopReady funciona bem com as duas versões.

2. Instale o ShopReady e ative tudo

Depois de configurar sua loja WooCommerce básica e instalar o Elementor, você estará pronto para instalar o construtor ShopReady WooCommerce para Elementor.

Há uma versão gratuita do ShopReady disponível no WordPress.org, bem como uma versão premium que adiciona mais recursos a partir de US$ 75.

Para este tutorial, temos a versão Pro instalada. No entanto, as mesmas etapas básicas também se aplicam à versão gratuita, portanto, você poderá acompanhar mesmo se usar a versão gratuita ( você pode não ter acesso a alguns dos recursos mais avançados e não será capaz de personalizar quantos modelos ).

Depois de ativar o plug-in, você obterá um novo menu ShopReady no painel do WordPress.

Se você for ao menu principal do ShopReady , obterá uma interface com diferentes áreas onde poderá habilitar vários widgets, módulos e modelos.

Por enquanto, recomendo habilitar todos os widgets e módulos para que você tenha acesso a todos os recursos enquanto cria sua loja.

Depois de criar sua loja, você sempre pode voltar e desativar todos os elementos que não está usando para manter as coisas leves e acelerar sua loja.

É especialmente importante habilitar o módulo Demo Importer , pois isso permitirá que você acesse os modelos de loja pré-fabricados do ShopReady ( embora você sempre possa personalizar tudo do zero ).

Depois de ativar o módulo Demo Importer , ele solicitará que você instale o plugin complementar Demo Importer, o que você deve fazer.

Depois de fazer isso, vá para a nova área Unyson no painel do WordPress e habilite a extensão Backup & Demo Content para que você possa importar os modelos do ShopReady.

Observação – se você deseja criar seus modelos do zero usando o Elementor, pode pular este processo.

3. Importe um modelo para atuar como a base da sua loja

Agora, você pode ir para Ferramentas → Instalação de conteúdo de demonstração para instalar um dos sites de demonstração ShopReady pré-fabricados.

Novamente, você também está livre para pular isso e criar os modelos de sua loja do zero, que abordaremos na próxima seção.

Depois de importar a demonstração, você poderá personalizar tudo totalmente usando o Elementor.

Dê uma olhada nas diferentes opções de demonstração e clique no botão Instalar para a demonstração que você deseja usar como base de sua loja.

Para este tutorial, usaremos o Demo V1 :

E assim, sua loja deve se parecer exatamente com a demonstração:

4. Personalize os modelos da sua loja com Elementor

Agora, você está pronto para começar a usar o construtor WooCommerce para Elementor para personalizar o conteúdo da sua loja.

Para acessar todos os modelos diferentes da sua loja, vá para a área ShopReady no painel do WordPress e selecione a guia Modelos .

Aqui, você verá uma lista de todos os diferentes modelos associados à sua loja. Aqui estão alguns dos modelos mais importantes a serem considerados:

• Produto – o modelo para uma única página de produto.
• Loja – o modelo para a página principal da loja.
• Arquivo da loja – o modelo para a página que lista todos os seus produtos.
• Carrinho / Carrinho Vazio – os modelos para várias etapas do seu carrinho de compras.
• Checkout – o modelo para sua página de checkout.
• Minha conta – o modelo para a página da conta de front-end de um comprador.

No entanto, o bom do ShopReady é que ele também oferece controle sobre muitos outros modelos, como visualização rápida de produtos, lista de desejos e muito mais.

Para editar qualquer modelo e iniciar o Elementor, basta selecionar o modelo relevante e clicar no ícone Lápis .

Você também pode criar novos modelos e usar vários modelos em diferentes partes da sua loja:

O ShopReady agora iniciará a interface Elementor.

Para controlar o design, você pode usar a interface normal do Elementor e todas as suas opções de design.

A principal diferença é que o ShopReady também oferece vários widgets gerais e widgets WooCommerce dedicados que você pode usar em seus designs. Você pode encontrá-los nas várias áreas Shop Ready da interface Elementor:

Cada widget também terá suas próprias configurações exclusivas.

Por exemplo, o widget Miniatura com Zoom permite exibir as imagens do produto com diferentes layouts e configurações:

Quando terminar, certifique-se de salvar suas alterações.

Em seguida, você pode repetir o mesmo processo para editar todos os modelos da sua loja. O link azul do Painel no lado direito da página facilita o retorno à interface de modelos do ShopReady.

Modelos diferentes podem incluir seus próprios widgets especiais. Por exemplo, ao criar o modelo de página de checkout, você receberá widgets especiais para ajudá-lo a fazer isso:

5. Personalize as configurações do site

Além de permitir que você personalize modelos individuais com Elementor, o ShopReady também adiciona algumas opções ao menu Elementor Site Settings. Você pode acessar as configurações do site Elementor clicando no ícone de hambúrguer no canto superior esquerdo da interface Elementor e selecionando Configurações do site .

É aqui que você pode acessar uma série de configurações importantes para o comportamento da sua loja.

Inicialmente, as configurações são divididas em duas áreas – ShopReady e ShopReady General & PopUp.

Se você clicar nessas áreas, terá várias opções adicionais. Por exemplo, você pode controlar o comportamento do minicarrinho em todo o site que você pode adicionar com o ShopReady:

Recomendamos explorar todas essas opções, pois é aqui que você pode encontrar vários recursos interessantes para sua loja.

Você também pode controlar seu cabeçalho e rodapé acessando ShopReady → Header Footer no painel do WordPress.

Comece a usar um construtor WooCommerce para Elementor hoje

Os usuários adoram o Elementor por causa de sua poderosa interface visual de arrastar e soltar.

Com o ShopReady, você pode aproveitar o poder desse construtor para projetar e personalizar totalmente sua loja WooCommerce, mesmo se estiver usando apenas a versão gratuita do Elementor.

Se você estiver pronto para começar, use o botão abaixo para baixar o ShopReady e siga este tutorial para criar sua loja WooCommerce.

Bônus: ganhe 30% de desconto no ShopReady usando o código de cupom exclusivo WPMaor30 na finalização da compra!