Gostaria de aprender a criar uma página de loja personalizada? WooCommerce com Elementor?
Como você deve saber, o Elementor Pro vem com recurso de construtor WooCommerce permitindo-lhe criar um site de comércio eletrônico personalizado com WooCommerce sem codificação. Este recurso permite que você crie páginas WooCommerce personalizadas usando o editor visual do Elementor que oferece uma interface intuitiva.
Veja também: Como instalar o Elementor no WordPress
No momento de escrever este artigo, você pode criar páginas personalizadas para a página da loja, página do produto e páginas de arquivo do produto (tags e categorias). Em breve, você também poderá criar páginas personalizadas para a página de checkout e a página do carrinho.
Neste artigo, mostraremos como criar uma página de loja WooCommerce personalizada usando o recurso de construtor WooCommerce do Elementor Pro.
A página da loja em si é uma das páginas padrão do WooCommerce. Esta página funciona como uma vitrine para exibir seus produtos. Você pode acessar esta página indo para seusite.com/store. Por padrão, a página da loja WooCommerce exibe apenas produtos WooCommerce.
Ao criar uma página de loja personalizada usando o Elementor Pro, você pode adicionar elementos para tornar sua vitrine mais atraente.
Como criar uma página personalizada de uma loja WooCommerce com Elementor
Existem pelo menos dois widgets Elementor que você pode usar para criar uma página personalizada de uma loja WooCommerce: Produtos de arquivo e Produtos.
Neste exemplo, usamos o último.
A função do widget Produtos é bastante semelhante ao do widget Postagens. A diferença é que o widget Produtos é usado para exibir produtos WooCommerce enquanto o widget Postagens é usado para exibir postagens de blog.
Leia também: Como importar ou exportar modelos no Elementor
Observe que você só pode encontrar o widget Produtos quando o plug-in WooCommerce está instalado e ativado.
Para começar a criar uma página de loja WooCommerce personalizada usando Elementor Pro, vá para primeiro à Modelos -> Criador de temas no painel do WordPress. Clique na aba Produtos arquivo da página Theme Builder e, a seguir, clique no botão adicionar a ARQUIVO DE PRODUTOS.
Dê um nome à sua modelo e clique no botão CRIE UM MODELO.
Existem três modelos de página de loja personalizados que você pode escolher caso queira criar a página de loja personalizada a partir de um modelo. Se você deseja criar a página da loja personalizada do zero, basta fechar a biblioteca de modelos.
Veja também: Como usar o Color Sampler no Elementor
Neste exemplo, criaremos a página da loja personalizada do zero. Conforme mencionado acima, usaremos o widget Produtos para exibir os produtos.
Antes de adicionar o widget Produtos à caixa de edição, você pode definir o layout adicionando seções e colunas. Assim que o layout estiver pronto, você pode simplesmente arrastar o widget Produtos para a caixa de edição.
Como você pode ver, o widget Produtos carrega e exibe automaticamente os produtos WooCommerce mais recentes. Você pode modificar a consulta abrindo o bloco Inquerir sob a guia Conteúdo no painel de configurações. Existem cinco opções para escolher:
- Consulta Atual - Consulta Atual
- Últimos produtos - Últimos produtos
- Venda - Venda
- Apresentado - Apresentado
- Seleção manual - Seleção manual
Você também pode definir a ordem em que os produtos são exibidos ou excluir certos
Para definir o número de colunas e linhas, você pode abrir o bloco Conteúdo sob a guia Contente. A partir deste bloco, você também pode ativar o paginação.
Você pode brincar com o painel de configurações até obter as melhores configurações para o widget Produtos. Quando terminar de usar o widget Produtos, você pode adicionar mais widgets à sua página.
Leia também: Como usar o seletor de cores no Elementor
Assim que terminar de editar a página, você pode clicar no botão PUBLICAR na parte inferior do painel de configurações.
Adicione uma condição de exibição clicando no botão adicione uma condição. Como você deseja criar uma página de loja personalizada, selecione a opção Loja Página. Clique no botão SALVAR FECHAR para salvar a mudança.
Até agora, você criou com sucesso a página da loja WooCommerce personalizada usando o Elementor Pro. Você pode ir em seu site.com/store para verificar o resultado.
Personalize o widget Produtos
Antes de publicar sua página, você pode personalizar o widget Produtos para torná-lo mais atraente. Para fazer isso, clique no widget na caixa de edição e navegue até a guia Style no painel de configurações. Existem quatro blocos que você pode abrir da seguinte maneira:
Produtos
Você pode abrir este bloco para definir a lacuna entre colunas e linhas. A partir deste bloco, você também pode definir a tipografia (família da fonte, tamanho da fonte, etc.), bem como a cor do texto dos elementos do produto, como título do produto, preço do produto, avaliação do produto. Produto, etc…. Você também pode definir a borda da imagem do produto,
- Caixa
Nesse contexto, Box refere-se à embalagem de cada produto. Você pode abrir o bloco Caixa para definir a largura da borda do contêiner, o raio da borda, sombra da caixa, a cor de fundo, a cor da borda, etc.
- Paginação
Se você ativar a opção Paginação do bloco Conteúdo, você pode abrir o bloco Paginação sob a guia Style para personalizar a paginação. Você pode definir coisas como espaçamento, cor da borda, cor de fundo, etc.
Você também pode definir parâmetros diferentes em cada estado (normal, apontando e ativo).
- Venda Flash
Ao adicionar um novo produto no WooCommerce, você pode definir um atributo de preço de venda para mostrar aos visitantes que o produto associado tem desconto. Para enfatizar isso, você pode exibir o atributo de venda na página da loja para que os produtos com desconto tenham um emblema de venda.
Você pode abrir o bloco Venda Flash para personalizar o selo de venda. Você pode definir elementos como cor do texto, cor do fundo, tipografia, raio da borda, tamanho (largura e altura), distância, etc….
No final
O WooCommerce Builder é um dos recursos oferecidos pelo Elementor Pro. Ele permite que você criar um site plataforma de e-commerce personalizada e única com WooCommerce e sem codificação. Não há necessidade de instalar um tema WordPress que afirma ser projetado para WooCommerce. Em vez disso, você mesmo pode criar páginas personalizadas do WooCommerce usando o editor visual da Elementor.
Leia também: Como adicionar divisor para criar seção no Elementor
Até a versão 3.2.2, o Elementor Pro permite apenas a criação de uma página de loja personalizada, página de produto único personalizado e páginas de arquivo de produto personalizado. Mas a Elementor anunciou que na próxima versão do Elementor Pro, você também será capaz de criar uma página de carrinho personalizada, uma página de checkout personalizada e uma página de conta de cliente personalizada.
Obtenha o Elementor Pro agora!
Conclusão
Aqui está ! É isso neste artigo que mostra como criar uma página personalizada para uma loja WooCommerce com Elementor. Se você tiver alguma dúvida sobre como chegar lá fdeixe-nos saber no Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
