Se você tem um site de comércio eletrônico, você provavelmente sabe que levar o cliente à página de Checkout está a apenas um clique de distância da Missão cumprida – a venda de um produto.
Mas sempre há espaço para melhorias, mesmo se você levar o cliente à página certa. E se o cliente quiser fazer uma mudança no carrinho de compras? E se você pudesse dar a ele ou ela uma maneira fácil de voltar à loja e adicionar mais itens?
Hoje vou lhe mostrar duas maneiras super simples de tornar sua página de checkout do WooCommerce mais fácil de usar. E pode até incentivar seus clientes a fazer outra compra. Eis o que vamos fazer:
- adicionaremos o botão ” Continuar comprando” à página de checkout
- também adicionaremos o link Edit Cart no checkout do WooCommerce
Vamos começar!
Como adicionar o link Continuar Compras à página de Checkout do WooCommerce
É ótimo quando o cliente chega à página de Checkout. Mas você sabe o que é ainda melhor? Quando os clientes fazem pedidos maiores. É por isso que adicionará o botão Continuar comprando à página de checkout no WooCommerce, para garantir que o cliente tenha uma maneira fácil de visualizar todos os seus produtos em uma loja. Como aqui:
Para adicionar o botão Continuar comprando vá para Appearance >> Editor de Arquivo Temático ou Ferramentas >> Editor de Arquivo Temático em seu painel de administração do WordPress, e abra o arquivo functions.php à direita.
Quando estiver no lugar certo, adicione este código ao fundo do arquivo functions.php.
add_action( 'woocommerce_checkout_before_customer_details', 'continue_shopping_before_billing', 20 );
function continue_shopping_before_billing(){
echo '<div class="checkout-continue-shopping">
<a href="'.get_home_url().'">Continue Shopping →</a>
</div>';
}Este código adiciona o link Continue Shopping logo acima da seção Detalhes de faturamento na página de checkout do WooCommerce. Exatamente como você vê na loja de telas acima. O link leva o visitante de volta à página inicial de sua loja.
Se você quiser linkar para outra página, você pode substituir o atributo href do link para qualquer outra página de sua loja WooCommerce. Por exemplo, o link href:
<a href="https://yourstore.com/any-other-page">Continue Shopping →</a>A única coisa que resta fazer é estilizar corretamente o link – para garantir que ele se misture bem ao seu website. É por isso que acrescentei <div> e classe .checkout-continue-shopping para que você possa estilizá-lo como quiser. Por exemplo:
.checkout-continue-shopping {
text-align: right; // to add button to right side of the page
}
.checkout-continue-shopping a { // add styling to the link
background: pink;
color: white;
padding: 6px 10px;
border-radius: 20px;
}
.checkout-continue-shopping a:hover { // change color of the text when customer hovers / puts mouse on the button
color: black;
}Você pode precisar mudar as cores, ou adicionar seu próprio estilo para ter certeza de que ele se encaixa melhor em seu website.
P.S. para adicionar CSS personalizado ao seu site WordPress, você precisa usar Appearance >> Personalizar >> Aba CSS adicional.
Como adicionar o link Editar carrinho de compras à página de checkout do WooCommerce
Não há nada mais irritante na loja on-line do que chegar à página Checkout, e notar que você adicionou um produto errado, ou adicionou uma quantidade incorreta de produtos nela. Nestas situações, você, como proprietário da loja, deve deixar seu cliente resolver o problema sem esforço.
É por isso que adicionaremos também o link Editar Carrinho à página de Checkout. Como aqui:
Como anteriormente, vá para Appearance >> Editor de Arquivo Temático ou Ferramentas >> Editor de Arquivo Temático em seu painel de administração do WordPress, e abra o arquivo functions.php à direita. Depois adicione este código no final do arquivo, e não se esqueça de salvar as alterações:
add_action('woocommerce_checkout_before_order_review', 'checkout_cart_link');
function checkout_cart_link(){
?><div class="checkout-cart-link">
<a href="<?php echo wc_get_cart_url(); ?>">Edit cart content →</a>
</div>
<?php
}Novamente, como no exemplo anterior, você pode precisar adicionar algum estilo CSS personalizado no Customizer. Por exemplo:
.checkout-cart-link {
padding-buttom: 10px; // make some whitespace between product table and our link
}
.checkout-cart-link a {
color: pink;
font-size: 15px;
}
É isso – estes dois links na página Checkout devem gerar pedidos ligeiramente maiores em sua loja on-line WooCommerce, e devem fazer com que sua experiência de comércio eletrônico seja melhor a longo prazo.
Procurando outras maneiras de melhorar a página de checkout do WooCommerce? Verifique também estes artigos:
