Como personalizar a página do carrinho WooCommerce sem codificação (grátis)

A personalização da página do carrinho WooCommerce oferece vários benefícios, incluindo o abandono da página do carrinho, mas fazer isso sem problemas não é moleza.

A página do carrinho leva à decisão final sobre finalizar a compra ou abandonar o carrinho. Você não gostaria que os compradores abandonassem o carrinho, certo? É aí que você precisa personalizar a página do carrinho do WooCommerce. 

Neste blog, você encontrará um guia passo a passo sobre como personalizar as páginas do carrinho WooCommerce sem qualquer codificação.

Vamos começar…

Qual é a aparência de uma página de carrinho WooCommerce padrão

WooCommerce fornece um layout muito básico de uma página de carrinho. Embora temas diferentes adicionem estilos diferentes à página, ela ainda parece a mesma.

Aqui estão os elementos comuns do design de uma página de carrinho WooCommerce (incluídos, mas não limitados a):

Você pode editar a página do carrinho WooCommerce e personalizar os elementos de acordo com suas necessidades. Antes disso, vamos dar uma olhada na aparência da página padrão do carrinho WooCommerce em diferentes temas.

Esta é a aparência do design da página do carrinho WooCommerce no Tema WordPress Vinte e Vinte:

Esta é a aparência da página do carrinho no Vinte e vinte e um tema do WordPress:

Até mesmo um tema Elementor popular como Olá Elementor lhe dará um design de página de carrinho WooCommerce de aparência muito básica com o mesmo layout antigo.

Acho que você concordará que todas as páginas do carrinho acima têm o mesmo layout e não oferecem nada sofisticado ou extraordinário

➡️➡️ Verifique Como adicionar um alternador de moeda ao site WooCommerce em 5 etapas

Por que personalizar a página do carrinho WooCommerce

De acordo com o relatório de novembro de 2023 da BuiltWith, mais de 6,6 milhões de sites ativos usam WoCommerce.

WooCommerce permite que você crie um site de comércio eletrônico totalmente funcional e pronto para usar com seus modelos, incluindo uma página de carrinho em um piscar de olhos. Muitos desses sites usam os modelos padrão do WooCommerce para o carrinho e outras páginas.

Mas você não gostaria que a página do carrinho do seu site fosse semelhante a outras, pois isso provavelmente desanimará seus compradores. Para se destacar da multidão, as edições da página do carrinho WooCommerce ou a personalização do carrinho WooCommerce podem ser úteis.

Também é um fato que cerca  70% de pessoas abandonam seu carrinho de compras e nunca finalizar a compra. Isso mostra como é importante personalizar a página do carrinho WooCommerce.

Usar Plugins de carrinho abandonado WooCommerce para recuperar vendas perdidas, lembrando automaticamente os clientes de concluírem suas compras.

E é sabido que as pessoas se sentem atraídas por coisas diferentes e que se destacam na multidão.

Portanto, não deixe a página do seu carrinho se perder na multidão, em vez disso personalize-a para que se destaque e ajude você a conseguir mais pedidos. 

Agora a questão é como você pode obter uma página de carrinho que se destaque? Bem, existem duas maneiras de criar um design de página de carrinho Woocommerce.

1. 1. Editando os arquivos WooCommerce (requer que você saiba codificar)
2. 2. Use um plugin de arrastar e soltar

Você também pode conferir nosso blog 👉 Como adicionar um alternador de moeda ao WooCommerce

Por que editar o código para obter uma página de carrinho WooCommerce personalizada não é uma boa ideia

Embora editar o código para obter a página do carrinho desejada seja uma opção, não é recomendado para não codificadores. Como você escolheu uma plataforma pronta para usar como o WooCommerce para construir seu site, acho que não está procurando codificar nada manualmente.

Aqui estão alguns dos motivos pelos quais programadores novatos ou não codificadores devem evitar a edição do código padrão para fins de design da página do carrinho WooCommerce.

• Requer que você seja um programador especialista e conheça HTML, CSS, Javascript e PHP como um profissional.
• Se o código não for editado e otimizado de forma eficiente, seu site poderá ficar lento.
• Você precisará alterar o código toda vez que quiser alterar o tema WooCommerce
• Quando o WooCommerce apresentar uma nova atualização, você será solicitado a fazer novas alterações para tornar o código compatível com uma nova versão do WooCommerce
• Você também pode perder todo o seu código quando o WooCommerce for atualizado, se não criar um tema filho.

Além disso, se você estiver usando plataformas como WordPress e WooCommerce para evite codificar em primeiro lugar, então por que aprender a codificar apenas para editar uma página de carrinho, certo?

Sem problemas. Tenho outro processo que você pode usar para personalizar o design da página do carrinho sem precisar codificar. Nem mesmo uma única linha. Promessa!

Vamos ver como editar a página do carrinho WooCommerce sem conhecimento de codificação!

Como personalizar a página do carrinho WooCommerce usando um plug-in de arrastar e soltar

Agora você pode criar uma página de carrinho com tecnologia fácil de arrastar e soltar. Graças ao plugin WooCommerce PageBuilder ShopEngine.

ShopEngine é o melhor WooCommerce construtor com modelos pré-fabricadose widgets para criar suas páginas WooCommerce de forma personalizada e módulos com funcionalidades úteis de comércio eletrônico. Com este plugin, você obtém controle total sobre o design de suas páginas WooCommerce, incluindo a página do carrinho.

Enquanto o ShopEngine oferece um pré-fabricado Modelo de carrinho, você pode criar sua página de carrinho do zero e também personalizar o carrinho WooCommerce. Neste blog, orientarei você no processo de edição de uma página de carrinho WooCommerce para criar uma nova do zero.

Precisa de mais motivos para se convencer a usar o ShopEngine? Leia nosso blog em 11 razões para escolher ShopEngine

Etapa #1: Instale Elementor e ShopEngine

Para iniciar o processo de personalização da página do carrinho no WooCommerce, você precisará de dois plug-ins

1. Elementor
2. ShopEngine 

Como ShopEngine é um construtor de páginas WooCommerce para Elementor e requer Elementor, certifique-se de instalar Elementor primeiro. 

Etapa #2: Crie um modelo de página de carrinho

Depois de instalar os dois plug-ins, crie um modelo de carrinho. Para criar um modelo de página de carrinho:

• Vá para: Painel => ShopEngine => Modelo de Construtores
• Clique sobre Adicionar novo para abrir a janela de configurações do modelo
• Dar uma Nome do modelo da sua preferência
• Escolher Digite como carrinho no menu suspenso
• Ligar a opção Definir padrão para substituir qualquer página de carrinho existente
• Escolha a opção em branco em Projeto de amostra 
• Clique em Salvar alterações atualizar

Observação: Para obter um Modelo de carrinho pronto para usar, escolha a opção “Desenho de amostra 1” ao criar o modelo. Você também pode editar cada elemento desse modelo predefinido. Eu escolhi em branco porque vou criar um do zero

Etapa #3: Escolha um layout/estrutura

Agora é hora de escolher um layout. Para começar 

• Vá para ShopEngine => Módulo Construtores
• Passe o mouse sobre o modelo do carrinho da lista
• Clique em Editar com Elementor

• Assim que o Editor Elementor abrir Clique na seção Adicionar nova seção (+) ícone 
• Agora escolha o estrutura/layout você gosta

Etapa #4: Projete a página do carrinho usando widgets do ShopEngine

ShopEngine fornece cinco widgets exclusivamente para projetar um WooCommerce Modelo de carrinho. Junto com os widgets do modelo de carrinho, você também pode usar o Formulário de cupom widget e mais de cinco widgets gerais para construir sua página de carrinho.

Para este blog, vou usar os seguintes widgets:

• Mesa de carrinho: O widget do carrinho exibe todos os produtos do carrinho em formato de tabela com preço, quantidade e subtotal. Os clientes podem atualizar a quantidade do produto e também limpar o carrinho com um clique.
• Total do carrinho: Este widget mostra todos os métodos de envio disponíveis e o total total do pedido.
• Voltar para a loja: Este widget fornece um botão com um link que leva você de volta à página da loja.
• Formulário de cupom de finalização de compra: Os clientes podem usar seu cupom de desconto usando este widget.
• Produto da oferta: Este widget permite que você exiba seus produtos em promoção na página do carrinho, também com uma contagem regressiva que exibe o período de programação de venda. Este é um widget geral do ShopEngine.
• Venda cruzada: A venda cruzada exibe todos os produtos de venda cruzada de forma atraente na página do carrinho.

Primeiro, você precisa ligue os widgets você deseja usar na página do carrinho. Para ligar  

• Vá para Painel de administração => ShopEngine => Widgets. 
• Role e pesquise o widget que deseja usar
• Habilitar os widgets que você deseja usar
• Clique em Salvar alterações no topo da página

Agora é hora de arrastar e soltar os widgets no seu layout. Volte para o modo editor da página do carrinho:

• Procurar para o widget
• Arraste e solte os widgets (um por um)

Observação: Você pode ocultar o botão Continuar comprando e o botão Ocultar tudo.

Como o ShopEngine é totalmente compatível com Elementor, você pode usar vários layouts na mesma página. Para a próxima parte, vamos usar um layout diferente. Para fazer isso, vou adicionar uma nova seção com uma estrutura diferente e arrastar e soltar Cross-sell e Widgets de produtos de ofertas.

Observação: Você precisa adicionar produtos de venda cruzada e definir produtos à venda com programações do painel de administração nas configurações do produto para vendas cruzadas e ofertas aparecerem no front-end.

Os produtos Cross-Sell e Deal oferecem diferentes configurações que você pode personalizar. Assim, após arrastar e soltar o widget, personalize as configurações de acordo com sua preferência.

Com o widget de venda cruzada, você obtém opções como ativar/desativar Ativar controle deslizante, mostrar/ocultar venda em Flash, preço de venda, botão de carrinho e o número de produtos a serem exibidos nas configurações de conteúdo. Para controles deslizantes, você tem opções como Slides Per View, Loop e Autoplay. Velocidade do slide, etc. Além disso, você também tem as opções Ordenar por e Ordenar na guia Avançado.

Os produtos Deal fornecem a você configurações de conteúdo como Ordem, Ordenar por, Data, Mostrar Produto, Coluna, Intervalo de Coluna e Intervalo de Linha. Você também obtém outras configurações que incluem Ativar venda, Selo, Selo de venda, Venda, Limite de palavras de título, Selo de porcentagem, Relógio de contagem regressiva e Dias.

Etapa #5: Personalizar os parâmetros de estilo da página Woocommerce Cart

Não apenas estrutura, com ShopEngine você também obtém controle total sobre o estilo da página do seu carrinho.

Para alterar os parâmetros de estilo dos widgets do ShopEngine, passe o mouse sobre o widget que deseja editar para encontrar a opção Editar no canto superior direito. Clique nessa opção para encontrar todas as configurações do carrinho Woocommerce para conteúdo e estilos no painel Elementor colocado no lado esquerdo.

Vamos dar uma olhada nas configurações de estilo que você pode personalizar para cada um dos widgets usados neste blog:

Mesa do carrinho: 

Você pode alterar as configurações de estilo do cabeçalho da tabela, corpo da tabela, imagem do produto e quantidade. Rodapé da tabela e fonte global. Para mais detalhes, você pode conferir nosso documentação na tabela Carrinho.

Voltar para a loja:

Você altera o alinhamento do botão, a tipografia, a cor da borda, o raio da borda e a sombra da caixa. Para mais detalhes, você pode conferir nosso documentação sobre o widget Return To Shop

Formulário de cupom:

Para o formulário de cupom, você obterá uma configuração de estilo para informações, descrição, formulário de cupom, botão de aplicação e fonte global. Você pode conferir as opções de estilo em detalhes em nosso documentação no formulário de cupom.

Total do carrinho:

Para o widget Total do carrinho, você tem muitas opções de estilo para alterar o estilo da tabela, entrada, botão de atualização de checkout e fonte global. Para configurações de estilo de carrinho WooCommerce mais detalhadas, você pode conferir nosso documentação no total do carrinho.

Venda cruzada: 

Para o widget de venda cruzada, você obtém várias opções de estilo que incluem estilos para itens, vendas flash, imagem, corrida de título, preço, Adicionar ao carrinho, estilo deslizante e fonte global. Para mais detalhes sobre Cross, estilo Sale confira a documentação.

Produtos da oferta:

Você obtém diferentes opções de estilo para invólucro do produto, imagem do produto, emblema do produto, relógio de contagem regressiva, estilo de conteúdo, barra de estoque e progresso e fonte global. Para saber mais detalhes sobre as opções de estilo confira nossa documentação no widget Deal Product.

Etapa #6: Atualizar e visualizar a página personalizada do carrinho WooCommerce

Depois de alterar os estilos, clique em Atualizar para salvar as alterações e clique em Visualização para ver as mudanças.

Se você seguiu o layout e as configurações mencionados neste blog, você deve criar uma página de carrinho personalizada no WooCommerce usando ShopEngine como a mostrada abaixo:

Bônus: dicas para aumentar as vendas da sua loja de comércio eletrônico usando módulos ShopEngine

Agora você sabe como construir e personalizar uma página de carrinho no woocommerce. ShopEngine, além do construtor de modelo de página de carrinho WooCommerce, fornece módulos úteis com importantes funcionalidades de comércio eletrônico que podem impulsionar as vendas da sua loja online. Os módulos do ShopEngine incluem:

• Olhada rápida
• Amostras de variação
• Lista de Desejos
• Comparação de Produto

Tenho certeza de que sendo proprietário de uma loja WooCommerce, você sabe como essas funcionalidades são importantes para tornar a experiência de compra online uma boa experiência. Se falarmos sobre o modelo de carrinho, usando o Olhada rápida botão e o Lista de Desejos botão na venda cruzada proporcionará aos seus clientes uma melhor experiência de compra. E isso aumenta a chance de seus clientes comprarem mais produtos.

Com o Quick View, os clientes podem conferir facilmente as informações completas de qualquer produto com apenas um clique. Da mesma forma, com apenas um clique, os usuários podem adicionar o produto à sua lista de desejos usando o botão do módulo de lista de desejos para finalizar a compra mais tarde. Ambas as funções podem desempenhar um papel significativo no aumento das vendas de produtos.

Portanto, não basta personalizar a página do seu carrinho, use os módulos do ShopEngine para proporcionar aos seus clientes uma ótima experiência de compra e aumentar as vendas da sua loja.

Blogs bônus:
✅ Como personalizar a página da categoria WooCommerce sem codificação
✅ Como personalizar a página Minha conta do WooCommerce usando ShopEngine 
✅ Como personalizar a página da loja WooCommerce usando ShopEngine 
✅ Como personalizar a página do produto WooCommerce usando ShopEngine
✅ Como personalizar a página de checkout do WooCommerce usando ShopEngine
✅ Mais de 9 plug-ins úteis e melhores de carrinho de compras para WordPress e WooCommerce

Por que atualizar para o ShopEngine Pro?

Bem, honestamente, o ShopeEngine fornece recursos suficientes para tornar sua loja online boa. Mas por que você deveria se contentar com o bem quando pode obter o melhor, certo?

ShopEngine Pro oferece uma grande quantidade de recursos que farão das compras online em sua loja de comércio eletrônico a melhor experiência de compra para seus clientes. Além de personalizar as páginas do carrinho de woocommerce, você pode acessar Mais de 20 módulos que incluem Contagem regressiva de venda relâmpago, Distintivos, Notificação de vendas, Check-out rápido, Pagamento parietal, Trocador de moeda, e muitos mais.

Não apenas a satisfação do cliente, os recursos do ShopEngine são projetados para tornar o gerenciamento da loja online muito fácil também com módulos como Pedido antecipado, Pedido pendente, Campo de checkout adicional, e muitos mais.

Não esquecer 16+ pré-fabricados modelos com controle total de personalização WooCommerce e Mais de 70 widgets avançados para criar todos os modelos WooCommerce do zero, se desejar.

Quando se trata da página do carrinho, o ShopEngine também permite que você crie uma página de carrinho personalizada WooCommerce para sua loja online.

Um plugin com tantos recursos, modelos pré-fabricados e módulos que também por um preço bem razoável você certamente experimentará, certo?

Obtenha sua versão do ShopEngine hoje e nunca mais se preocupe em como personalizar o WooCommerce novamente!

Palavras Finais

Parabéns! Você redesenhou com sucesso sua página de carrinho personalizado WooCommerce. Não foi tão fácil? 

Bem, é isso que o ShopEngine faz, agora você sabe como personalizar uma página de carrinho WooCommerce sem codificação.

Portanto, não limite sua loja online apenas aos estilos padrão, redesenhe todo o seu site WooCommerce e use os módulos para tornar seu negócio online mais bem-sucedido do que nunca. 

Então, qual página do WooCommerce você vai personalizar a seguir? Não se esqueça de compartilhar sua experiência de uso do ShopEngine.