Buy Now Button – Take the user direct to checkout

Design help Ecommerce
22

Hey all,

We just released a buy now button which is a part of the add to cart component. To take advantage of this you’ll need to pull a new component into your design.

Image 2020-05-16 at 10.06.40 AM
Image 2020-05-16 at 10.06.40 AM868×796 37.7 KB

This allows a customer to buy a product by going straight to the checkout page.

Have a great weekend.

1 Like
23

Wehay! Great work guys, thank you :star_struck:

1 Like
24

@AlexN @federico - checkout the Buy Button working on our website! Hades Matte Paste | Award Winning Natural Matte Clay for Men

2 Likes
25

Hey @JoeDigital, what’s your secret? My Buy Now button keeps disappearing when I publish my website :frowning: Is there anything specific to do ?
(It is “shown” in the settings menu)

26

Hi @Lison_Company

I’m wondering if you’re maybe an Add to cart element that has been added to the website before the Buy now button enhancement has been released? If so, you’ll need to re-add the entire element itself to make it work. It’ll show up in the settings for these older elements, but unfortunately won’t automatically add the new functionality.

Please let me know if you have additional questions!
Maciej

27

Hi, the previous did not work for me, so I place here my version

const buyNow = document.getElementById('js-buy-now');
function relocateToCheckout() {
    $('.cart-wrapper').css('visibility', 'hidden');
    setTimeout(function () {
        window.location = '/checkout';
    }, 500);
}
buyNow.onclick = relocateToCheckout;
28

While converting the ‘Add to Cart’ functionality to use the ‘Buy Now’ (and also ‘Subscribe Now’) I have noticed that if the user chooses to ‘cancel’ the checkout by pressing the browser’s back button, the selected item will stay in the shopping cart. If the user selects a different product to ‘Buy Now’, they are presented with a checkout form with two items in the cart (and with no way to remove the items as the ‘Remove’ button is on the cart form). If the first item is a subscription, then clicking ‘Buy Now’ on the second product fails with an error that you cannot add a product to a cart which already contains a subscription.

I solved this issue with custom code that removes all of the shopping cart items after the products page has loaded ensuring the cart is always empty before the ‘Buy Now’ (or ‘Subscribe Now’) button is pressed.

Now I can hide the shopping cart icon as it is obsolete.

embed
[script type=“text/javascript”>
window.onload = function() {
setTimeout( function() {
$(“[data-wf-cart-action=remove-item]”).each(function () {
// click the underlaying html element, not the jquery object
$(this)[0].click();
});
},0);
}
[/script>
embed