As tendências de compras estão mudando rapidamente e as pessoas tendem a comprar online mais do que nunca.
É por isso que a necessidade de uma loja de comércio eletrônico está aumentando para satisfazer os hábitos de compras online, porque as pessoas acham mais conveniente comprar online do que sair para fazer compras.
Você também pode iniciar sua loja de comércio eletrônico imediatamente, usando as ferramentas e configurações certas. E você notará um aumento drástico em suas vendas em um período recorde.
Se você planejou abrir uma loja de comércio eletrônico e está procurando um especialista em WordPress para fazer o trabalho para você, deixe-me dizer, você não precisa de nenhum.
Sim! Você pode fazer isso sozinho porque não precisa ser um desenvolvedor WordPress ou especialista em codificação e pode fazer isso sem ter nenhum conhecimento de codificação com as ferramentas e configurações corretas.
Basta seguir o tutorial passo a passo para criar uma página de loja WooCommerce usando o construtor de páginas Elementor.
Vamos nos aprofundar para chegar ao ponto!
- O que você precisa para criar uma página de produto usando Elementor?
- Como instalar o construtor de páginas Elementor?
- Crie uma página de produto Elementor WooCommerce passo a passo
- Mobile otimize sua página de produto WooCommerce
- Preço Elementor Pro
- Empacotando
O que você precisa para criar uma página de produto usando Elementor?
Instale o plugin em 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 em WordPress.org, porém a versão gratuita vem com opções de personalização limitadas. Portanto, se você deseja obter opções de personalização ilimitadas, vá para o Elementor profissional e baixe-o do Elementor.org oficial.
Como instalar o construtor de páginas Elementor?
- Para a versão gratuita do Elementor:
Vá para Plugin > Adicionar novo > entre no construtor de páginas Elementor > clique em instalar e ativar.
- Para Elementor Pro:
Compre a versão Pro em Elementor.com, carregue o arquivo zip e clique em instalar e ativar.
Crie uma página de produto Elementor WooCommerce passo a passo
A página de produto WooCommerce padrão se parece com qualquer página de produto WooCommerce básica, sem qualquer detalhe.
No entanto, se você gosta de adicionar a voz da sua marca, você deve personalizá-la de forma exclusiva.
Passo 1: Vá para a seção Modelo no menu do Painel e clique em “Adicionar novo”.
Agora, no menu suspenso, selecione o item “Produto Único”
A melhor parte é que o Elementor vem com alguns modelos de páginas de produtos pré-fabricados, então, se você quiser um início rápido, selecione qualquer uma das opções que mais se aproxime da desejada.
É muito mais fácil criar uma página de produto a partir de um modelo pré-fabricado do que criar do zero. Portanto, modifique qualquer modelo existente e economize tempo e esforço.
Selecionamos este modelo para nossa página de produto.
Depois de selecionar seu modelo favorito, você será levado ao editor Elementor, onde poderá personalizar o modelo de acordo com seu gosto.
Aqui você pode ver diferentes blocos no menu esquerdo. Arraste e solte o bloco com o qual deseja trabalhar.
Clique no botão “+” Adicionar e selecione o tamanho da coluna que deseja adicionar.
Selecionamos dois tamanhos de coluna para nosso modelo de produto.
Agora, adicione um widget de título de produto na coluna direita e adicione o título do seu produto nele.
Depois de adicionar o título do produto, a próxima etapa é adicionar a “Woo breadcrumbs” acima dele.
Agora, adicione a imagem do produto na coluna da esquerda e arraste e solte o widget da imagem do produto na coluna da esquerda.
Você pode adicionar preenchimento a ambas as colunas para mantê-las ligeiramente afastadas uma da outra.
Depois de adicionar a imagem e ajustar o preenchimento de acordo com as dimensões exigidas, adicione o widget de classificaçã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.
Assim que terminar a descrição do produto e todos os detalhes, nosso próximo passo é adicionar o preço do produto e para isso você terá que arrastar e soltar o widget de preço abaixo da descrição do produto.
Depois de adicionar a guia de preço abaixo da descrição do produto, você pode personalizar o widget de preço selecionando as opções no menu esquerdo. Você pode ampliar o ícone, alterar o estilo da fonte e também a cor da fonte de preto para qualquer outra cor de sua escolha.
Agora adicione o widget “adicionar ao carrinho” e personalize sua cor, fonte ou estilo no menu, se desejar.
Agora, adicione a meta do produto no widget de preço que mostrará a categoria do produto 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 guias de dados do produto, incluindo descrição, informações adicionais e análises. E no lado direito da coluna adicione a seção de produtos relacionados.
Para manter o mesmo formato de cada coluna você pode clicar no canto esquerdo de cada coluna e copiar e colar o formato de cada coluna.
Etapa 3: adicione outra seção ou adicione “seção de upsell”.
Veja como ficará sua seção de upsell após a adição. Adicione algum preenchimento para alinhar a seção.
E, finalmente, você concluiu o design da página do seu produto. Agora, a etapa final é onde você deseja publicar seu produto? você pode clicar em publicar ou ir até a seção de olhos no canto inferior do menu esquerdo e clicar nas configurações para selecionar a categoria do produto.
Clique no menu adicionar condição e selecione a categoria do seu produto e clique em publicar.
Mobile otimize sua página de produto WooCommerce
Como muito tráfego vai passar pelos Smartphones então você terá que otimizar sua loja para a visualização do Smartphone, caso contrário poderá perder suas vendas.
Embora o WooCommerce já esteja otimizado para dispositivos móveis, para ter certeza de que os modelos de página do seu produto ficam absolutamente bons na tela do celular, siga o procedimento.
Você encontrará uma opção Modo responsivo no canto inferior esquerdo da interface do Elementor.
Ao clicar na opção Mobile Responsive você pode alternar entre as opções Mobile, Desktop e visualização de guias.
Clique em qualquer uma das opções que desejar visualizar e ajuste o design se encontrar alguma complicação.
Agora, salve e continue publicando a página do seu produto.
Preço Elementor Pro
A versão básica do Elementor está disponível gratuitamente, enquanto a versão pro vem com três licenças. Se você está procurando seu blog pessoal ou um site único, a licença pessoal é mais adequada para você, onde você pode obter um construtor WooCommerce junto com mais de 90 widgets profissionais.
Enquanto as licenças plus e expert são adequadas para empresas ou agências crescidas com suporte de 3 sites e 1000 sites, respectivamente.
Empacotando
O único objetivo do construtor de páginas Elementor é permitir que os usuários liberem sua criatividade sem depender de codificação. Elementor vem com uma variedade de widgets que permitem criar qualquer tipo de página de produto com base em layouts atraentes. Os elementos básicos do WooCommerce são mais de 10 que permitem aos usuários personalizar cada torção e curva da página da loja. E se você não encontrar o elemento desejado no menu Elementor, não se preocupe! Existem muitas outras configurações avançadas que podem atualizar seu arsenal e adicionar vários elementos à sua biblioteca. Um deles são os complementos essenciais que vêm com elementos dedicados apenas para WooCommerce.
