Como Adicionar Facilmente um Carrinho Lateral Deslizante no WooCommerce

Um dos maiores desafios que vemos os proprietários de lojas WooCommerce enfrentarem é o abandono de carrinho.

Os clientes navegam pelos seus produtos, adicionam itens ao carrinho e depois desaparecem quando são redirecionados para a página do carrinho. Isso acontece com mais frequência do que você imagina.

Uma maneira simples de melhorar essa experiência é adicionando um carrinho lateral deslizante.

Isso mantém os clientes na mesma página enquanto permite que eles revisem o carrinho em um pequeno painel que desliza para fora. É mais rápido, menos disruptivo e torna o processo de compra mais suave.

Vimos muitos proprietários de lojas usá-lo para melhorar o fluxo de checkout e incentivar mais vendas.

Neste guia, mostraremos como adicionar um carrinho lateral deslizante à sua loja WooCommerce usando métodos fáceis que não exigem habilidades técnicas.

Como adicionar um carrinho lateral deslizante no WooCommerce

💡 Resposta Rápida: Como Adicionar um Carrinho Lateral Deslizante

A maneira mais fácil de adicionar um carrinho lateral deslizante à sua loja WooCommerce é usando um plugin gratuito. O processo é simples e não requer nenhum código.

  1. Instale e ative o plugin gratuito Sliding WooCommerce Cart By FunnelKit.
  2. No seu painel do WordPress, navegue até FunnelKit » Carrinho.
  3. Personalize a aparência e o comportamento do carrinho usando as configurações disponíveis.
  4. Clique no botão de alternância ‘Ativar Carrinho’ na parte superior da página para tornar seu novo carrinho deslizante ativo.

Por que Adicionar um Carrinho Lateral Deslizante no WooCommerce?

Adicionar um carrinho lateral deslizante é uma das melhores maneiras de reduzir o abandono de carrinho e melhorar a experiência do cliente em sua loja WooCommerce.

Ao permitir que os compradores visualizem seu carrinho sem serem redirecionados para uma página separada, você remove atritos do processo de compra e facilita a conclusão da compra.

Um carrinho lateral deslizante é um painel que aparece, geralmente do lado direito da tela, quando um cliente adiciona um item ao seu cesto. Eles também podem abri-lo a qualquer momento clicando no ícone do carrinho.

Um exemplo de carrinho deslizante no WooCommerce

A partir deste painel, os compradores podem adicionar ou remover itens, aplicar códigos de cupom e ver seu subtotal atualizado em tempo real.

Isso os mantém na página do produto ou da loja, incentivando-os a continuar comprando ou a prosseguir diretamente para o checkout.

Com isso em mente, vamos ver como você pode adicionar um carrinho lateral deslizante no WooCommerce. Use os links rápidos abaixo para pular diretamente para o método que você deseja usar.

Vamos começar!

Método 1. Como Adicionar um Carrinho Lateral Deslizante no WooCommerce Usando um Plugin Gratuito

A maneira mais rápida e fácil de criar um carrinho lateral deslizante é usando o Sliding WooCommerce Cart By FunnelKit. Este plugin gratuito permite que você adicione um ícone de carrinho à sua loja online.

Os compradores podem clicar no botão para abrir o carrinho lateral deslizante.

Um exemplo de carrinho lateral deslizante no WooCommerce

Você pode alterar as cores, bordas, botões, mensagens do carrinho e muito mais.

Existem muitas opções, então você pode criar um carrinho que se encaixe perfeitamente em qualquer tema WordPress.

Um carrinho lateral deslizante do WooCommerce

Além disso, nossos testes revelaram que você pode exibir o botão do carrinho em todo o seu site, limitá-lo apenas a páginas do WooCommerce ou adicionar o botão a páginas e posts específicos usando um shortcode.

Passo 1: Instale e Ative o Plugin FunnelKit

Primeiro, você precisará instalar e ativar o plugin Carrinho Deslizante WooCommerce por FunnelKit. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Etapa 2: Configurar Configurações Básicas do Carrinho

Após a ativação, vá para FunnelKit » Carrinho. Você verá uma prévia do carrinho deslizante no lado direito da tela.

Visualizando o carrinho do FunnelKit

Agora você pode personalizar o carrinho para melhor atender às suas necessidades.

Para começar, você pode decidir se deseja exibir o ícone do carrinho em todo o seu site ou apenas nas páginas do WooCommerce.

Se você selecionar ‘Site Inteiro’, os compradores poderão abrir o carrinho deslizante de qualquer página, portanto, esta é uma boa opção para marketplaces online e lojas.

Adicionando um ícone de carrinho ao seu site WordPress

No entanto, seu site pode ter muito conteúdo não relacionado a e-commerce. Por exemplo, você pode ter um blog popular no WordPress, mas usar o WooCommerce para vender produtos para seus fãs.

Exibir um botão de carrinho em cada postagem de blog pode se tornar irritante. Nesse caso, você pode marcar o botão de rádio ‘Páginas do WooCommerce’.

Adicionando um ícone de carrinho às suas páginas do WooCommerce

Outra opção é ‘Nenhum’, que oculta completamente o ícone do carrinho.

Se você selecionar a opção ‘Nenhum’, então você pode adicionar o ícone a qualquer página, post ou área pronta para widget usando um shortcode. Você também pode adicionar o ícone ao seu menu de navegação.

Mostraremos como fazer isso mais adiante no post, mas você pode selecionar ‘Nenhum’ se planeja adicionar o ícone do carrinho manualmente.

Após tomar essa decisão, selecione ‘Inferior Esquerdo’ ou ‘Inferior Direito’ dependendo de onde você deseja exibir o botão do carrinho. Aqui, pode ser útil verificar como o botão ficará em sua loja online selecionando ‘Visualizar na Página’.

Visualizando o carrinho deslizante do FunnelKit

Por padrão, o plugin exibe ‘Revisar seu Carrinho’ no topo do carrinho lateral deslizante.

Você pode substituir isso por sua própria mensagem digitando no campo ‘Título do Carrinho’.

Adicionando um título ao carrinho da sua loja online

Se você não quiser exibir um título, basta deixar o campo em branco.

Por padrão, o FunnelKit exibe o ícone do carrinho antes que o comprador adicione itens à sua cesta.

Se preferir, você pode ocultar o ícone até que o visitante comece a adicionar itens. Simplesmente clique no alternador ‘Ocultar Ícone do Carrinho’ para que ele fique azul.

Ocultando o carrinho do WooCommerce

Isso é tudo que você precisa para criar um carrinho lateral deslizante básico, mas existem configurações que podem gerar ainda mais vendas. Com isso em mente, vamos dar uma olhada nos recursos mais avançados do FunnelKit.

Etapa 3: Habilitar Cupons no Carrinho Deslizante

Cupons são uma ótima maneira de obter mais vendas e fidelizar clientes.

O carrinho deslizante permite que os compradores digitem códigos de cupom diretamente. Este recurso funciona com os cupons padrão que você pode criar no WooCommerce. Ele também é compatível com plugins como o Advanced Coupons se você quiser criar ofertas mais complexas.

Adicionando códigos de cupom a um carrinho lateral deslizante no WooCommerce

Quando o cliente clicar em ‘Aplicar’, o carrinho deslizante mostrará quanto eles economizaram.

Ao mostrar aos clientes o desconto imediatamente, você pode reduzir as taxas de abandono de carrinho e incentivá-los a adicionar mais itens à sua cesta.

Como aceitar códigos de cupom em um carrinho lateral deslizante

Você pode criar esses códigos usando o recurso de cupom integrado do WooCommerce ou um plugin de código de cupom.

Para adicionar o campo de cupom, você clicará no alternador ‘Ativar Caixa de Cupom’, que o transformará de cinza (desativado) para azul (ativado).

Aceitando cupons na sua loja online

Depois disso, você pode alternar entre os layouts ‘Minimizado’ e ‘Expandido’.

Simplesmente marque a caixa correta ao lado de ‘Exibir’.

Escolhendo diferentes layouts para a página do carrinho deslizante

Minimizado ocupa menos espaço, sendo menos distrativo, mas os compradores precisarão expandir a seção de cupons antes de poderem digitar quaisquer códigos.

Na imagem a seguir, você pode ver o layout minimizado:

Um exemplo de layout minimizado para códigos de cupom e descontos

Após escolher um layout, você pode alterar o texto que o FunnelKit usa para o título da caixa de cupom, o texto de espaço reservado para desconto e o texto do botão.

Etapa 4: Personalizar o Resumo do Carrinho

O resumo do carrinho mostra aos clientes quanto custará a compra deles. Isso ajuda a reduzir as taxas de abandono de carrinho, pois não há surpresas desagradáveis no checkout.

Personalizando o resumo do carrinho do WooCommerce

Por esse motivo, recomendamos ativar o alternador ‘Mostrar Subtotal’.

No entanto, se você quiser simplificar o carrinho lateral, poderá clicar para desativar o alternador ‘Mostrar Subtotal’.

Exibindo o subtotal na página do carrinho do seu e-commerce

Você também pode mostrar quaisquer economias para as quais o cliente se qualificou, incluindo descontos de quaisquer cupons que eles aplicaram.

Desta forma, você pode usar FOMO para aumentar as conversões, especialmente se a economia for sensível ao tempo.

Por exemplo, você pode agendar cupons no WooCommerce para que o cliente só possa usá-los por um tempo limitado.

Exibindo economias e descontos no seu site de e-commerce

Se você preferir remover essas informações do carrinho lateral deslizante, poderá desativar o controle deslizante 'Exibir Economia'.

Você também pode substituir o 'Texto de Economia' e o 'Texto de Frete' por suas próprias mensagens personalizadas.

Personalizando a mensagem na tela de um carrinho lateral deslizante
Etapa 5: Personalizar o Call To Action do Carrinho

O carrinho lateral deslizante tem um botão de checkout padrão, mas você pode personalizar este botão de call-to-action para obter mais conversões. Para começar, você pode adicionar um ícone de checkout usando o controle deslizante 'Ativar Ícone do Botão'.

Configurações de checkout do FunnelKit

Isso pode ser particularmente útil se você estiver criando um site WordPress multilíngue.

Você também pode adicionar o preço do carrinho ao botão de checkout usando o controle deslizante 'Ativar Preço do Carrinho'.

Personalizando o botão de checkout do WooCommerce

Isso ajudará os compradores a acompanhar o custo do carrinho, especialmente se você removeu o subtotal da seção de resumo do carrinho.

Por padrão, o FunnelKit adiciona um link 'Continuar Comprando' na parte inferior do carrinho lateral deslizante. Você pode substituir este texto por sua própria mensagem digitando no campo 'Texto Continuar Comprando'.

Personalizando o texto 'Continuar comprando'

Depois disso, escolha se este link simplesmente fechará o painel do carrinho lateral ou redirecionará o comprador para a página da sua loja WooCommerce.

A maioria dos compradores esperará sair do carrinho deslizante, então recomendamos selecionar o botão 'Fechar Carrinho Lateral'.

Fechando o carrinho lateral deslizante no WooCommerce

Se você selecionar 'Redirecionar para a Loja', talvez queira alterar o texto 'Texto Continuar Comprando' para que fique claro o que acontecerá quando os clientes clicarem no link.

Etapa 6: Criar uma Tela de Carrinho Vazio Personalizada

É possível ocultar o botão do carrinho até que o comprador adicione pelo menos um item à sua cesta, seguindo o processo descrito acima. No entanto, se você não ocultar o botão, os clientes poderão ver uma tela de carrinho vazio às vezes.

A tela 'Esvaziar Carrinho'

Você pode alterar o título, a descrição e o texto do botão usando as configurações na seção 'Carrinho Vazio'. Normalmente, você vai querer incentivar os clientes a começar a comprar. Por exemplo, você pode falar sobre coisas que você oferece, como frete grátis ou uma garantia de devolução do dinheiro.

Você pode até dar ao comprador um código de cupom, como um desconto de compre um, leve um grátis.

Adicionando um CTA à tela 'carrinho vazio'

Você também pode escolher se o botão 'Comprar Agora' levará o cliente para a página da loja WooCommerce ou simplesmente fechará o painel lateral.

Recomendamos selecionar 'Redirecionar para a Loja', pois isso facilitará para os compradores começarem a adicionar itens aos seus carrinhos.

Habilitando 'redirecionar para a loja' no plugin FunnelKit WordPress
Etapa 7: Adicionar o Ícone do Carrinho em Qualquer Lugar do seu Site

Se você quiser mais controle sobre onde o ícone do carrinho aparece, você pode adicioná-lo a qualquer página, postagem ou área pronta para widgets usando um shortcode (um pequeno trecho de código entre colchetes que adiciona conteúdo dinâmico ao seu site).

Você também pode adicioná-lo ao menu do seu site. Esta é uma ótima opção se você selecionou 'Nenhum' nas configurações de 'Visibilidade do Ícone' seguindo o processo descrito acima.

Configurações de 'visibilidade do ícone' do FunnelKit

Se você selecionou 'Páginas WooCommerce', também há uma maneira de adicionar o ícone do carrinho a outras áreas importantes do seu site. Por exemplo, você pode adicionar o ícone à sua página inicial personalizada ou ao formulário de contato.

Para começar, você pode selecionar 'Menu do Carrinho' e, em seguida, ativar o alternador 'Ativar Menu do Carrinho'.

Habilitando o ícone do carrinho no WordPress

Agora você pode alterar a aparência do ícone selecionando um dos modelos de ícone e escolhendo se deseja mostrar a contagem de produtos e o total do carrinho como parte do ícone. Essas informações podem ajudar os visitantes a acompanhar seus carrinhos.

Você também pode alterar os tamanhos do ícone e do texto. À medida que você faz alterações, a pequena prévia será atualizada automaticamente, para que você possa experimentar diferentes configurações para ver o que fica melhor.

Como criar um ícone de carrinho personalizado para WordPress

Quando estiver satisfeito com a aparência do ícone deslizante do carrinho lateral, clique no botão 'Salvar'.

Agora você pode adicionar o ícone a qualquer página, postagem ou área pronta para widgets usando o código ao lado de 'Incorporar Shortcode'.

Como adicionar um ícone de carrinho usando shortcode

Para mais informações sobre como inserir o shortcode, consulte nosso guia sobre como adicionar um shortcode no WordPress.

Outra opção é adicionar o ícone ao menu de navegação do seu site. Dessa forma, o carrinho lateral deslizante estará sempre ao alcance, sem distrair o conteúdo principal da página.

Como adicionar um ícone de carrinho a um menu de navegação

Para fazer isso, vamos abrir o menu suspenso 'Adicionar ao Menu' e escolher o menu que você deseja usar.

Depois disso, basta clicar no botão 'Salvar'.

Adicionando um ícone de carrinho ao menu do WordPress

Agora, se você visitar seu site WordPress, verá o ícone do carrinho no menu de navegação.

Etapa 8: Adicionar Suas Próprias Cores e Branding

Você pode querer alterar as cores do carrinho lateral deslizante para combinar melhor com seu tema WooCommerce ou marca.

Para alterar a cor do texto, a cor do botão, a cor do link e muito mais, clique em ‘Estilização’.

Adicionando sua própria marca a um carrinho do WooCommerce

E para alterar qualquer uma das cores padrão, basta clicar. Isso abre um pop-up onde você pode experimentar cores diferentes.

Por exemplo, na imagem a seguir, estamos personalizando a borda.

Como adicionar cores personalizadas a uma loja WooCommerce

Outra opção é digitar um código hexadecimal no campo ‘Hex’. Isso é perfeito se você já tem um tom específico em mente.

Se você não sabe qual código hexadecimal usar, pode ser útil usar um site como HTML Color Codes. Aqui, você pode explorar cores diferentes e obter um código que pode simplesmente colar no plugin FunnelKit.

Se você ainda não tem certeza de quais cores usar, pode consultar nosso guia sobre como escolher um esquema de cores perfeito para o seu site WordPress.

Lembre-se de que a aparência final pode variar dependendo do seu tema WordPress, mas você pode usar essas opções de estilo para obter um ajuste perfeito.

Etapa 9: Criar um Carrinho Lateral Deslizante Responsivo

De acordo com nosso relatório de uso da internet, mais de 90% da população global da internet usa um dispositivo móvel para acessar a internet. Com isso em mente, você vai querer garantir que o carrinho lateral deslizante tenha uma boa aparência em smartphones e tablets, assim como em computadores desktop.

Aqui, pode ser útil alterar a largura do carrinho para que ele não preencha completamente a pequena tela de um dispositivo móvel. Para fazer isso, você vai querer abrir a aba ‘Estilização’ e depois procurar por ‘Largura do Carrinho na Pré-visualização Móvel’.

Crie uma página de carrinho responsiva para dispositivos móveis

Você pode querer tentar digitar valores diferentes neste campo. Se você alterar as configurações padrão, é uma boa ideia verificar a versão móvel do seu site WordPress a partir do desktop para ter certeza de que você está satisfeito com os resultados.

Enquanto você estiver nesta tela, você também pode alterar a largura do carrinho lateral deslizante no desktop. Para fazer isso, basta alterar o número no campo 'Largura de pré-visualização do carrinho no desktop'.

Etapa 10: Publicar Seu Carrinho Lateral Deslizante

Quando você estiver satisfeito com a configuração do carrinho lateral deslizante, é hora de ativá-lo. Simplesmente clique no controle deslizante 'Habilitar Carrinho' para que ele fique azul.

Como habilitar o carrinho deslizante em sua loja WooCommerce

Agora, se você visitar sua loja online, verá o carrinho deslizante ativo.

Se você quiser remover o carrinho lateral deslizante a qualquer momento, basta voltar para FunnelKit » Carrinho no painel do WordPress. Em seguida, clique para desativar o controle deslizante 'Habilitar Carrinho'.

Como desabilitar o carrinho deslizante em sua loja WooCommerce

Método 2. Adicionar um Carrinho Lateral Deslizante Avançado (Com Upsells, Cross-Sells e Recompensas)

Se você deseja aumentar o valor médio do pedido em sua loja, pode adicionar recursos poderosos de upsell, cross-selling e recompensa ao carrinho deslizante. Essas opções avançadas estão disponíveis na versão premium do FunnelKit Cart.

Com este plugin, você pode recomendar produtos relacionados sempre que um cliente adicionar um item ao carrinho.

Obtenha mais vendas com promoções de upsell e cross-sell

Você também pode criar recompensas exclusivas, como códigos de cupom e brindes, e promovê-los dentro do carrinho deslizante.

O FunnelKit pode até rastrear quanto mais o cliente precisa gastar para desbloquear a próxima recompensa.

Oferecendo recompensas extras aos compradores
Etapa 1: Instale e Ative os Plugins FunnelKit Pro

Para obter esses recursos avançados, você precisará do pacote FunnelKit Funnel Builder Pro (o plano Plus ou superior). Este pacote inclui três plugins separados que funcionam juntos, e você precisará instalar todos eles:

  • FunnelKit Funnel Builder: Este é o plugin principal.
  • FunnelKit Funnel Builder Pro: Este é o add-on premium que desbloqueia upsells, recompensas e outros recursos.
  • FunnelKit Cart: Este é o módulo específico que alimenta o carrinho lateral deslizante.

Após comprar um plano, faça login na sua conta FunnelKit para baixar os três plugins. Em seguida, você pode instalá-los e ativá-los. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin WordPress.

Passo 2: Ative sua Chave de Licença

Após a ativação, vá para FunnelKit » Configurações e adicione sua chave de licença no campo 'FunnelKit Funnel Builder Pro'.

Adicionando a licença do FunnelKit

Você pode encontrar essas informações fazendo login na sua conta no site FunnelKit. Com isso feito, clique em 'Ativar'.

Depois disso, simplesmente vá para FunnelKit » Carrinho.

Adicionando um carrinho lateral deslizante avançado a uma loja online

Agora você pode configurar e personalizar o carrinho lateral seguindo o mesmo processo descrito no método 1. Quando estiver satisfeito com a configuração do carrinho lateral deslizante, você estará pronto para adicionar upsells, cross-sells e recompensas.

Passo 3: Habilite Upsells e Cross-Sells

Quando os clientes abrem o carrinho lateral deslizante, você pode mostrar promoções exclusivas de upsell e cross-sell com base nos itens em sua cesta de compras.

Adicionando promoções de upsell e cross-sell ao WooCommerce

Upselling é quando você incentiva os compradores a comprar um produto de preço mais alto em vez daquele que eles já têm em seu carrinho de compras.

Por exemplo, imagine um cliente adicionando uma jaqueta impermeável ao carrinho. Você pode sugerir uma jaqueta de maior qualidade, mais durável, versátil e disponível em cores diferentes.

Cross-selling é quando você promove um produto relacionado a algo que o cliente já está comprando. Por exemplo, se eles adicionarem um cartão de felicitações ao carrinho, você pode incentivá-los a comprar chocolates ou flores também.

O WooCommerce tem um recurso de produto vinculado que permite criar upsells e cross-sells. Para mais informações, consulte nosso guia sobre como fazer upsell de produtos no WooCommerce.

No entanto, você também pode criar upsells e cross-sells diretamente do painel do FunnelKit. Esta é a opção mais rápida, então é a que usaremos neste guia.

Para começar, você precisará clicar na opção 'Upsells' e depois selecionar 'Enable Cart Upsells'.

Como adicionar upsells e cross-sells ao WooCommerce
Passo 4: Atribua Upsells e Cross-Sells a Produtos

Depois disso, vamos rolar até a seção 'Upsells and Cross-Sells'.

Aqui, você verá todos os produtos em sua loja online.

Como criar produtos vinculados no WooCommerce

Simplesmente clique no item onde você deseja adicionar um ou mais produtos vinculados.

Em seguida, você pode clicar em 'Add Upsell' ou 'Add Cross Sell', dependendo do tipo de promoção que deseja criar.

Recursos avançados de conversão do FunnelKit

No pop-up, comece a digitar o produto que você deseja usar como upsell ou cross-sell. Quando o produto certo aparecer, basta clicar nele.

Para oferecer vários produtos, basta seguir o mesmo processo descrito acima.

Adicionando um produto vinculado em sua loja online

Com isso feito, simplesmente clique no botão 'Add'.

Agora você pode criar campanhas exclusivas de cross-sell e upsell para cada produto em sua loja simplesmente seguindo o mesmo processo descrito acima.

Um exemplo de carrinho deslizante de e-commerce de alta conversão
Passo 5: Personalize a Exibição de Upsell e Cross-Sell

Agora, você está pronto para personalizar como as promoções de upsell e cross-sell aparecerão no seu carrinho lateral deslizante.

Para começar, tente alternar entre diferentes estilos clicando nos botões de rádio ao lado de ‘Exibição’.

Personalizando as promoções de upsell e cross-sell no WooCommerce

A pré-visualização ao vivo será atualizada automaticamente, para que você possa experimentar diferentes estilos e ver qual deles você mais gosta.

Por padrão, o FunnelKit exibirá tanto upsells quanto cross-sells no carrinho lateral deslizante. Se preferir, você pode exibir apenas upsells ou apenas cross-sells usando os botões de rádio em ‘Tipo de Recomendação de Produto’.

Configurações de recomendação de produtos do FunnelKit

Em seguida, você pode alterar o título que o FunnelKit exibe acima da promoção de upsell ou cross-sell digitando-o no campo ‘Título’.

Apenas esteja ciente de que o FunnelKit usará o mesmo título para ambos os tipos de promoção.

Adicionando promoções ao seu carrinho lateral deslizante

Depois disso, você pode definir o número máximo de produtos sugeridos que o FunnelKit exibirá, digitando no campo ‘Mostrar Upsells Máximos’.

Sempre que possível, é uma boa ideia criar promoções de upsell e cross-sell exclusivas para cada produto. No entanto, se sua loja online tiver muitos itens, isso pode não ser possível.

Com isso em mente, você pode definir um produto de upsell padrão que o FunnelKit promoverá quando nenhum produto vinculado estiver disponível. Para fazer isso, basta digitar o nome de um produto no campo ‘Upsells Padrão’. Quando o produto certo aparecer, basta clicar nele.

Definindo um produto vinculado padrão

Quando estiver satisfeito com as promoções de upsell e cross-sell que você criou, não se esqueça de clicar em ‘Salvar’ para armazenar suas alterações.

Passo 6: Crie e Configure Recompensas Desbloqueáveis

Dar aos clientes um motivo para gastar mais pode aumentar o valor médio do pedido. O FunnelKit permite que você crie várias recompensas que os clientes desbloqueiam assim que o subtotal do carrinho atinge um determinado valor.

Por exemplo, você pode oferecer frete grátis se o cliente exceder um gasto mínimo. O FunnelKit até mostrará aos clientes quanto mais eles precisam gastar para desbloquear seu prêmio.

Esta é uma maneira fácil de obter mais vendas e construir fidelidade do cliente com gamificação.

O FunnelKit permite que você ofereça três recompensas diferentes: frete grátis, um desconto e um brinde.

Para oferecer frete grátis, você precisará ter configurado o frete em sua loja WooCommerce. Para instruções passo a passo, consulte nosso guia WooCommerce simplificado.

Enquanto isso, a recompensa de 'desconto' aplica automaticamente um cupom quando o cliente atinge o valor mínimo de compra. Se você deseja oferecer essa recompensa, precisará criar um cupom de desconto percentual usando o recurso de cupom integrado do WooCommerce ou um plugin de cupom do WordPress.

Para instruções passo a passo, consulte nosso guia sobre como criar cupons inteligentes.

Depois disso, você estará pronto para criar uma recompensa selecionando 'Recompensas' nas configurações do FunnelKit e clicando em 'Criar Recompensa'.

Como obter mais vendas com recompensas

Agora você pode abrir o menu suspenso 'Tipo' e escolher o tipo de recompensa que deseja criar: Frete Grátis, um Desconto ou um Brinde.

Independentemente da sua escolha, você pode alterar o texto que o FunnelKit exibe aos clientes digitando no campo 'Mensagem'.

Se você fizer alguma alteração, tome cuidado para não editar {{remaining_amount}}, pois isso permite que o FunnelKit mostre quanto mais o cliente precisa gastar.

Adicionando incentivos à sua loja WooCommerce

Se você estiver oferecendo um desconto, certifique-se de alterar a mensagem para mostrar quanto o cliente economizará.

Com isso feito, digite um número no campo 'Valor para Obter Recompensa'. Este é o valor que os compradores devem gastar para desbloquear a recompensa.

Oferecendo recompensas e incentivos aos seus clientes

Se você estiver oferecendo um desconto percentual, precisará especificar qual cupom o FunnelKit deve aplicar automaticamente.

No campo ‘Cupom’, comece a digitar o cupom que você deseja usar. Quando o código correto aparecer, clique nele.

Adicionando uma oferta de desconto ao seu site de e-commerce

Agora, o FunnelKit aplicará automaticamente o cupom quando alguém atingir o gasto mínimo.

Oferecendo um brinde em vez disso? Então, você pode começar a digitar o nome do brinde no campo ‘Produto’.

Oferecendo um presente grátis aos compradores

Quando o produto correto aparecer, clique nele.

Agora, o FunnelKit adicionará este item ao carrinho de compras do cliente assim que ele atingir o gasto mínimo.

Como oferecer um presente grátis aos compradores

Para adicionar mais recompensas, basta clicar em ‘Criar Outra Recompensa’.

Agora você pode configurar o desconto, brinde ou recompensa de frete grátis seguindo o mesmo processo descrito acima.

Obtenha mais vendas oferecendo uma recompensa aos compradores

Por padrão, o FunnelKit exibirá a seguinte mensagem assim que um cliente se qualificar para todos os prêmios: ‘Parabéns! Você desbloqueou todas as recompensas.’

Para exibir uma mensagem diferente em vez disso, basta digitar no campo ‘Quando Todas as Recompensas Desbloqueadas’. Você pode até oferecer ao cliente um bônus especial por desbloquear todas as suas recompensas, como um código de cupom exclusivo para usar em sua próxima compra.

Oferecendo uma recompensa aos visitantes

Quando você estiver satisfeito com a configuração de suas recompensas, clique no botão ‘Salvar’.

Passo 7: Publique seu Carrinho Lateral Deslizante Avançado

Quando estiver pronto para ativar o carrinho deslizante, basta clicar na opção ‘Ativar Carrinho’.

Publicando um carrinho lateral deslizante em sua loja online

Se você quiser remover o carrinho deslizante a qualquer momento, basta voltar para FunnelKit » Carrinho no painel do WordPress. Em seguida, prossiga e clique para desativar a opção ‘Ativar Carrinho’.

Tutorial em Vídeo

Antes de ir, você pode querer conferir nosso tutorial em vídeo sobre como adicionar um carrinho deslizante à sua loja WooCommerce.

Inscreva-se no WPBeginner

Perguntas Frequentes Sobre Adicionar um Carrinho Deslizante no WooCommerce

Aqui estão algumas perguntas que nossos leitores fizeram com frequência antes de adicionar um carrinho deslizante em suas lojas WooCommerce:

Um carrinho lateral deslizante substitui a página de carrinho padrão do WooCommerce?

Não, ele não substitui a página de carrinho padrão. O carrinho lateral deslizante oferece uma maneira alternativa e mais conveniente para os clientes visualizarem e gerenciarem seus carrinhos de qualquer página.

A página principal do carrinho (seusite.com/cart) ainda existirá, e a maioria dos carrinhos deslizantes inclui um botão que leva a ela para usuários que desejam vê-la.

Adicionar um plugin de carrinho lateral deslizante deixará meu site mais lento?

Um plugin bem codificado como o FunnelKit é construído para performance e não deve ter um impacto perceptível na velocidade do seu site. Esses plugins são projetados para carregar seus scripts de forma eficiente.

No entanto, como uma boa prática, é sempre uma boa ideia testar a velocidade do seu site antes e depois de adicionar qualquer novo plugin para ter certeza.

Vale a pena atualizar para o FunnelKit Pro apenas pelos recursos do carrinho deslizante?

Se a atualização vale a pena depende dos seus objetivos de negócio. Se o seu objetivo principal é aumentar o valor médio do pedido (AOV), então os recursos Pro são muito poderosos.

A capacidade de exibir upsells, cross-sells e recompensas gamificadas direcionados (como 'Você está a R$10 de frete grátis!') diretamente no carrinho pode aumentar significativamente as vendas.

E se o carrinho lateral deslizante entrar em conflito com o meu tema do WordPress?

Conflitos com temas modernos e bem codificados são raros, mas podem acontecer. Se você notar algum problema de exibição, o primeiro lugar a verificar são as configurações de 'Estilização' do plugin, pois você pode resolver pequenos problemas lá.

Se o problema persistir, a melhor atitude é entrar em contato com a equipe de suporte do plugin para obter assistência.

Esperamos que este artigo tenha ajudado você a adicionar um carrinho lateral deslizante no WooCommerce. Você também pode conferir nosso guia sobre como criar um popup no WooCommerce para aumentar as vendas e nossa seleção especializada dos melhores plugins do 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.

Aviso: Nosso conteúdo é apoiado pelos leitores. Isso significa que, se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Interações do Leitor

1 CommentLeave a Reply

  1. “Por que não adicionar aí” lol.
    Na verdade, esta é uma postagem perspicaz que ajuda a otimizar todas as partes do WooCommerce para vendas e a criar um carrinho deslizante para qualquer tema.
    Obrigado por este guia. Eu preciso desse carrinho deslizante.

Deixe uma resposta

Obrigado por escolher deixar um comentário. Por favor, tenha em mente que todos os comentários são moderados de acordo com nossa política de comentários, e seu endereço de e-mail NÃO será publicado. Por favor, NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.