Como adicionar o botão de compra rápida no WooCommerce? Com e sem plugins

Publicados: 2020-06-01

Se você administra um negócio on-line, pode estar procurando maneiras de aumentar as vendas, as conversões e a receita. Você pode capturar os endereços de e-mail dos visitantes, ativar pop-ups de intenção de saída ou enviar boletins informativos, mas há algo muito mais poderoso. Neste post, mostraremos como adicionar um botão de compra rápida no WooCommerce !

O que é um botão de compra rápida?

Um botão de compra rápida, também conhecido como botão comprar agora, permite que seus compradores comprem os produtos que desejam mais rapidamente e evitem etapas extras no processo de checkout. Então, em vez de ter que adicionar itens ao carrinho, indo para a página do carrinho e depois para a página de checkout, eles podem ir da página do produto para a página de checkout em um clique. Dessa forma, você reduz as desistências e o abandono de carrinho.

A maioria das grandes empresas de comércio eletrônico, como a Amazon, possui um botão de compra rápida na página do produto que permite comprar em um clique. Assim, quando um comprador clica no botão comprar agora, ele é redirecionado automaticamente para a página de checkout. Como você pode imaginar, esta é uma ótima maneira de aumentar as vendas.

Por que você deve usar um botão de compra rápida do WooCommerce?

Mais de 75% dos compradores saem das lojas online com produtos no carrinho. Uma das principais razões para isso é porque o processo de compra é longo e confuso. Quanto mais longo for esse processo, mais chances os usuários terão de desistir, então uma das melhores soluções é adicionar um botão de compra rápida à sua loja WooCommerce. Isso não significa que você precisa se livrar do botão Adicionar ao carrinho. Nem todos os seus visitantes estão prontos para comprar no momento em que visitam seu site.

No entanto, dar aos usuários que estão prontos para comprar imediatamente a opção de fazer isso em um clique, ajudará você a aumentar suas conversões. Além disso, botões de compra rápida são uma boa ideia para sites de assinatura ou associação. Quando um usuário se inscreve para uma assinatura, tudo o que você precisa fazer é redirecioná-lo para a página de checkout em vez de levá-lo para a página do carrinho e depois para o checkout.

Como adicionar um botão de compra rápida no WooCoommerce?

Existem três métodos principais para adicionar um botão de compra rápida no WooCommerce :

  1. Plugar
  2. Programaticamente (codificação)
  3. Códigos de acesso

Todos esses métodos são 100% amigáveis ​​para iniciantes, para que você possa escolher o que melhor combina com você.

1) Plug-in

Existem muitos plugins do WordPress disponíveis para adicionar um botão de compra rápida ao seu site. No entanto, recomendamos o WooCommerce Direct Checkout by QuadLayers, um dos melhores e leves complementos para simplificar o processo de checkout.

O Direct Checkout for WooCommerce é uma ferramenta freemium que possui uma versão gratuita e três planos premium que começam em 20 USD (pagamento único). A versão gratuita tem mais de 70.000 instalações ativas e muitos recursos excelentes. Mas se você deseja funcionalidades mais avançadas, a versão pro é sua melhor escolha.

Instalação e ativação de plugins

1) Instale o plugin em seu site.

2) Em seguida, ative-o.

Se você estiver usando alguns dos planos premium, na mesma página, poderá fazer upload dos arquivos de plug-in baixados. Em seguida, clique em Instalar agora .

Após a instalação, ative o plugin.

Agora que o Direct Checkout para WooCommerce está ativado, vamos dar uma olhada na configuração.

Ative a licença

Em WooCommerce > Configurações > Checkout direto , você poderá ver as opções de configuração para simplificar o processo de checkout.

adicionar botão de compra rápida no woocommerce - configuração de checkout direto

A próxima coisa que você precisa fazer é ativar a cópia premium do plugin com uma chave de licença válida.

A chave de licença pode ser encontrada em sua conta QuadLayers. Basta copiar a chave de licença e colá-la nas configurações de seus plugins com o endereço de e-mail associado a ela. Verificar sua chave é importante porque permitirá que você obtenha atualizações automáticas. Sempre que houver uma nova versão do plug-in, você poderá atualizá-la diretamente no painel do WordPress.

Configuração

Antes de adicionar um botão comprar agora ao WooCommerce, você precisa configurar e personalizar suas opções de checkout. Em primeiro lugar, certifique-se de que tem alguns produtos disponíveis na sua loja para poder testar a personalização. No nosso caso, temos um produto de teste e, como você pode ver, a página do produto tem apenas um botão Adicionar ao carrinho .

Sempre que um visitante clicar nesse botão, o produto será adicionado aos seus carrinhos. O cliente precisará acessar a página do carrinho e, em seguida, a página de checkout. Assim, com o Checkout Direto, você pode direcionar o comprador da página do produto para a página de checkout, pulando a página do carrinho. Dessa forma, você pode aumentar as conversões.

Usar este plugin é muito fácil. Na seção de configurações do Direct Checkout, você verá a opção de desativar a página do carrinho. Tudo o que você precisa fazer é ativar o redirecionamento e adicionar a página de checkout como destino.

Depois disso, certifique-se de salvar as alterações.

adicionar botão de compra rápida no woocommerce - configuração de checkout direto do WC

Agora, você está pronto para ir. Quando os compradores clicarem no botão de compra, eles serão redirecionados automaticamente para a página de checkout. A partir daí, o cliente poderá adicionar informações de cobrança, endereços de entrega e efetuar o pagamento.

O plugin WooCommerce Direct Checkout também permite remover campos de checkout, endereços de cobrança, endereços de entrega e muito mais.

Preços de checkout direto do WooCommerce

O Direct Checkout para WooCommerce possui uma versão gratuita com recursos básicos e três planos premium. Como adicionar o botão de compra rápida - Preço do WooCommerce Direct Checkout

  • Pessoal – pagamento único de 20 USD – Chave de licença única
  • Agência – pagamento único de 40 USD – 5 chaves de licença
  • Desenvolvedor – pagamento único de 80 USD – Chaves de licença ilimitadas

A versão gratuita é excelente e tem tudo o que você precisa para começar. Mas se você quiser recursos mais avançados, recomendamos que você experimente o plano Pessoal ou Agência.

Verifique o checkout direto do WooCommerce

Se você quiser dar uma olhada em outras ferramentas, confira nossa lista dos melhores plugins de compra rápida. Se, por outro lado, você quiser personalizar ainda mais sua página de checkout adicionando e editando campos de checkout, você pode dar uma olhada no WooCommerce Checkout Manager.

2) Programaticamente (codificação)

Se você não deseja instalar nenhum plug-in, pode adicionar um botão de compra rápida no WooCommerce programaticamente. Este método requer algum conhecimento técnico e paciência. No entanto, se você seguir essas etapas, poderá fazê-lo mesmo se for iniciante. Mostraremos como criar um botão de adicionar ao carrinho, modificar sua URL e como inseri-lo para produtos simples, variáveis ​​e agrupados.

1- Crie uma URL de checkout

Primeiro, você precisa adicionar o link ao botão adicionar ao carrinho. Você precisa substituir PRODUCT_ID pelo código do produto que deseja incluir no carrinho.

 https://seudominio.com/cart/?add-to-cart=PRODUCT_ID

Como queremos que os usuários pulem a página do carrinho e os redirecionem para a página de checkout, temos que modificar a URL da seguinte forma:

 https://seudominio.com/checkout/?add-to-cart=PRODUCT_ID

2- Crie um link de produto

Depois disso, você deve modificar a URL com base no tipo de produto: único, variável e agrupado. A) Produto único O URL para produtos únicos é:

 https://seudominio.com/checkout/?add-to-cart=PRODUCT_ID

Você precisa substituir PRODUCT_ID pelo ID do produto. Por exemplo, para um único produto com ID = 10, o link será:

 https://seudominio.com/checkout/?add-to-cart=10

B) Produto variável Para produtos variáveis, você precisa obter o ID da variação em Produtos > Variações e use esse ID de variação no URL da seguinte forma:

 https://seudominio.com/checkout/?add-to-cart=VARIATION_ID

Portanto, se seu ID de variação = 29, o link será:

 https://seudominio.com/checkout/?checkout=29

Você também pode criar o link usando o ID do produto e o ID da variação:

 https://seudominio.com/checkout/?checkout=PRODUCT_ID&variation_id=VARIATION_ID

No entanto, recomendamos que você use apenas o código de variação porque é mais simples.

NOTA : Isso só funcionará para as variações que possuem todos os atributos gerados. Para as outras variações, você precisa adicionar a definição do atributo que está faltando no link. Por exemplo, digamos que você queira criar a URL para a Variation ID = 30. A cor do atributo é definida (verde), mas não o tamanho. Então, se quisermos adicionar o tamanho = médio, a URL será:

 https://seudominio.com/checkout/?checkout=30&pa_size=medium

C) Produto agrupado Para os produtos agrupados, em vez de adicionar o ID da variação, é necessário adicionar o ID do produto agrupado junto com o ID do produto dos subprodutos e as quantidades de cada um deles.

 https://seudominio.com/checkout/?add-to-cart=GROUPED_PRODUCT_ID&quantity[PRODUCT_ID1]=1&quantity[PRODUCT_ID2]=1

Por exemplo, aqui incluiremos o ID do produto agrupado = 1900 e o ID do subproduto = 10 e 15.

 https://seudominio.com/checkout/?add-to-cart=1900&quantity[10]=1&quantity[15]=1

3- Defina a quantidade

Além disso, você também pode definir o número de produtos que deseja incluir. Para isso, você deve usar o parâmetro quantidade . Se você não especificar o número de produtos, por padrão será 1.

Então, agora, vamos dar uma olhada em como incluir a quantidade do parâmetro em produtos únicos, variáveis ​​e agrupados.

A) Produto único Você adiciona o parâmetro quantidade após o product_id :

 https://seudominio.com/checkout/?add-to-cart=PRODUCT_ID&quantity=1

Então se você quiser adicionar o ID do produto = 10x2, o link será:

 https://seudominio.com/checkout/?add-to-cart=10&quantity=2

B) Produto variável Para produtos variáveis, a lógica é a mesma:

 https://seudominio.com/checkout/?add-to-cart=VARIATION_ID&quantity=1

Para ID de variação = 29 e quantidade = 3, o link será:

 https://seudominio.com/checkout/?add-to-cart=29&quantity=3

C) Produtos agrupados Por fim, para produtos agrupados, a URL padrão é:

 https://seudominio.com/checkout/?add-to-cart=GROUPED_PRODUCT_ID&quantity[PRODUCT_ID1]=1&quantity[PRODUCT_ID2]=1

Portanto, para o ID do produto agrupado = 1900, o link com o ID do produto = 10 x3 e o ID do produto = 15 x2 será:

 https://seudominio.com/checkout/?add-to-cart=1900&quantity[10]=3&quantity[15]=2

Quando terminar de personalizar o URL, se você verificar a página no frontend, poderá ver um URL Adicionar ao carrinho que redirecionará os usuários diretamente para a página de checkout. Isso funciona funcionalmente, mas não parece ótimo. Agora você precisa transformar esse link em um botão legal, adicionando algum estilo com um pouco de CSS.

4- Defina o estilo do botão

Depois de modificar todas as URLs, você deve criar o botão comprar agora. Como direcionaremos os clientes diretamente para o checkout, chamaremos o botão Comprar agora em vez de Adicionar ao carrinho .

No WooCommerce, existem dois estilos de botão:

1. Estilo de botão padrão

 <a class="button" href="#">Compre agora</a>

2. Estilo de botão alternativo

 <a class="button alt" href="#">Compre agora</a>

Além disso, você pode criar seu estilo de botão personalizado:

 <a class="button my-button" href="#">Compre agora</a>

O código a seguir exibirá um botão vermelho com letras brancas e uma borda azul fina.

 .meu-botão {
cor branca;
cor de fundo: vermelho;
borda: azul sólido de 1px;
raio da borda: 3px;
box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.75);
}

Basta copiar e colar o código no painel do WordPress > Aparência > Personalizar > CSS personalizado. adicionar botão de compra rápida no woocommerce - estilo de botão

Em seguida, personalize-o para dar a aparência do seu site, alterando as cores, bordas, tamanho e assim por diante. Se você quiser personalizar sua loja com um pouco de codificação, recomendamos que você confira alguns dos seguintes guias:

  • Como personalizar o botão Adicionar ao carrinho
  • Como editar a página da loja
  • Personalize a página de checkout passo a passo

3) Códigos de acesso

O último método que veremos para adicionar um botão comprar agora é com códigos de acesso. Embora não haja um código de acesso para um botão de compra rápida no WooCommerce, existem soluções alternativas para fazer algo semelhante. Esse método é útil se, por exemplo, você deseja promover um de seus produtos em uma postagem de blog, pode adicionar um artigo de opção de compra rápida sem precisar vinculá-lo ao produto.

O WooCommerce vem com muitos códigos de acesso que você pode usar em qualquer lugar do seu site. O melhor de usar códigos de acesso é que você não precisa modificar os arquivos principais nem nada. Basta copiar e colar o código de acesso onde quiser exibi-lo e pronto.

Adicionar ao carrinho shortcode

Como não há um código de acesso para um botão de compra rápida, adicionaremos um botão Adicionar ao carrinho e, em seguida, alteraremos a URL para redirecionar o usuário para a finalização da compra. Primeiro, faça login no seu site WordPress e vá para o editor de conteúdo onde você deseja exibir o botão Adicionar ao carrinho. Aqui, você adicionará o botão a uma de suas postagens de revisão de produto, por exemplo.

O editor Gutenberg vem com o bloco de código de acesso, então adicione o bloco à sua área de conteúdo. adicionar botão de compra rápida no woocommerce - shortcode O shortcode que usaremos para o botão é:

 [ add_to_cart ]

Você precisa substituir o ID pelo ID do produto. Você pode buscar seu ID exclusivo do produto na seção Produtos WooCommerce .

No nosso caso, o ID do produto é 10, então modificaremos o shortcode da seguinte forma:

 [ add_to_cart ]

Seguindo este exemplo, cole o shortcode em sua área de conteúdo e publique ou atualize a postagem.

Portanto, quando você verificar seu artigo no frontend, verá um botão elegante que permitirá que seus clientes adicionem o produto com ID = 10 ao carrinho. adicionar botão de compra rápida no woocommerce - exemplo de código de acesso

Você também pode personalizar o shortcode com alguns atributos. Junto com o ID, o shortcode suporta outros atributos como classe, quantidade, SKU, estilo e mostra o preço. Por exemplo, você pode modificar o botão adicionar ao carrinho com um shortcode como este:

 [ add_to_cart id=”XXXX” class=”alt” quantity=”2” sku=”XXXX” style=”border:4px solid #ccc; padding: 12px;” show_price=”true” add_to_cart id=”XXXX” class=”alt” quantity=”2” sku=”XXXX” style=”border:4px solid #ccc; padding: 12px;” show_price=”true” add_to_cart id=”XXXX” class=”alt” quantity=”2” sku=”XXXX” style=”border:4px solid #ccc; padding: 12px;” show_price=”true” ]

Basta escrever os valores corretos para seu produto em cada atributo. Além disso, você pode personalizar o estilo do botão. Uma vantagem desse método é que você também pode inserir um botão de adicionar ao carrinho em uma das áreas do widget.

Altere o URL para direcionar os usuários ao checkout

Depois de colocar o shortcode, lembre-se de alterar a URL do carrinho para direcionar o usuário ao checkout.

 href="http://seudominio.com/checkout/?add-to-cart=10″

Para isso existem duas opções:

  1. No painel do WP, vá para WooCommerce > Configurações > Produtos > Geral . Aqui, marque a opção “ Ativar botões AJAX para adicionar ao carrinho nos arquivos ” e desative “Redirecionar para a página do carrinho após adição bem-sucedida”. adicionar botão de compra rápida no woocommerce - direcionar os usuários para o checkout

  2. Instale o Direct Checkout para WooCommerce para pular a página do carrinho e redirecionar os compradores da página do produto para a página de checkout.

Solução de problemas

Se você modificou o botão CSS e a mudança não está refletindo em seu frontend, provavelmente é um problema relacionado ao cache. Então, para corrigi-lo, basta limpar o cache do navegador e o cache do WordPress. Se o botão ainda não aparecer, verifique novamente o código.

Conclusão

Em suma, adicionar um botão de compra rápida à sua loja WooCommerce pode ajudá-lo a aumentar as conversões. Você aprendeu 3 maneiras diferentes de conseguir isso:

  1. Com um plug-in
  2. Programaticamente (codificação)
  3. Com códigos de acesso

A maneira mais direta é usando o plugin Direct Checkout . Com alguns cliques, você poderá direcionar seus usuários da página do produto para a página de checkout. Se você não quiser usar nenhum plugin, o método de codificação é uma excelente escolha, mas requer algumas habilidades técnicas.

por fim, outra opção interessante para encurtar o processo de checkout e aumentar a conversão é criar links de checkout direto em sua loja. Para mais informações sobre isso, você pode conferir nosso guia passo a passo.

Esperamos que você tenha achado este guia útil e aprendido como adicionar um botão de compra rápida no WooCommerce. Se sim, considere compartilhar este post nas redes sociais.

Qual método você vai tentar em seu site? Que outras coisas você faz em sua loja para aumentar as taxas de conversão? Deixe-nos saber nos comentários abaixo!