As tendências de compras estão mudando rapidamente e as pessoas tendem a comprar on-line mais do que nunca.
É por isso que eles precisam de uma loja de comércio eletrônico para aumentar os hábitos de compras on-line, porque as pessoas acham mais conveniente comprar on-line do que sair para fazer compras.
Você também pode iniciar sua loja de comércio eletrônico imediatamente, usando as ferramentas e a configuração certas. E você notará um aumento drástico em suas vendas em um período recorde de tempo.
Se você planejou iniciar uma loja de comércio eletrônico e procurou um especialista em WordPress para fazer o trabalho, deixe-me dizer, você não precisa de nenhum.
Sim! Você pode fazer isso sozinho, porque não precisa ser um desenvolvedor ou especialista em codificação do WordPress e pode fazê-lo sem ter conhecimento de codificação com as ferramentas e a configuração corretas.
Basta seguir o tutorial passo a passo de criação de uma página de loja WooCommerce usando o construtor de páginas Elementor.
Vamos nos aprofundar mais para chegar ao ponto!
- O que você precisará para criar uma página de produto usando o Elementor?
- Como instalar o construtor de páginas Elementor?
- Crie uma página de produto Elementor WooCommerce passo a passo
- Celular otimize sua página de produto do WooCommerce
- Preços Elementor Pro
- Empacotando
O que você precisará para criar uma página de produto usando o 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 do WordPress.org, no entanto, a versão gratuita vem com opções de personalização limitadas. Portanto, se você gosta de obter opções de personalização ilimitadas, vá para o Elementor pro e faça o download do Elementor.org oficial.
Como instalar o construtor de páginas Elementor?
- Para a versão gratuita do Elementor:
Vá para Plugin - Plugin > Adicionar novo> insira o construtor de página Elementor> clique em instalar e ativar.
- Para Elementor Pro:
Compre a versão Pro no Elementor.com, faça o upload do arquivo zip e clique em instalar e ativar.
Crie uma página de produto Elementor WooCommerce passo a passo
A página padrão do produto WooCommerce se parece com qualquer página básica do produto WooCommerce, sem nenhuma precisão.
No entanto, se você gosta de adicionar a voz da sua marca, precisa personalizá-la exclusivamente.
Passo 1: Vá para a seção Modelo do 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ágina de produto pré-fabricados, portanto, se você deseja iniciar rapidamente, selecione qualquer um dentre as opções que mais se aproximarem do desejado.
É muito mais fácil criar uma página de produto a partir do modelo pré-fabricado do que criar a partir do zero. Portanto, modifique qualquer modelo existente e economize seu tempo e esforço.
Selecionamos este modelo para a nossa página de produtos.
Depois de selecionar seu modelo favorito, ele o levará ao editor Elementor, onde você poderá personalizar o modelo conforme seu gosto.
Aqui você pode ver diferentes blocos no menu esquerdo. Arraste e solte o bloco com o qual você gostaria de trabalhar.
Clique no botão "+" Adicionar e selecione o tamanho da coluna que você deseja adicionar.
Selecionamos dois tamanhos de coluna para o nosso modelo de produto.
Agora, adicione um widget de título do produto na coluna da direita e adicione o título do seu produto.
Depois de adicionar o título do produto, a próxima etapa é adicionar as “Woo breadcrumbs” acima dele.
Agora, adicione a imagem do produto na coluna da esquerda e arraste e solte o widget de imagem do produto da coluna da esquerda.
Você pode adicionar o preenchimento às duas colunas para mantê-las um pouco afastadas uma da outra.
Após adicionar a imagem e ajustar o preenchimento de acordo com as dimensões necessárias, adicione o widget de classificação do produto sob o título do produto.
Adicione uma breve descrição do widget do produto abaixo do bloco de revisão do produto. você também pode ajustar o espaço entre os dois blocos.
Depois de concluir a descrição do produto e todos os detalhes, o próximo passo é adicionar o preço do produto e, para isso, você precisará arrastar e soltar o widget de preço na 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 à esquerda. 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 e o número de série do produto.
Etapa 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 críticas. E no lado direito da coluna, adicione a seção do produto relacionado.
Para manter o mesmo formato de cada coluna, você pode clicar no canto esquerdo de cada coluna e copiar e colar o formato da coluna para cada coluna.
Etapa 3: adicione outra seção de adicionar "seção de upsell".
Aqui está como a seção de up-sell será exibida após a adição. Adicione um pouco de preenchimento para alinhar a seção.
E, finalmente, você terminou 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 para a seção de olhos no canto inferior esquerdo do menu esquerdo e clicar nas configurações para selecionar a categoria do produto.
Clique no menu Adicionar condição, selecione a categoria do seu produto e clique em Publicar.
Celular otimize sua página de produto do WooCommerce
Como grande parte do tráfego passa pelos smartphones, você deve otimizar sua loja para a visualização do smartphone, caso contrário, poderá perder suas vendas.
Embora o WooCommerce já esteja otimizado para celular, ainda assim, para garantir se os modelos de página de produto parecem absolutamente bons na tela do celular, siga o procedimento.
Você encontrará uma opção Modo responsivo no canto inferior esquerdo da interface Elementor.
Ao clicar na opção responsiva para celular, você pode alternar entre as opções de visualização para celular, área de trabalho e guia.
Clique em qualquer uma das opções que você deseja visualizar e ajuste o design se encontrar alguma complicação.
Agora, salve e continue a publicar sua página do produto.
Preços 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 o seu blog pessoal ou um único site, 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 crescidas ou agências 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 da codificação. 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 que os usuários personalizem todas as dobras e curvas 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 é o Essential Add-ons que vem com elementos dedicados apenas para WooCommerce.
