As tendências de consumo estão mudando rapidamente e as pessoas tendem a comprar online mais do que nunca.
É por isso que a necessidade de lojas de comércio eletrônico está aumentando para atender aos hábitos de compras online, pois as pessoas acham mais conveniente comprar online do que sair para fazer compras.
Você também pode começar sua loja virtual imediatamente, usando as ferramentas e a configuração certas. E você notará um aumento drástico nas suas vendas em um período recorde de tempo.
Se você planeja abrir uma loja virtual e está procurando um especialista em WordPress para fazer o trabalho para você, deixe-me dizer: você não precisa de nenhum.
Sim! Você mesmo pode fazer isso, pois não precisa ser um desenvolvedor WordPress ou especialista em programação, e pode realizar a instalação sem nenhum conhecimento prévio de programação, desde que tenha as ferramentas e a configuração adequadas.
Basta seguir o tutorial passo a passo para criar uma página de loja WooCommerce usando o construtor de páginas Elementor.
Vamos analisar mais a fundo para chegar ao ponto principal!
- O que você precisa para criar uma página de produto usando o Elementor?
- Como instalar o construtor de páginas Elementor?
- Crie uma página de produto WooCommerce com Elementor passo a passo
- Otimize a página do seu produto WooCommerce para dispositivos móveis
- Preços do Elementor Pro
- Concluindo
O que você precisa para criar uma página de produto usando o Elementor?
Instale o plugin no seu site WordPress a partir do repositório WordPress.org e, além disso, você precisará instalar o construtor de páginas Elementor . A versão gratuita pode ser baixada do WordPress.org, porém, ela oferece opções de personalização limitadas. Portanto, se você deseja opções de personalização ilimitadas, opte pela versão profissional do Elementor e baixe-a do site oficial Elementor.org.
Como instalar o construtor de páginas Elementor?
- Para a versão gratuita do Elementor:
Acesse Plugin> Adicionar novo > digite Elementor page builder > clique em instalar e ativar.
- Para Elementor Pro:
Adquira a versão Pro em Elementor.com, faça o upload do arquivo zip e clique em instalar e ativar.
Crie uma página de produto WooCommerce com Elementor passo a passo
A página de produto padrão do WooCommerce tem a mesma aparência de qualquer página de produto básica do WooCommerce, sem nenhum detalhe que a torne mais nítida.
No entanto, se você quiser adicionar a voz da sua marca, terá que personalizá-la de forma exclusiva.
Passo 1: Acesse a seção Modelos no menu do seu Painel de Controle e clique em “Adicionar novo”.
Agora, no menu suspenso, selecione o item “Produto único”
A melhor parte é que o Elementor já vem com alguns modelos de página de produto prontos, então, se você quiser começar rapidamente, selecione qualquer uma das opções que mais se aproxime da que você deseja.
É muito mais fácil criar uma página de produto a partir de um modelo predefinido do que criar uma do zero. Portanto, modifique qualquer modelo existente e economize tempo e esforço.
Selecionamos este modelo para a página do nosso produto.
Após selecionar seu modelo favorito, você será direcionado para o editor Elementor, onde poderá personalizá-lo de acordo com seu gosto.
Aqui você pode ver diferentes blocos no menu à esquerda. Arraste e solte o bloco com o qual deseja trabalhar.
Clique no botão “+” Adicionar e selecione o tamanho de coluna que deseja adicionar.
Selecionamos um tamanho de duas colunas para o nosso modelo de produto.
Agora, adicione um widget de título do produto na coluna da direita e insira o título do seu produto nele.
Depois de adicionar o título do produto, o próximo passo é adicionar o "Woo breadcrumbs" acima dele.
Agora, adicione a imagem do produto na coluna da esquerda e arraste e solte o widget da imagem do produto da coluna da esquerda.
Você pode adicionar espaçamento entre as duas colunas para mantê-las ligeiramente afastadas uma da outra.
Após adicionar a imagem e ajustar o espaçamento de acordo com as dimensões necessárias, adicione o widget de avaliação do produto abaixo do título do produto.
Adicione uma breve descrição do widget do produto abaixo do bloco de avaliação do produto. Você também pode ajustar o espaço entre os dois blocos.
Após concluir a descrição do produto e todos os detalhes, o próximo passo é adicionar o preço. Para isso, basta arrastar e soltar o widget de preço abaixo da descrição do produto.
Após adicionar a aba de preço abaixo da descrição do produto, você pode personalizar o widget de preço selecionando as opções no menu à esquerda. Você pode aumentar o ícone, alterar o estilo da fonte e também a cor da fonte, de preto para qualquer outra cor de sua preferência.
Agora, adicione o widget "adicionar ao carrinho" e personalize sua cor, fonte ou estilo no menu, se desejar.
Agora, adicione metadados do produto abaixo do widget de preço, que mostrarão a categoria e o número de série do produto.
Passo 2: adicione informações adicionais sobre o produto na próxima seção.
Crie uma nova seção de duas colunas e adicione abas de dados do produto, incluindo descrição, informações adicionais e avaliações. À direita de cada coluna, adicione uma seção de produtos relacionados.
Para manter o mesmo formato em cada coluna, você pode clicar no canto esquerdo de cada coluna e copiar e colar o formato da coluna desejada.
Passo 3: adicione outra seção de "venda adicional"
Veja como ficará sua seção de upsell após a adição. Adicione um pouco de espaçamento para alinhar a seção.
E finalmente, você concluiu o design da página do seu produto. Agora, o último passo é onde você deseja publicar seu produto. Você pode clicar em "Publicar" ou ir até a seção "Olho" no canto inferior esquerdo do menu e clicar em "Configurações" para selecionar a categoria do produto.
Clique no menu "Adicionar condição", selecione a categoria do seu produto e clique em "Publicar".
Otimize a página do seu produto WooCommerce para dispositivos móveis
Como grande parte do tráfego virá de smartphones, você precisará otimizar sua loja para visualização nesses dispositivos, caso contrário, poderá perder vendas.
Embora o WooCommerce já seja otimizado para dispositivos móveis, para garantir que seus modelos de página de produto tenham uma aparência perfeita em telas de celulares, siga o procedimento.
Você encontrará a opção Modo Responsivo no canto inferior esquerdo da interface do Elementor.
Ao clicar na opção "Responsivo para dispositivos móveis", você pode alternar entre as opções de visualização para dispositivos móveis, computadores e abas.
Clique em qualquer uma das opções que desejar para visualizar e ajustar o design, caso encontre alguma complicação.
Agora, salve e continue para publicar a página do seu produto.
Preços do Elementor Pro
A versão básica do Elementor é gratuita, enquanto a versão profissional vem com três licenças. Se você busca uma solução para seu blog pessoal ou um único site, a licença pessoal é a mais adequada, pois inclui o construtor WooCommerce e mais de 90 widgets profissionais.
Enquanto as licenças Plus e Expert são adequadas para empresas ou agências já estabelecidas, com suporte para 3 e 1000 sites, respectivamente.
Concluindo
O principal objetivo do construtor de páginas Elementor é permitir que os usuários liberem sua criatividade sem depender de conhecimentos de programação. O Elementor oferece uma variedade de widgets que permitem criar qualquer tipo de página de produto com layouts atraentes. Os elementos básicos do WooCommerce são mais de 10, permitindo que os usuários personalizem cada detalhe da página da loja. E se você não encontrar o elemento desejado no menu do Elementor, não se preocupe! Existem muitas outras configurações avançadas que podem ampliar seu arsenal e adicionar vários elementos à sua biblioteca. Uma delas é o Essential Add-ons , que oferece elementos dedicados exclusivamente ao WooCommerce.
