Últimas notícias da SeedProd

Tutoriais, dicas e recursos do WordPress para ajudar a expandir seus negócios

Como criar uma página de carrinho de compras personalizada do WooCommerce (sem código)

Como criar uma página de carrinho de compras personalizada do WooCommerce (sem código) 

Escrito por: imagem do autor Stacey Corrin
imagem do autor Stacey Corrin
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.
     Avaliado por: Turner John
imagem do revisor Turner John
John Turner é o cofundador da SeedProd. Ele tem mais de 20 anos de experiência em negócios e desenvolvimento e seus plug-ins foram baixados mais de 25 milhões de vezes.

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.

SeedProd, o melhor construtor de páginas do WordPress

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.

Verifique sua chave de licença do seedprod

Você pode encontrar a chave de licença do SeedProd no painel de controle da sua conta no site do SeedProd.

Copie sua chave de licença 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.

Adicionar uma nova página de destino no WordPress

A partir daí, você pode escolher um modelo de página de carrinho para usar como estrutura para seu design.

Modelos de página de destino do SeedProd

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.

Modelo de página de lançamento em branco seedprod

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.

personalizar o nome da página do carrinho de compras do woocommerce

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:

  1. À esquerda, há blocos e seções para personalizar seu design
  2. À 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.

Construtor de páginas SeedProd

Vamos dar uma olhada em alguns dos elementos essenciais que você pode incluir na sua página de carrinho do WooCommerce.

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.

Adicionar uma nova seção de página

Em seguida, escolha o bloco "Image" (Imagem) e arraste-o para a nova seção à direita.

Selecione o bloco de imagens SeedProd

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.

Personalizar o logotipo da página do carrinho de compras do woocommerce

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.

Adicionar uma seção de layout de 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.

Adicione o bloco do carrinho de compras do woocommerce à sua página

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.

Bloco de carrinho do woocommerce da Cutomize

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.

Adicione o bloco de depoimentos à sua página de carrinho

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.

Personalize os depoimentos da página do carrinho de compras do woocommerce

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.

Adicione o bloco de classificação por estrelas para prova social

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.

Adicione um cronômetro de contagem regressiva ao carrinho de compras do woocommerce

Em seguida, na guia Advanced settings (Configurações avançadas), você pode personalizar as cores para combinar com o restante do carrinho.

Personalize o cronômetro de contagem regressiva da página do carrinho de compras do woocommerce

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.

Adicione o bloco de título à sua página de carrinho de compras do woocommerce

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:

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.

Venda cruzada de produtos na sua página personalizada do carrinho de compras do woocommerce

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).

Publique sua página personalizada do carrinho de compras do woocommerce

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).

habilite sua página personalizada do carrinho de compras do woocommerce nas configurações avançadas do WooCommerce

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.

Exemplo de página de carrinho de compras 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.

avatar do autor
Stacey Corrin Escritor
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Recomendamos apenas produtos que acreditamos que agregarão valor aos nossos leitores.