Crie e projete uma página de produto WooCommerce incrível com Elementor

Você deve modificar sua página de produto para diferenciar sua loja de e-commerce da concorrência e fornecer a seus clientes uma experiência única. Além disso, a opção de personalizar esteticamente a página do produto é crítica para manter um design visual consistente em toda a sua loja online.

Elementor é um dos principais construtores de sites WordPress do mercado, mas você também sabia que poderia construir lojas WooCommerce com ele?

Muitos módulos WooCommerce integrados do Elementor permitem inserir conteúdo WooCommerce ou blocos de funcionalidade ou estilizá-los usando o construtor Elementor. Muito bom, certo?

O estilo e a personalização do WooCommerce costumavam exigir PHP e CSS para cada pequena mudança, mas à medida que ferramentas como o Elementor melhoram e se tornam mais complexas, mais e mais opções se tornam disponíveis para controlar a aparência e o funcionamento de sua loja.

Vamos começar.

• Criando um template de Elementor
• Imagem ou galeria do produto Building Elementor
• Título do produto WooCommerce, preço e adicionar ao carrinho
• Configurando guias de produto Elementor
• Breve descrição do produto Elementor
• Upsell de produtos Elementor e WooCommerce
• Conclusão - Construtor de página de produto Elementor

Criando um template de Elementor

A primeira etapa do procedimento é construir um novo modelo Elementor navegando até Modelos no painel do WordPress. Clique em 'Criar novo' e escolha um único produto como o modelo que deseja criar.

Conforme desenvolvemos este modelo do zero, não há necessidade de colocar blocos; saia da próxima caixa até chegar à tela normal do construtor Elementor para uma nova página.

Imagem ou galeria do produto Building Elementor

Cada produto WooCommerce tem uma imagem do produto ou galeria de imagens mostrando as fotos do produto aos clientes. Elementor fornece um módulo de imagens de produto integrado que nos permite inserir isso em nosso modelo.

Crie uma linha simples de 2 colunas e insira o módulo Imagens do produto na coluna à esquerda; isso parece prático e executa o trabalho, mas vamos personalizar o emblema de vendas para corresponder ao tema Elementor Hello que está sendo usado neste artigo. Para fazer isso, precisamos aplicar uma pequena linha de CSS customizado, que pode ser introduzida em Avançado> CSS customizado e colar o código abaixo.

seletor .onsale {\ sbackground-color: # cc3366; \ s}

Título do produto WooCommerce , preço e adicionar ao carrinho

Estaremos adicionando os módulos Elementor para Título do produto, Preço do produto e Adicionar ao carrinho na coluna da direita.

Procure por esses três módulos no construtor Elementor, em seguida, arraste e solte-os para organizá-los na sequência indicada acima; isso é totalmente funcional, mas queremos personalizá-lo para combinar com o estilo, como o tema do elemento Hello da seção acima. Módulos de estilo com Elementor é fácil, tudo o que você precisa fazer é clicar no módulo, e o editor deve abrir as opções de estilo à esquerda.

O conteúdo desses módulos é excelente. Portanto, trabalharemos na guia Estilo. Em primeiro lugar, vamos atualizar a fonte e a cor do título do produto para corresponder às usadas no tema Hello Elementor.

Em seguida, precisamos fazer o mesmo para os módulos Preço do produto e Adicionar à cesta, clicando em cada módulo e modificando a cor do texto. Para o preço do produto, vou usar um cinza escuro para contrastar com o título, então digite este código hexadecimal se você estiver acompanhando - # 54595f

A seguir, no módulo Adicionar ao carrinho, vamos atualizar algumas coisas. A cor de fundo do botão e o raio da borda do botão usando as configurações abaixo:

• Defina o conteúdo como 'Adicionar ao carrinho'.
• Defina a cor de fundo para '# cc3366'
• Defina o raio da borda como 0

Eu mudei o raio da borda do seletor de quantidade para 0, o que você pode fazer na guia Estilo de Quantidade.

Configurando guias de produto Elementor

Cada produto deve exibir algumas informações básicas, como uma descrição do produto e comentários, se disponíveis; isso geralmente é feito por meio das guias de produto.

Crie uma nova linha abaixo da seção superior e arraste o módulo Product Data Tabs do construtor Elementor para a linha para inseri-lo. Não é necessário muito estilo aqui porque ele herda alguns estilos do tema Hello Elementor. No entanto, vamos modificar o estilo do botão de envio de revisão.

Para fazer isso, vamos precisar de um pouco de CSS customizado novamente. Comece a editar as guias de dados do produto e, em seguida, clique na guia Avançado e role para baixo até CSS personalizado. Insira o CSS abaixo e você pode ajustar as cores de acordo com seu design.

.woocommerce #review form #reply .form-submit input {background-color: # cc3366; cor: #fff; raio da borda: 0px; }

Breve descrição do produto Elementor

Ok, então temos um design decente e de aparência simples até agora, mas parece um pouco esparso. Adicionar um módulo de descrição resumida do produto à parte superior pode ajudar a preencher isso e adicionar mais contexto.

Pesquise o módulo Descrição resumida do WooCommerce e arraste e solte-o abaixo do Preço do produto e acima do módulo Adicionar ao carrinho.

Não há nenhum estilo necessário aqui ainda, pois herdou os estilos de Hello Elementor.

Upsells de p roduto Elementor e WooCommerce

Aumentar o valor médio de sua cesta de compras é crucial para todos os sites WooCommerce, e é por isso que é bom que o Elementor inclua um módulo de Upsells de produtos para você integrar a personalização em sua loja facilmente.

Pesquise o módulo Upsells do produto no construtor Elementor e insira-o em uma nova linha atrás das guias de dados do produto.

Como você pode ver, isso requer alguns ajustes para complementar o resto do nosso estilo. Comece modificando o módulo e faça as seguintes alterações:

• Defina a cor do título para - # cc3366
• Defina a cor do título para - # cc3366
• Defina a cor do preço para - # 54595f
• Defina a cor de fundo do botão para - # cc3366
• Defina a cor do botão para - #fff
• Defina o raio da borda do botão como t0 - 0

O produto acabado será semelhante ao anterior. Você pode ajustar o código hexadecimal de cores conforme achar adequado se usar este guia como um ponto de partida para o seu modelo.

Quando terminar, você publica seu modelo. Na próxima janela, você verá a pergunta “Onde você deseja exibir seu modelo?”. Clique em “Adicionar condição” para determinar quando este modelo deve ser usado. Você pode selecionar “Todos os produtos” para usar o modelo em todas as páginas de seus produtos. Você também pode optar por usar este modelo apenas para produtos que se enquadram em uma categoria específica ou têm uma tag específica associada a eles.

Conclusão - Construtor de página de produto

Alguns usuários podem ter dificuldade em obter suas configurações de design personalizadas, como cor da fonte e tipografia, para exibir ao usar o Elementor. A aparência de sua loja WooCommerce pode ser afetada se você estiver usando um tema WordPress que pode controlar a aparência de sua loja. Se você encontrar esse problema, lembre-se de que seu artigo pode substituir as configurações da página personalizada em alguns casos.

Você também pode escolher uma página em branco e criar uma do zero usando os widgets do produto para uma aparência totalmente personalizada. Use uma página vazia, feche a janela pop-up da biblioteca de modelos quando ela aparecer e comece a construir na página recém-criada. O botão personalizado “Adicionar ao carrinho”, “Preço do produto”, “Imagem do produto” e “Título e descrição do produto” são apenas alguns dos widgets WooCommerce que você pode usar para personalizar a página do seu produto. Você pode ver todos os diferentes widgets disponíveis atualmente visitando esta página. Se preferir, você pode organizar os widgets onde quiser no layout da página e personalizar seus estilos para corresponder à aparência desejada.

Você deve modificar sua página de produto para diferenciar sua loja de e-commerce da concorrência e fornecer a seus clientes uma experiência única. Além disso, a opção de personalizar esteticamente a página do produto é crítica para manter um design visual consistente em toda a sua loja online. Elementor é uma ferramenta fantástica para personalizar as páginas da sua loja WooCommerce e é altamente recomendada. Além de ser simples de usar, o construtor de páginas inclui todos os widgets e opções de estilo necessários para ajudá-lo na criação de páginas de produtos customizadas. Esperamos que você tenha achado este tutorial informativo e fornecido as informações necessárias para personalizar seu produto WooCommerce e as páginas de arquivo do produto usando o Elementor. Você já usou o Elementor para criar páginas WooCommerce no passado? Você está convidado a compartilhar suas idéias na seção de comentários. Teremos o maior prazer em dar uma olhada.