The buying process on a WooCommerce store for most goes like this:
- The user spots a product
- He adds it to the cart
- He goes to the checkout page
- He pays for it
What if we could get rid of the cart altogether and provide a more friendly user experience instead of this Walmart-ish approach? What if the user could simply do like this:
- Spot a product
- Click “Buy Now”
- Pay
Once the user is ready to buy, you have to make it as quick as possible and don’t let him get distracted by other shiny products of your website. A change as simple as this one is not another micro-optimization, it’s a sure way to get more sales, but still, let the stats be your guide.
In this article, you will learn an easy way to improve the buying experience (and certainly the number of sales ) of your single product store.
Preparation
Spin Up a WooCommerce Website
Do you have a website for testing the things you’ll learn here? If not, pause reading and create a development environment. We need is a website will WooCommerce and 2 products at least.
If you are a Vagrant lover, you may be interested in trying wp.box. It’s my little WordPress development Vagrant box. I’ve been using it since early 2017.
Install the “Code Snippets” Plugin
You’ll be adding custom code to your website, this can be done in multiple ways:
- Using the Code Snippets plugin (which I recommend)
- Using a custom plugin
- Using a child theme
Adding the code to the currently active theme function.php file.People who do this are our common enemies
Let’s use the simplest option which is to use the “Code Snippets” plugin. Go ahead and install it from your plugins page.
You will create a code snippet and add the code I’ll give you to it. Keep adding the code to the same snippet as we advance in the tutorial. Also, make sure you enable the snippet for the frontend.
First things first, we want to make sure that whenever a product is added to the cart, all other products are removed. Here is the code:
/**
* Step 1: Allow only 1 element in the cart.
*/
add_filter( 'woocommerce_add_cart_item_data', function ( $cart_item_data ) {
global $woocommerce;
$woocommerce->cart->empty_cart();
return $cart_item_data;
} );Let’s try it. Go to your shop page and add a product to your cart. Then another one. Then another one. You’ll notice that the cart will always have one product in it which is the last one you add… Good but hey! The product is added to the page using AJAX, we don’t want that.
Step 2: Disable AJAX for the “Add to cart” Buttons
You can disable “AJAX add to cart buttons” from your WooCommerce settings (under the Products tab), but let’s force-disable it with code. We want all our code for this customization to be in the same place.
/**
* Step 2. Disable AJAX "Add to cart" Buttons.
*/
add_filter( 'option_woocommerce_enable_ajax_add_to_cart', '__return_false' );Step 3: Redirect to the Checkout Page After Adding a Product to the Cart and Hide the Success Message
When you click the add to cart button, whether it’s on the shop page, the product page or a category page, WooCommerce, by default, will add the product to the cart and then load the same page you were in. Let’s change that and redirect the user to the checkout page so he can pay for the product.
With this code, WooCommerce will redirect the user to the checkout page after he adds the product to the cart:
/**
* Step 3a: Redirect to the checkout page after adding a product to the to cart.
*/
add_filter('add_to_cart_redirect', function () {
return wc_get_page_permalink( 'checkout' );
} );Works awesome!… Almost… We still need to get rid of that success message with the “View cart” link. We also need to make sure that the user can’t access the cart page directly (it’s usually example.com/cart) and that he is redirected to the checkout page instead. Here is the code:
/**
* Step 3b: Remove '“Product bla bla blah” has been added to your cart. | View cart'.
*/
add_filter( 'wc_add_to_cart_message_html', '__return_null' );
/**
* Step 3c: Redirect cart to checkout.
*/
add_action( 'wp', function() {
if ( is_cart() ) {
wp_safe_redirect( wc_get_page_permalink( 'checkout' ) );
exit;
}
} );Step 4: Change “Add to Cart” & Remove the Quantity Input Field
We’re almost there, we just need to update the “Add to cart” button and use a more adequate choice. What about “Buy Now”? Let’s use it for now but feel free to change it to whatever you want. Let’s also get rid of the quantity field on product pages.
Let’s code this out:
/**
* Step 4a: Change "Add to cart".
*/
add_action( 'init', function() {
$text = 'Buy Now';
add_action( 'woocommerce_product_add_to_cart_text', function() use ( $text ) {
return $text;
} );
add_action( 'woocommerce_product_single_add_to_cart_text', function() use ( $text ) {
return $text;
} );
} );
/**
* Step 4b: Remove the quantity input field.
*/
add_filter( 'woocommerce_is_sold_individually', '__return_true' );The Final Code
We’re done coding. I’ve tried to make as easy and short as possible, if you added all the code to the snippet, the snippets should look similar to this:
/**
* Step 1: Allow only 1 element in the cart.
*/
add_filter( 'woocommerce_add_cart_item_data', function ( $cart_item_data ) {
global $woocommerce;
$woocommerce->cart->empty_cart();
return $cart_item_data;
} );
/**
* Step 2. Disable AJAX "Add to cart" Buttons.
*/
add_filter( 'option_woocommerce_enable_ajax_add_to_cart', '__return_false' );
/**
* Step 3a: Redirect to the checkout page after adding a product to the to cart.
*/
add_filter('add_to_cart_redirect', function () {
return wc_get_page_permalink( 'checkout' );
} );
/**
* Step 3b: Remove '“Product blah blah blah” has been added to your cart. | View cart'.
*/
add_filter( 'wc_add_to_cart_message_html', '__return_null' );
/**
* Step 3c: Redirect cart to checkout.
*/
add_action( 'wp', function() {
if ( is_cart() ) {
wp_safe_redirect( wc_get_page_permalink( 'checkout' ) );
exit;
}
} );
/**
* Step 4a: Change "Add to cart".
*/
add_action( 'init', function() {
$text = 'Buy Now';
add_action( 'woocommerce_product_add_to_cart_text', function() use ( $text ) {
return $text;
} );
add_action( 'woocommerce_product_single_add_to_cart_text', function() use ( $text ) {
return $text;
} );
} );
/**
* Step 4b:Remove the quantity input field.
*/
add_filter( 'woocommerce_is_sold_individually', '__return_true' );The Wrapping Up Conclusion
With the code we wrote together, you will make life easier for your users and certainly improve your conversion rate.
This is a summary of what we have done:
- Allow only one product in the cart
- Disable the Ajaxified “Add to cart”
- Make the cart page inaccessible directly and redirect the user to the checkout page when he tries to access it and more importantly when he adds a product to the cart. We’ve also removed the confirmation message that says “Product ‘blah blah blah’ has been added to your cart. | View cart”
- Change the “Add to cart” button copy to something more relevant like “Buy Now” and also remove the quantity input field.
That concludes this tutorial. Do not hesitate to ask questions in the comments section. I hope you enjoyed reading it as much as I enjoyed crafting it. If you think it will be useful to your colleagues or friends, then please share it on Twitter, Facebook, LinkedIn, etc.