How to Add Upsell Checkout WooCommerce

Getting people to purchase products from your WooCommerce store is excellent. However, you can implement upsell to convince buyers to make more significant purchases and increase your revenue.

Table of Contents

WooCommerce Checkout Upsell

There are many ways you can implement upselling in your WooCommerce store. You can use custom PHP code or a plugin if you are a beginner.

Having an upsell feature on your store will help you direct customers, to high-value products they will love. This is a win-win situation for everyone.

In this brief tutorial, I will share two solutions that you can use to add an upsell area on the WooCommerce checkout page.

Before implementing upsells, you need to learn more about the checkout page hooks. This will help you to add the upsell links to the desired area.

Steps to Add an Upsell Area on the WooCommerce Checkout

Here are the steps you need to follow:

Log into your WordPress site and access the dashboard as the admin user.
From the dashboard menu, click on the Appearance Menu > Theme Editor Menu. When the theme editor page is opened, look for the theme functions file with the extension functions.php. Open this functions file to
Add the function to add an upsell area on the WooCommerce checkout.

/**

 *        Upsell Area - WooCommerce Checkout

  */

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

function njengah_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>Buy these products to get a discount!</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>';

   }

}

Remember to add the correct product id. This is the outcome:
Alternatively, you can add the following code in the functions.php file:

add_action( 'woocommerce_review_order_before_submit', 'njengah_checkbox_before_button' );

function njengah_checkbox_before_button(){

echo '<p class="form-row">

<label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">

<input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="misha_upsell">

<span>Only today! Get a<a href="#" target="_blank" rel="noopener noreferrer">new tyre</a> with 90% discount – just $500!</span>

</label>

</p>';

}

add_action( 'woocommerce_checkout_order_processed', 'njengah_upsell_something', 9, 3 );

function njengah_upsell_something( $order_id, $posted_data, $order ) {

if( isset( $_REQUEST['njengah_upsell'] ) && $_REQUEST['njengah_upsell'] == 'on' ) {

// get product object, we have to pass it to add_product() method

$product = wc_get_product( 41 );

$order->add_product( $product );

$order->calculate_totals();

}

}

This is the outcome:

Conclusion

In summary, you have learned two different ways you can add a custom upsell on the WooCommerce checkout. I highly recommend using a child theme so that you do not break down your site. Alternatively, you can use a plugin to add more upsell features on the checkout page.

Editorial Staff

How to Add Upsell Checkout WooCommerce

WooCommerce Checkout Upsell

Steps to Add an Upsell Area on the WooCommerce Checkout

Conclusion

Similar Articles

Related