A página de carrinho padrão do WooCommerce funciona, mas é básica e muitas vezes não combina com seu estilo.
Durante nossos testes de vários construtores de páginas, descobrimos que o SeedProd torna surpreendentemente fácil criar uma página de carrinho personalizada sem tocar em uma única linha de código.
Exploramos os recursos do WooCommerce do SeedProd e descobrimos que personalizar a página de carrinho é mais simples e poderoso do que esperávamos. O que antes exigia um desenvolvedor agora pode ser feito com apenas alguns cliques usando a interface de arrastar e soltar.
Neste guia, mostraremos exatamente como criar uma página de carrinho personalizada do WooCommerce sem nenhum código.
💡Resposta Rápida: Crie uma Página de Carrinho Personalizada em 6 Passos
Antes de detalharmos, aqui está uma visão geral rápida das principais etapas que você seguirá:
- Instale e ative o plugin SeedProd Pro.
- Crie uma nova landing page e escolha um modelo inicial.
- Desenhe o layout básico da página com um cabeçalho e colunas.
- Arraste e solte o bloco principal 'Carrinho' do WooCommerce em sua página.
- Adicione elementos de conversão como depoimentos ou um cronômetro.
- Publique a página e a defina como sua página de carrinho nas configurações do WooCommerce.
Por que Criar uma Página de Carrinho Personalizada do WooCommerce no WordPress?
WooCommerce vem com uma página de carrinho integrada. Basta instalar e ativar este plugin, e sua loja online começará a usar a página de carrinho padrão automaticamente.
Quando seus visitantes têm itens em seus carrinhos, eles estão muito perto de fazer uma compra. No entanto, pesquisas mostram que quase sete em cada dez clientes abandonam seus carrinhos e nunca mais voltam.
Com isso em mente, sua página de carrinho deve fazer tudo o que for possível para garantir a venda.
Ao substituir o design padrão por uma página de carrinho personalizada, você pode frequentemente melhorar as taxas de conversão em sua loja online.
Mesmo simplesmente personalizando a página com sua própria marca e logotipo personalizado pode melhorar a experiência do cliente e aumentar suas taxas de conversão.
Com isso em mente, compartilharemos como você pode personalizar sua página de carrinho do WooCommerce sem código. Aqui está uma visão geral rápida de todas as coisas que abordaremos nas seguintes seções:
- How to Create a Custom WooCommerce Cart Page in WordPress (Step-by-Step)
- Tutorial em Vídeo
- Bonus Tip: How to Further Improve WooCommerce Cart Page Conversions
Vamos mergulhar de cabeça!
Como Criar uma Página de Carrinho Personalizada do WooCommerce no WordPress
A maneira mais fácil de criar páginas personalizadas para sua loja WooCommerce é usando SeedProd.
É o melhor construtor de páginas WordPress e vem com mais de 300 modelos projetados profissionalmente. Estes incluem modelos de eCommerce para criar páginas de vendas e páginas para coletar cadastros de e-mail.
Melhor ainda, o SeedProd oferece suporte completo ao WooCommerce e inclui blocos especiais do WooCommerce que permitem exibir seus produtos mais vendidos, itens mais populares, últimas promoções e muito mais.
Várias de nossas marcas parceiras construíram seus sites inteiros usando o plugin e receberam ótimos feedbacks de seus usuários sobre os novos designs. Para saber mais, veja nossa análise do SeedProd.
Etapa 1: Instale e Ative o SeedProd Pro
Agora, a primeira coisa que você precisa fazer é instalar e ativar o plugin. Para mais detalhes, você pode ver nosso guia passo a passo sobre como instalar um plugin do WordPress.
Observação: Existe uma versão gratuita do SeedProd, mas para este guia, usaremos a versão Pro porque ela possui os blocos WooCommerce integrados de que precisamos. Ela também se integra a todos os serviços de marketing por e-mail que você já pode estar usando para obter mais vendas e conversões.
Após a ativação, vamos navegar para SeedProd » Configurações e inserir sua chave de licença.
Você pode encontrar essas informações em sua conta no site da SeedProd. Após inserir a licença, prossiga e clique no botão ‘Verificar Chave’.
Etapa 2: Crie uma Nova Landing Page
Depois de fazer isso, você vai querer ir para SeedProd » Landing Pages e clicar no botão ‘Adicionar Nova Landing Page’.
Depois disso, você precisa escolher um modelo de página de carrinho.
Os modelos do SeedProd são organizados em diferentes tipos de campanha, como em breve e páginas 404. Você pode clicar nas abas na parte superior da tela para filtrar os modelos com base no tipo de campanha.
Quando encontrar um modelo que deseja usar, você vai querer passar o mouse sobre ele e clicar no ícone de ‘Checkmark’.
Para este tutorial, vamos usar o ‘Modelo em Branco’, pois ele nos permite adicionar apenas as seções que queremos.
Na próxima tela, você nomeará sua página de carrinho.
O SeedProd criará automaticamente um URL com base no título da página, mas você pode alterar este URL para o que quiser.
Quando estiver satisfeito com as informações que inseriu, vamos clicar no botão ‘Salvar e Começar a Editar a Página’.
Etapa 3: Desenhe o Layout da Página de Carrinho
Isso carregará o construtor de páginas do SeedProd. É um editor simples de arrastar e soltar que mostra uma prévia ao vivo da sua página de carrinho personalizada à direita e algumas configurações à esquerda.
💡 Dica de Especialista: Se projetar uma página de carrinho parecer muito trabalho, você pode usar o Construtor de IA do SeedProd para facilitar. Tudo o que você precisa fazer é descrever o tipo de página de carrinho que deseja em poucas palavras, e a IA gerará uma página de carrinho personalizada para você.
Além disso, você pode usar os recursos de IA do plugin para gerar automaticamente conteúdo e imagens, economizando ainda mais tempo.
Para começar, confira nosso tutorial sobre como fazer um site WordPress com IA.
Para começar, adicionaremos uma imagem no topo da página. Recomendamos usar uma imagem que se pareça com o cabeçalho normal da sua loja, pois isso manterá sua marca no lugar e consistente.
Queremos que a imagem do cabeçalho preencha toda a largura da página do carrinho, então vamos clicar no primeiro layout na caixa ‘Escolha seu layout’.
Isso criará um layout de largura total.
Agora, selecione o bloco ‘Imagem’ no menu esquerdo e arraste-o para o layout.
Para fazer o upload da sua imagem, clique para selecionar o bloco ‘Imagem’.
No menu esquerdo, vamos clicar em ‘Usar Sua Própria Imagem’ e selecionar uma imagem da biblioteca de mídia ou fazer o upload de um novo arquivo do seu computador.
As configurações à esquerda permitem que você personalize ainda mais a imagem. Por exemplo, você pode adicionar texto alternativo da imagem e alterar o tamanho da imagem.
Quando você estiver satisfeito com a aparência do cabeçalho, pode clicar no ícone ‘Adicionar Colunas’ na seção ‘Arraste um novo bloco aqui’.
Agora você pode escolher o layout que deseja usar para a área principal da página do carrinho.
Vá em frente e clique no layout de conteúdo e barra lateral.
Isso permite que você crie uma seção para seu carrinho e uma área onde você pode exibir depoimentos de clientes para aumentar as conversões.
Etapa 4: Adicione Blocos do WooCommerce para Carrinho
No menu esquerdo, você vai querer rolar até a seção ‘WooCommerce’. Aqui, vamos encontrar o bloco ‘Carrinho’ e arrastá-lo para o seu layout.
Depois disso, você pode personalizar todas as partes do carrinho usando o menu esquerdo.
Isso inclui alterar as fontes, cores, botões e muito mais.
Quando estiver satisfeito com a aparência da área do carrinho, é hora de adicionar um bloco de depoimentos.
Esta é uma forma de prova social que ajuda os compradores a se sentirem mais confiantes em sua decisão, mostrando que outras pessoas tiveram uma experiência positiva com seus produtos.
Simplesmente encontre o bloco 'Depoimentos' e arraste-o para o seu layout.
Agora você pode alterar a aparência dos depoimentos em sua loja online.
Por exemplo, no menu do lado esquerdo, você verá configurações para alterar a cor da bolha de comentários, alterar o alinhamento e adicionar mais depoimentos de clientes.
Outra ótima ideia é mostrar uma classificação por estrelas abaixo do seu depoimento.
Para fazer isso, basta encontrar o bloco ’Avaliação por estrelas’ e arrastá-lo para baixo do bloco de depoimentos.
Etapa 5: Adicione Elementos que Aumentam a Conversão
Escassez pode incentivar seus clientes a fazer uma compra agora, em vez de esperar e arriscar perder a oportunidade. Com isso em mente, você pode querer adicionar um cronômetro que contará os minutos até que o carrinho do visitante expire.
Para criar essa sensação de urgência, encontre o bloco 'Countdown' e arraste-o para o topo do seu carrinho.
Queremos mostrar um cronômetro diferente para cada visitante, então você vai querer abrir o menu suspenso 'Countdown Type' e selecionar 'Visitor Timer (Evergreen)'.
Isso garante que a contagem regressiva comece do zero para cada pessoa, criando um senso de urgência genuíno e pessoal.
Por padrão, o cronômetro começa em 30 minutos, mas você pode alterar isso digitando um novo número na seção 'Set Timer For'.
Queremos que os compradores saibam que seus carrinhos expirarão quando o cronômetro atingir 0, então vamos adicionar um bloco 'Headline' acima dele.
Você pode então digitar o texto que deseja mostrar aos compradores.
Você pode incentivar as pessoas a adicionar mais itens ao carrinho de compras criando uma seção de produtos populares.
Para promover os maiores vendedores da sua loja, basta arrastar e soltar um bloco 'Best Selling Products' no seu layout.
Por padrão, este bloco mostrará seus produtos mais populares, mas você pode usar as configurações para mostrar produtos em promoção, seus produtos mais recentes e muito mais.
Para fazer isso, basta abrir o menu suspenso 'Type' e escolher uma nova opção.
Para mais detalhes, consulte nosso guia sobre como exibir produtos populares no WooCommerce.
Etapa 6: Publique Sua Página de Carrinho Personalizada
Quando estiver satisfeito com a aparência da página do carrinho, é hora de publicá-la. Clique na seta suspensa ao lado de 'Salvar' e selecione a opção 'Publicar'.
Em seguida, você precisará alterar o URL do carrinho nas configurações do WooCommerce.
Simplesmente vá para WooCommerce » Configurações e, em seguida, mude para a aba 'Avançado'.
Nesta aba, você vai querer abrir o menu suspenso 'Página do carrinho' e começar a digitar o URL da sua página personalizada.
Quando a página correta aparecer, basta clicar nela para selecioná-la.
Tutorial em Vídeo
Se você aprende melhor visualmente, pode conferir nosso tutorial em vídeo sobre como criar uma página de carrinho personalizada do WooCommerce:
Dica Bônus: Como Melhorar Ainda Mais as Conversões da Página de Carrinho do WooCommerce
Depois de criar uma página de carrinho personalizada do WooCommerce, há muitas maneiras de reduzir o abandono de carrinho e obter mais vendas. Isso ajuda você a ganhar mais dinheiro com seu tráfego existente.
Aqui estão algumas maneiras simples de fazer isso.
1. Rastreie suas conversões
O abandono de carrinho é um grande problema para todas as lojas online. Na verdade, pesquisas mostram que quase 70% das pessoas que adicionam itens ao carrinho não compram. (Fonte: Estatísticas de abandono de carrinho)
O rastreamento de conversões ajuda você a entender o que está funcionando em sua página de carrinho e o que não está. Você pode então usar o SeedProd para ajustar sua página de carrinho personalizada para que mais clientes concluam suas compras.
A maneira mais fácil de rastrear conversões do WooCommerce é com o MonsterInsights, o melhor plugin do Google Analytics para WordPress.
Ele vem com um complemento de eCommerce que permite o rastreamento de conversões com apenas alguns cliques, para que você possa ver seus dados sem escrever nenhum código ou sair do seu painel.
Para rastrear as conversões do seu carrinho do WooCommerce, consulte nosso guia passo a passo sobre como configurar o rastreamento de conversões do WooCommerce.
2. Reduza o Abandono de Carrinho com Pop-ups Temporizados no WooCommerce
Você também pode reduzir o abandono de carrinho com um pop-up com temporizador. A maneira mais fácil e eficaz de fazer isso é com o OptinMonster, o melhor plugin de pop-up para WordPress para geração de leads e otimização de conversão.
Sua tecnologia exclusiva Exit-Intent® exibe pop-ups exatamente quando um comprador está prestes a sair da página do carrinho. Você pode até usar este software para oferecer aos compradores um código de desconto especial se eles concluírem a compra agora.
O OptinMonster possui um poderoso conjunto de recursos de segmentação e personalização.
Por exemplo, se você já ofereceu um cupom ao comprador, pode mostrar um popup educativo em vez disso. Por exemplo, você pode incentivá-los a entrar em contato e fazer qualquer pergunta que possam ter sobre seus produtos.
O OptinMonster permite que você crie diferentes campanhas, incluindo popups, banners de boas-vindas em tela cheia, barras flutuantes, caixas de rolagem e slide-ins.
Por exemplo, se um cliente adiciona um item ao carrinho e não conclui a compra, você pode oferecer a ele um cupom para esse produto exato usando um slide-in.
Para mais detalhes, veja nosso guia sobre como criar um popup no WooCommerce para aumentar as vendas.
3. Aumente as Vendas com Notificações de Atividade Social no WooCommerce
As notificações de atividade social mostram todos os produtos que os compradores estão comprando em tempo real. Isso pode tranquilizar os compradores de que você é um site popular e confiável, além de usar o FOMO (medo de ficar de fora) para incentivá-los a comprar.
A maneira mais simples de adicionar notificações de prova social à sua página de carrinho é com o TrustPulse. É o melhor plugin de prova social para WordPress e WooCommerce e comprovadamente aumenta as conversões em até 15%.
Nossas marcas parceiras o utilizam para exibir compras ao vivo em suas lojas, o que melhorou suas taxas de conversão. Para mais detalhes sobre seus recursos, veja nossa análise do TrustPulse.
Você pode adicionar o plugin ao seu site em apenas alguns minutos e começar a exibir uma bolha de notificação toda vez que alguém compra um produto, inicia um teste gratuito e muito mais.
Para mais detalhes, veja nosso guia sobre como usar FOMO em seu site WordPress.
Esperamos que este artigo tenha ajudado você a criar uma página de carrinho WooCommerce personalizada sem escrever nenhum código. Você também pode querer ver nosso guia passo a passo sobre como personalizar a página de login do WooCommerce e nossa seleção especializada dos melhores plugins WooCommerce para sua loja.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Dennis Muthomi
This guide couldn’t have come at a better time! I’ve implemented custom cart pages across several online stores, and combining SeedProd’s customization with social proof elements has been a game-changer.
One client’s cart abandonment rate dropped by 23% after we added a clean, branded design with testimonials and the TrustPulse notifications. The countdown timer feature mentioned in the article is particularly effective – it creates just enough urgency without being pushy.
Definitely SHARING this comprehensive guide to my colleagues
Pismai Peeters
Por favor, não use a palavra 'simplesmente' em suas postagens. Se você não sabe como fazer algo e está procurando uma solução, nunca é 'simplesmente'.... Isso me deixa nervosa e me faz sentir estúpida, o que eu não sou.
WPBeginner Support
Thank you for your feedback, we will look to improve our phrasing. Everyone has their own knowledge so what can be simple to one person can be complex to another. Our goal is to try to make the steps involved as simple as possible for our users
Admin
Mrteesurez
O design e a aparência da página padrão do carrinho do WooCommerce não são atraentes na maioria dos temas, por isso é essencial aprender a estilizar ou criar uma página personalizada que esteja alinhada com o design do tema.
Isso dará a chance de eliminar elementos não essenciais da página. É bom que o Seedprod seja capaz de fazer isso. Obrigado pelo guia.