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

Você deve modificar a página do seu produto para distinguir sua loja de comércio eletrônico da concorrência e proporcionar aos seus clientes uma experiência única. Além disso, a opção de personalizar esteticamente a página do seu produto é fundamental 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 usando-o?

Muitos módulos integrados do Elementor WooCommerce permitem inserir conteúdo ou blocos de funcionalidade do WooCommerce 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 Elementor melhoram e se tornam mais complexas, mais e mais opções se tornam disponíveis para assumir o controle da aparência e do funcionamento de sua loja.

Vamos começar.

• Criando um modelo Elementor
• Construindo imagem ou galeria do produto Elementor
• Título do produto WooCommerce, preço e adição ao carrinho
• Configurando guias de produto Elementor
• Breve descrição do produto Elementor
• Vendas adicionais de produtos Elementor e WooCommerce
• Conclusão – Construtor de páginas de produto Elementor

Criando um modelo Elementor

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

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

Construindo imagem ou galeria do produto Elementor

Cada produto WooCommerce tem uma imagem ou galeria de imagens do produto mostrando as fotos do produto aos clientes. Elementor fornece um módulo integrado de Imagens de Produto 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 da esquerda; isso parece prático e funciona, mas vamos personalizar o selo de vendas para corresponder ao tema Elementor Hello usado neste artigo. Para fazer isso, precisamos aplicar uma pequena linha de CSS customizado, que pode ser introduzida indo em Avançado > CSS customizado e colar o código abaixo.

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

do produto WooCommerce , preço e adição 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 esses três módulos no construtor Elementor e 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 Hello Elementor da seção acima. Estilizar módulos com Elementor é fácil, tudo o que você precisa fazer é clicar no módulo e o editor deverá abrir as opções de estilo à esquerda.

O conteúdo desses módulos é excelente. Assim, trabalharemos na guia Estilo. Primeiramente, 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 ao carrinho clicando em cada módulo e modificando a cor do texto. Para o preço do produto, usarei um cinza escuro para contrastar com o título, então digite este código hexadecimal se estiver acompanhando – #54595f

A seguir, no módulo Adicionar ao carrinho, atualizaremos 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

Alterei 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 avaliações, se disponíveis; isso geralmente é feito por meio de guias de produtos.

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, precisaremos de um pouco de CSS personalizado novamente. Comece a editar as guias de dados do produto, clique na guia Avançado e role para baixo até CSS personalizado. Insira o CSS abaixo e você poderá ajustar as cores de acordo com seu design.

.woocommerce #formulário de revisão #resposta .form-submit input { cor de fundo: #cc3366; cor: #fff; raio da borda: 0px; }

Breve descrição do produto Elementor

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

Procure o módulo WooCommerce Short Description e arraste e solte-o abaixo do preço do produto e acima do módulo Adicionar ao carrinho.

Ainda não há nenhum estilo necessário aqui, pois ele herdou os estilos do Hello Elementor.

Vendas adicionais de produtos Elementor e WooCommerce

Aumentar o valor médio da cesta é 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 facilmente a personalização em sua loja.

Procure 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 a modificar 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 t0 – 0

O produto final será semelhante ao acima. Você pode ajustar o código hexadecimal de cores conforme achar adequado se usar este guia como ponto de partida para 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 que possuem uma tag específica associada a eles.

Conclusão – Construtor de páginas de produtos

Alguns usuários podem ter dificuldades para exibir suas configurações de design personalizadas, como cor da fonte e tipografia, ao usar o Elementor. A aparência da sua loja WooCommerce pode ser afetada se você estiver usando um tema WordPress que pode controlar a aparência da sua loja. Se você encontrar esse problema, lembre-se de que seu artigo pode substituir as configurações personalizadas da página 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 combinar com a aparência desejada.

Você deve modificar a página do seu produto para distinguir sua loja de comércio eletrônico da concorrência e proporcionar aos seus clientes uma experiência única. Além disso, a opção de personalizar esteticamente a página do seu produto é fundamental 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 personalizadas. Esperamos que você tenha achado este tutorial informativo e fornecido as informações necessárias para personalizar seu produto WooCommerce e páginas de arquivo de produtos usando 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.