Deseja criar uma página de carrinho de compras personalizada do WooCommerce?
Por padrão, a página do carrinho do WooCommerce não é otimizada para conversões. Mas se você personalizar o layout e o design do carrinho, poderá melhorar a experiência do usuário e gerar mais vendas.
Neste artigo, mostraremos como criar uma página de carrinho de compras personalizada do WooCommerce sem escrever uma única linha de código.
Por que criar uma página de carrinho de compras personalizada do WooCommerce?
Você sabia que 7 em cada 10 clientes abandonam seu carrinho de compras e nunca mais voltam? Isso é verdade. O abandono do carrinho de compras é responsável por US$ 4,6 trilhões em perda de receita de comércio eletrônico a cada ano.
Com isso em mente, criar um carrinho e uma página de checkout personalizados do WooCommerce permite que você gere mais vendas sem aumentar o tráfego. Basicamente, você está interrompendo o tráfego existente e fazendo com que eles repensem a decisão de sair do seu site.
Além disso, quando os compradores têm itens em seus carrinhos, eles estão indo para o checkout para concluir a compra. Portanto, seu carrinho de compras deve fazer todo o possível para concretizar a venda.
Algumas táticas inteligentes para personalizar seu carrinho e o fluxo de checkout podem incluir:
- Ofereça frete grátis
- Aplicar um cupom ou desconto
- Alterar o tamanho dos totais do carrinho
- Incluir extras gratuitos
- Adicionar um botão de atualização do carrinho
Em geral, o objetivo principal da criação de uma página de carrinho personalizada do WooCommerce deve ser melhorar as conversões e as vendas.
Então, como você personaliza as páginas de carrinho do WooCommerce? Vamos começar e descobrir.
Como criar uma página de carrinho de compras personalizada do WooCommerce
Muitas pessoas usam plug-ins de carrinho de compras para otimizar as páginas do carrinho no WooCommerce. Mas achamos que a maneira mais fácil de personalizar seu carrinho é com um construtor de páginas do tipo arrastar e soltar, como o SeedProd.
O SeedProd é o melhor construtor de páginas do WordPress com suporte para sites do WooCommerce. Você pode usar esse plugin para criar uma página de carrinho de compras personalizada do WooCommerce sem escrever código.
O SeedProd oferece mais de 150 modelos de página de destino totalmente responsivos para você começar rapidamente. E com o editor visual, você pode personalizar sua página e ver as alterações em tempo real.
Além disso, com vários blocos e seções, você pode fazer com que a página do carrinho tenha a aparência exata que deseja sem precisar contratar um desenvolvedor.
Atualização: Agora você pode criar um tema personalizado do WooCommerce com o SeedProd, permitindo que você crie qualquer página do WooCommerce facilmente sem código.
Com isso em mente, siga estas etapas para criar uma página de carrinho de compras personalizada do WooCommerce com o SeedProd.
Etapa 1. Instalar e ativar o SeedProd
A primeira etapa é fazer o download de uma cópia do plug-in de página de destino do WordPress SeedProd.
Em seguida, instale e ative o plug-in em seu site do WordPress. Para obter ajuda com essa etapa, consulte este guia detalhado sobre a instalação de um plug-in do WordPress.
Observação: há uma versão gratuita do SeedProd que você pode usar. Mas, para este tutorial, usaremos a versão Elite para obter o suporte integrado ao WooCommerce de que precisamos.
Após ativar o SeedProd em seu site WordPress, acesse SeedProd " Settings e insira a chave de licença do produto.
Você pode encontrar a chave de licença do SeedProd no painel de controle da sua conta no site do SeedProd.
Etapa 2. Criar uma nova página de carrinho do WooCommerce
Depois de ativar sua chave de licença, vá para SeedProd " Pages e clique no botão "Add New Landing Page" para criar sua página de carrinho.
A partir daí, você pode escolher um modelo de página de carrinho para usar como estrutura para seu design.
O SeedProd oferece centenas de modelos compatíveis com dispositivos móveis para vários setores, muitos dos quais você pode usar como modelos do WooCommerce. Portanto, quando você encontrar um modelo de que goste, passe o cursor sobre ele e clique no ícone "Checkmark" para iniciá-lo.
Para este guia, usaremos o "Modelo em branco". Esse modelo permite que você comece do zero e adicione apenas as seções e os blocos desejados.
Depois de escolher o modelo, uma janela pop-up será aberta para adicionar um nome e um URL à sua página. Em seguida, você pode clicar no botão "Save and Start Editing the Page" (Salvar e começar a editar a página) para abrir o modelo no editor visual do SeedProd.
Etapa 3. Personalizar o conteúdo da página do carrinho de compras do WooCommerce
O construtor de páginas de arrastar e soltar do SeedProd tem um layout distinto de duas colunas que facilita o uso:
- À esquerda, há blocos e seções para personalizar seu design
- À direita, há uma visualização ao vivo de sua página
Adicionar conteúdo à página do carrinho é tão simples quanto arrastar um bloco da esquerda para a visualização à direita.
Vamos dar uma olhada em alguns dos elementos essenciais que você pode incluir na sua página de carrinho do WooCommerce.
Adição de um logotipo
Para adicionar um logotipo à página do carrinho, escolha um layout de seção que abrigue os elementos da página, como a seção padrão.
Em seguida, escolha o bloco "Image" (Imagem) e arraste-o para a nova seção à direita.
Clicar no bloco de imagens abre o painel de configurações de conteúdo, onde é possível carregar um logotipo do seu computador ou da biblioteca de mídia do WordPress.
A partir daí, você pode adicionar um link para sua página inicial, redimensionar o logotipo e alterar o alinhamento.
Adição de um carrinho de compras do WooCommerce
Agora vamos adicionar seu carrinho de compras WooCommerce ao design. Para fazer isso, adicione uma nova seção ao design e escolha o layout da barra lateral de conteúdo.
Esse layout permite que você adicione seu carrinho na coluna maior e deixa espaço na coluna menor para avaliações, depoimentos e outras informações importantes.
Para adicionar o carrinho do WooCommerce à página, role para baixo até a seção de blocos do WooCommerce e arraste o bloco "Cart" para a nova seção.
Clicar no ícone de configurações do carrinho mostra um painel com configurações de personalização de cor, fonte e tamanho:
- Cabeçalhos
- Botões
- Campos
- Alerta
- Carrinho
Por exemplo, alteramos as cores dos botões para que se alinhassem melhor com a marca e o logotipo da nossa loja.
Adição de resenhas e depoimentos
Lembra-se da segunda coluna? Para este guia, usaremos essa coluna para mostrar depoimentos de clientes e classificações por estrelas.
Uma prova social como essa pode incentivar os compradores que estão prestes a finalizar a compra a concluir a venda. Afinal, as avaliações positivas de clientes reais são muito mais convincentes do que acreditar na palavra de uma marca.
Para adicionar depoimentos à sua página de carrinho de compras do WooCommerce, localize o bloco Testimonials (Depoimentos) no cabeçalho de blocos "Advanced" (Avançado) e arraste-o para a coluna estreita à direita.
E, como todos os blocos do SeedProd, clicar nele mostra as configurações para personalizar o conteúdo do depoimento. Por exemplo, você pode adicionar uma foto de rosto personalizada e o nome do cliente, alterar o alinhamento e até mesmo adicionar várias avaliações em um carrossel de depoimentos.
Para tornar suas avaliações ainda mais convincentes, você pode arrastar o bloco de classificação por estrelas e colocá-lo sob o carrossel de depoimentos.
Adicionando escassez e urgência
Uma das melhores maneiras de levar clientes em potencial ao checkout do WooCommerce é criar um senso de urgência. Portanto, se os compradores não agirem agora, eles podem perder uma oferta interessante.
A maneira mais fácil de adicionar escassez à sua página de carrinho do WooCommerce é com um cronômetro de escassez ou um relógio de contagem regressiva. E o SeedProd tem essa opção incorporada.
Tudo o que você precisa fazer é selecionar o bloco "Countdown Timer" na seção de blocos "Advanced" e arrastá-lo para a parte superior do carrinho. Em seguida, selecione a opção "Visitor Timer" para que o cronômetro seja atualizado para cada visitante.
Em seguida, na guia Advanced settings (Configurações avançadas), você pode personalizar as cores para combinar com o restante do carrinho.
Agora vamos adicionar um título informando às pessoas que elas têm um tempo definido até que o carrinho expire. Para fazer isso, arraste o bloco "Headline" (Título) e digite o texto.
Venda cruzada de produtos do WooCommerce
Sua página de carrinho do WooCommerce é um excelente lugar para promover e recomendar outros produtos ou serviços. Dessa forma, você pode atrair os compradores antes de finalizar a compra com produtos relevantes que eles podem gostar.
E a boa notícia é que o SeedProd oferece várias grades de produtos diferentes que permitem que você exiba os produtos em qualquer página. Para encontrá-los, vá até a seção de blocos "WooCommerce" e escolha um deles:
- Produtos recentes
- Produtos em promoção
- Produtos mais vendidos
- Produtos em destaque
- Produtos com as melhores classificações
Por exemplo, você pode arrastar o bloco "Sale Products" e adicioná-lo logo abaixo do carrinho do WooCommerce. Dessa forma, os compradores têm a chance de adicioná-los aos seus carrinhos antes de finalizar a compra.
Etapa 4. Publique sua página personalizada do carrinho de compras do WooCommerce
Depois de fazer alterações na página do carrinho, é hora de publicá-la e torná-la ativa em sua loja WooCommerce. Para fazer isso, clique na seta suspensa ao lado do botão verde Save (Salvar) e selecione Publish (Publicar).
Em seguida, a tarefa final é ajustar o URL do carrinho nas configurações do plug-in WooCommerce. Portanto, navegue até WooCommerce " Settings e clique na guia Advanced (Avançado).
Em seguida, ao lado do título "Cart Page" (Página do carrinho), selecione a nova página do carrinho que você criou com o SeedProd. Lembre-se de clicar no botão Save Changes (Salvar alterações ) na parte inferior da tela.
Agora, quando os compradores clicarem no link "View Cart" (Exibir carrinho) em seu site, eles verão sua nova página de carrinho personalizada do WooCommerce.
Aí está!
Esperamos que este artigo tenha ajudado você a criar uma página de carrinho de compras personalizada do WooCommerce sem escrever nenhum código. Se quiser rastrear suas conversões de carrinho do WooCommerce, consulte nossa postagem sobre como configurar o rastreamento de conversões do WooCommerce e este guia sobre como corrigir o problema do carrinho de visualização do WooCommerce que não funciona.
Obrigado pela leitura. Se você gostou deste artigo, siga-nos no YouTube, no Twitter e no Facebook para obter mais conteúdo útil para expandir seus negócios.