WooCommerce Checkout Upsell and Cross Sell. No Plugins Used

Recently I watched some marketing videos and was inspired by an idea to place a simple checkbox on the checkout page, and if you click this checkbox, one more product will be added to your order. Extremely simple.

/2 comments

And I will tell you more, I faced with this implementation on different websites too. So, let’s try to do it with WooCommerce, I’m going to place this checkbox just before the "Place Order" button, but you can place it anywhere you want – some of the checkout page hooks are described here.

In case you are looking for a plugin – there are a lot of plugins over there but I do not recommend most of them. If you are not a coder, maybe it will be a better solution to ask my help to create this functionality.

My example:

Upsell / cross sell checkbox in WooCommerce checkout

Step 1. Add a checkbox

Ok, you can use woocommerce_form_field() function here but because of the weird required parameter it adds "(optional)" text after the checkbox label and I definitely do not want it.

Of course, you can str_replace() the "(optional)" text with woocommerce_form_field_checkbox hook for example, but let’s keep things simple.

add_action( 'woocommerce_review_order_before_submit', 'misha_checkbox_before_button' );
 
function misha_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 href="#" target="_blank" rel="noopener noreferrer">my WooCommerce course</a> with 90% discount – just $500!</span>
		</label>
	</p>';
 
}

I copied most of the classes from "Terms and Conditions" checkbox, definitely we do not need some of them. The main attribute is name="misha_upsell".

Step 2. Add a product to the Order before Payment

Now, once the above checkbox is checked, we have to add a certain product to the order but we have to do it after the order is submitted and before processing payment. I found the only hook woocommerce_checkout_order_processed which fits our needs.

add_action( 'woocommerce_checkout_order_processed', 'misha_upsell_something', 9, 3 );
 
function misha_upsell_something( $order_id, $posted_data, $order ) {
 
	if( isset( $_REQUEST['misha_upsell'] ) && $_REQUEST['misha_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 an experimental feature and I haven’t tested it a lot, so if you have any questions or issues with it, let’s figure it out together in comments 👇

More about WooCommerce Checkout ?

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 10 yrs of experience.

Need some custom developer help? Let me know

Follow Misha

Need some help with WooCommerce?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Comments — 2

Leave a comment

php js HTML CSS Code