WooCommerce: Add Upsell Area @ Checkout Page

If you want to increase your AOV (Average Order Value), you can definitely start from the WooCommerce Checkout page.

A client asked me to place a “Donation Area” close to the “Place Order” button (so at the bottom of the page, once customers are ready to pay) to drive more awareness around this add-on. All I had to do was creating hidden products with a donation value, use my own “Custom Add to Cart URL” guide to create add to cart links and print an HTML box right above the checkout button by using my WooCommerce Visual Hook Guide for the Checkout Page. Enjoy!

How to show an upsell / add-on area @ WooCommerce Checkout (suggesting to add more products to cart)

PHP Snippet: Show Add-Ons Area @ WooCommerce Checkout Page

Requirements:

  1. Product IDs you want to add to Cart (14877, 14879, 15493 in my example)
  2. No “redirect to Cart after add to cart” option checked in WooCommerce settings
/**
 * @snippet       Upsell Area - WooCommerce Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.6.1
 * @community     https://businessbloomer.com/club/
 */

add_action( 'woocommerce_review_order_before_submit', 'bbloomer_checkout_add_on', 9999 );

function bbloomer_checkout_add_on() {
	$product_ids = array( 14877, 14879, 15493 );
	$in_cart = false;
	foreach( WC()->cart->get_cart() as $cart_item ) {
	   $product_in_cart = $cart_item['product_id'];
	   if ( in_array( $product_in_cart, $product_ids ) ) {
		   $in_cart = true;
		   break;
	   }
	}
	if ( ! $in_cart ) {
		echo '<h4>Make a Donation?</h4>';
		echo '<p><a class="button" style="margin-right: 1em; width: auto" href="?add-to-cart=14877"> €5 </a><a class="button" style="margin-right: 1em; width: auto" href="?add-to-cart=14879"> €20 </a><a class="button" style="width: auto" href="?add-to-cart=15493"> €50 </a></p>';
	}
}

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: “You Only Need $$$ to Get Free Shipping!” @ Cart
    This is a very cool snippet that many of you should use to increase your average order value. Ecommerce customers who are near the “free shipping” threshold will try to add more products to the cart in order to qualify for free shipping. It’s pure psychology. Here’s how we show a simple message on the […]
  • WooCommerce: Cart and Checkout on the Same Page
    This is your ultimate guide – complete with shortcodes, snippets and workarounds – to completely skip the Cart page and have both cart table and checkout form on the same (Checkout) page. But first… why’d you want to do this? Well, if you sell high ticket products (i.e. on average, you sell no more than […]
  • WooCommerce: Disable Payment Method If Product Category @ Cart
    Today we take a look at the WooCommerce Checkout and specifically at how to disable a payment gateway (e.g. PayPal) if a specific product category is in the Cart. There are two tasks to code in this case: (1) based on all the products in the Cart, calculate the list of product categories in the […]
  • WooCommerce: Add Privacy Policy Checkbox @ Checkout
    Here’s a snippet regarding the checkout page. If you’ve been affected by GDPR, you will know you now need users to give you Privacy Policy consent. Or, you might need customer to acknowledge special shipping requirements for example. So, how do we display an additional tick box on the Checkout page (together with the existing […]
  • WooCommerce: Redirect to Custom Thank you Page
    How can you redirect customers to a beautifully looking, custom, thank you page? Thankfully you can add some PHP code to your functions.php or install a simple plugin and define a redirect to a custom WordPress page (as opposed to the default order-received endpoint). This is a great way for you to add specific up-sells, […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

15 thoughts on “WooCommerce: Add Upsell Area @ Checkout Page

  1. is it possible that it doesn’t work with the latest WooCommerce edition?
    WooCommerce 8.6.0 version

    1. Do you use the Checkout Block or the standard checkout shortcode?

  2. How can I follow with a redirect to /checkout/. When on the ‘?add-to-cart=14877’ URL, then it cannot be removed from the cart (I have cart on checkout page) as it simply reloads the same URL and re adds the item. Clearing the query string allows the cart to be edited, however is not a user friendly approach

    1. Never mind, I figured it out. I set the original URL to ‘/cart/?add-to-cart=5489’ then add the following snippet

      add_filter('add_to_cart_redirect', 'ql_skip_cart_page');
      function ql_skip_cart_page () {
       global $woocommerce;
       $redirect_checkout = $woocommerce-&gt;cart-&gt;get_checkout_url();
       return $redirect_checkout;}
      
  3. Hi,

    When you click on one of the buttons you reload the checkout page and some of the fields are not kept such as order remarks.

    Sam

    1. Good point Sam, but that’s not because of my snippet. Even if you move to another URL and then go back to the checkout you will lose them. There is a way to “remember” them but this is off topic

  4. Thanks for this, but how can I add it to the cart page instead of the checkout page? I’m trying to use it as upsell with one unique product for all the products in my store. Thank you

    1. Hi Cristopher, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  5. Thank you for the code! I have a question, how can I modify the code so that it only breaks (disappears) when all the products in the array ( $product_ids = array( 14877, 14879, 15493 ) ) are in the cart? As right now it breaks when any item is added to cart from the array. Thank you in advance, have a wonderful day!

    1. Hey Loa, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  6. Suppose I add a jQuery datepicker field here ( at “woocommerce_review_order_before_submit” hook ), it automatically reloads and jQuery datepicker stops working. Look as normal textbox field. Can you help me on this. This works on other hook position available at checkout page.

    1. Hey Sanesh, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  7. Neat tip Rodolfo 🙂

    Just want to add for variable products, you must add the variation’s ID or the user will get error notifications. Thankfully, you already told us how to do that in you article about custom add to cart URLs: https://businessbloomer.com/woocommerce-custom-add-cart-urls-ultimate-guide/

    1. Great, thanks Lionel!

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *