Como personalizar suas páginas WooCommerce com Elementor

WooCommerce é de longe o melhor plugin WordPress para configurar uma loja online. O único problema é que, embora lhe dê controle sobre a maioria das configurações da loja, e simplifica o processo de criação do produto, não permite muita customização na hora de projetar.

Existem várias maneiras de contornar isso com o Elementor Pro:

O principal problema com o qual estamos lidando aqui é que o WooCommerce não oferece aos usuários a capacidade de personalizar páginas como:

• Comprar
• produtos
• Carrinho
• Confira
• Minha conta

Muitos temas premium do WooCommerce Elementor fornecem uma solução simples para esse problema. Dentro de cada tema, você encontrará demonstrações de sites ou modelos de página que oferecem várias opções de layout para suas páginas de comércio eletrônico.

Por exemplo, MyDecor vem com nove layouts de produtos para escolher:

Se você não precisa ou quer gastar muito tempo personalizando suas páginas WooCommerce, este será o melhor método para você.

Depois de carregar seu tema no WordPress e instalar sua demonstração preferida, use o plug-in do construtor de páginas Elementor para ajustar os designs e layouts. Para obter os melhores resultados, você terá que usar os widgets Elementor Pro.

A propósito, se você estiver curioso sobre quais temas WooCommerce compatíveis com Elementor são os melhores para usar, confira algumas de nossas recomendações:

Existem três páginas que o WooCommerce irá gerar automaticamente para você após a instalação do plugin:

A maioria dos temas premium do WordPress fará o mesmo.

Se você der uma olhada nessas páginas no WordPress, verá um shortcode no lugar de onde o conteúdo deve estar:

Abra a visualização desta página e você encontrará uma Carrinho página:

Não há nada de errado com este projeto. No entanto, e se você quiser estruturá-lo um pouco diferente – como adicionar uma barra lateral ao lado direito da página? Ou se você quisesse adicionar uma seção com upsells ou itens da lista de desejos abaixo do carrinho?

A única maneira de personalizar essas três páginas do WooCommerce é remover o código de acesso e editá-las no Elementor. Aqui está o processo que você seguirá para fazer isso:

Vamos para Páginas e encontre a página pré-fabricada do WooCommerce que você deseja editar:

Abra o que você deseja editar. Neste exemplo, vamos trabalhar em Confira.

No editor do WordPress, selecione o Código curto quadra. Em seguida, clique no Opções (três pontos verticais).

Clique Remover código de acesso para excluir o bloco da página.

Atualize a página. Em seguida, clique no azul Editar com Elementor botão na parte superior para abrir o editor.

Infelizmente, os modelos de página e bloco do Elementor serão de pouca ajuda para você. No momento em que escrevo isso, não há modelos para o conteúdo do carrinho, checkout ou página da conta.

Dito isso, você pode usar os widgets WooCommerce do Elementor Pro. Apenas certifique-se de ter configurado as configurações globais do seu tema para minimizar a quantidade de edição estilística que você precisa fazer aqui.

O que é ótimo em usar os widgets do Elementor Pro é que há um para praticamente todas as páginas que você deseja personalizar:

Confira cria uma página de checkout com:

• Formulário de detalhes de cobrança
• Campo de nota de pedido
• Caixa de resumo
• Seção de cupons
• Botão de compra (com contrato de termos de serviço)

Carrinho cria uma página de carrinho com:

• Detalhes do carrinho
• Campo de cupom
• Total da compra com cálculos de frete

Minha conta cria uma página de conta de usuário com guias para:

• Painel
• Pedidos
• Transferências
• Endereços
• Detalhes da conta
• Sair

Com cada um desses widgets, você pode personalizar a aparência de cada seção, bem como o design da página geral. Em alguns casos, você pode desativar alguns dos recursos (como o código do cupom) quando forem irrelevantes para sua experiência de compra.

Você pode adicionar outros widgets nessas páginas do WooCommerce, a propósito. O Elementor possui widgets Pro para todos os tipos de coisas – Migalhas de pão, Upsells, Categorias de Produtose mais.

Quando terminar de personalizar seu design, clique no botão verde Atualizar botão no canto inferior direito. Em seguida, saia para o painel do WordPress.

Repita esse processo para quantas páginas você precisar personalizar.

Use este método para construir seu WooCommerce Comprar e produtos páginas com Elementor Pro.

Antes de prosseguir com este fluxo de trabalho, é uma boa ideia ter pelo menos um produto carregado em sua loja. Caso contrário, você não poderá ver dados ou imagens reais enquanto monta e personaliza seus designs.

No painel do WordPress, localize o Modelos cardápio. Em seguida, selecione Criador de temas:

O Theme Builder é um recurso Pro que permite aos usuários criar designs personalizados para os componentes e páginas mais importantes de um site. Quando o WooCommerce é instalado, os usuários ganham a capacidade de personalizar o Produto único e Arquivo de produtos páginas com Elementor.

Para criar uma página para sua Loja, passe o mouse sobre Arquivo de produtos e clique no botão azul com sinal de mais. Para criar uma página para produtos individuais, passe o mouse sobre Produto único e clique no botão azul com sinal de mais.

Para nosso exemplo, criaremos um layout global para nossos produtos.

Depois de clicar no sinal de mais, o Elementor o levará para dentro do construtor e fornecerá modelos de bloco que correspondem ao que você está tentando criar:

Mesmo que os layouts pré-fabricados não sejam exatamente o que você imaginou, escolha aquele que mais se aproxima do que você deseja fazer. Começar a partir de um modelo é um bom truque para economizar tempo, pois você pode deixar a base e concentrar sua energia na edição do conteúdo.

Para inserir o modelo na página, clique no ícone verde Inserir botão que aparece no canto superior direito dele.

Salve seu produto ou página de loja como rascunho e retorne ao painel do WordPress. Vamos para Modelos e Modelos salvos. Clique em Importar modelos para puxar seu arquivo de design externo:

Elementor vai perguntar que tipo de página é. Em seguida, você será levado ao editor Elementor, onde poderá personalizá-lo.

Você não precisará retornar ao Criador de temas se este é o caminho que você toma. Apenas certifique-se de concluir as etapas 4 e 5 para poder programar o modelo de página para aparecer como um design de página global.

Quando estiver pronto, comece removendo os widgets e recursos que você não precisa. Estes devem ser elementos que você não substituirá por mais nada. Por exemplo, ao personalizar minha própria página de produto, deixei a coluna de imagem intacta:

No entanto, removi a imagem de plano de fundo que estava configurada para inserir a foto principal do produto. Então arrastei o Imagens do produto widget na coluna.

Isso me permite criar uma experiência de imagem de produto mais completa e interativa. Para começar, se eu carregar mais de uma imagem de produto no WordPress, a galeria completa aparecerá aqui. Em segundo lugar, este widget vem com um recurso de zoom acionado por foco, que tornará as imagens mais úteis para os compradores, pois eles podem ver detalhes dos produtos de perto.

Agora, depois de remover widgets e seções que você não precisa, vá em frente e adicione widgets à tela para quaisquer recursos que estejam faltando. Você provavelmente vai encontrá-los sob o produtos e WooCommerce categorias. Você também pode usar outros widgets Elementor se forem necessários.

Por fim, passe algum tempo percorrendo cada parte da página. Personalize o conteúdo e o estilo de tudo o que precisa. Isso vale tanto para os widgets individuais quanto para as várias seções da página.

Quando terminar de finalizar seu design, clique na seta para cima à direita do verde Publicar botão. Selecionar Condições de exibição:

No pop-up a seguir, clique no botão Adicionar condição botão. Por padrão, o Produtos únicos página que você está criando será aplicada a todas as páginas de produtos:

Se você deseja exibi-lo apenas para determinados tipos de produtos, clique no botão Produtos menu suspenso e selecione a categoria, tag ou outra especificação à qual você deseja limitar a condição.

Se você deseja exibir este design para todos os produtos, exceto uma categoria ou tipo específico, clique em Adicionar condição mais uma vez e crie um EXCLUIR contexto.

Quando terminar de definir as condições, clique em Salvar fechar. Isso salvará simultaneamente suas condições e publicará o novo design nas áreas do site onde for aplicável.

Abra seu site e navegue até a página de um produto (ou o Comprar página, se você a personalizou primeiro). Você verá as alterações refletidas lá.

WooCommerce é uma ótima solução para configurar uma loja online. Todas as peças básicas que você precisa para começar a vender seus produtos são incorporadas diretamente na plataforma. No entanto, não oferece muito em termos de personalização de design.

O Elementor Pro nos oferece uma solução para esse problema com sua ferramenta Theme Builder e widgets Pro.

Este plugin de construtor de páginas premium facilita a construção de uma loja WooCommerce com o Elementor e, em seguida, personaliza as partes que o próprio WooCommerce não toca – como as páginas Shop, Cart e Checkout.

A dupla Elementor-WooCommerce é essencial para construir uma loja online de alto desempenho. Quando estiver pronto para aprimorar a experiência de compra personalizada que você criou hoje, experimente esses complementos do WooCommerce Elementor.