Upselling is an effective strategy for increasing your average order value by offering additional products or services that complement the items in a customer’s cart. While WooCommerce allows upselling on the product page, you can take it a step further by adding an upsell area directly to the checkout page, where customers are in the final stages of their purchase.
In this guide, we’ll show you how to add an upsell section to the WooCommerce checkout page, allowing you to display relevant products or promotions without using a plugin. This method gives you complete control over the upsell layout and functionality. As always, remember to use a child theme to ensure your changes are safe from theme updates.
Why Add an Upsell Section to the Checkout Page?
An upsell area at the checkout page is beneficial because:
- Higher Conversion Rate: Customers who have already committed to a purchase are more likely to add additional items.
- Increase Average Order Value: Strategically placing related products or bundles can encourage customers to spend more.
- Last-Minute Offers: Offer time-sensitive discounts or promotions that could lead to impulse buys.
Custom Code to Add an Upsell Area to Checkout Page
To add an upsell section at checkout, we’ll modify the WooCommerce checkout template to display suggested products. You can use the following code snippet by adding it to your theme’s functions.php file or, better yet, in a child theme.
Step 1: Displaying Upsell Products at Checkout
Here’s how you can create an upsell area that displays products at the checkout page:
/*
* Snippet: How to Add an Upsell Area at WooCommerce Checkout Page – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1540
* Tested with WooCommerce 10.7.0
* "This function displays an upsell section on the WooCommerce checkout page"
*/
function wcsuccess_add_upsell_to_checkout() {
if ( is_checkout() ) {
echo '<div id="wcsuccess-upsell-area" style="margin-top: 30px; padding: 20px; border: 1px solid #ddd;">';
echo '<h3>You Might Also Like</h3>';
// Query for upsell products
$args = array(
'posts_per_page' => 3,
'post_type' => 'product',
'orderby' => 'rand',
'meta_query' => array(
array(
'key' => '_stock_status',
'value' => 'instock'
)
)
);
$upsell_products = new WP_Query( $args );
if ( $upsell_products->have_posts() ) {
echo '<ul class="products">';
while ( $upsell_products->have_posts() ) {
$upsell_products->the_post();
wc_get_template_part( 'content', 'product' );
}
echo '</ul>';
} else {
echo '<p>No recommended products available at the moment.</p>';
}
wp_reset_postdata();
echo '</div>';
}
}
add_action( 'woocommerce_review_order_before_submit', 'wcsuccess_add_upsell_to_checkout', 10 );How the Code Works
- is_checkout() Function: The upsell section is only displayed on the checkout page, ensuring it doesn’t interfere with other pages.
- Product Query: The code uses
WP_Queryto select up to three random products that are currently in stock. You can modify the number of products by changing theposts_per_pagevalue. - Display Products: WooCommerce’s built-in template part,
content-product, is used to display each product in a familiar format.
Step 2: Adding a Custom Button in the Upsell Area
To further enhance the upsell area, you might want to include a button that adds the upsell product to the cart. You can modify the above code to include an “Add to Cart” button for each product.
/*
* Snippet: How to Add an Upsell Area at WooCommerce Checkout Page – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1540
* Tested with WooCommerce 10.7.0
* "This function adds an add to cart button in the upsell section"
*/
function wcsuccess_add_upsell_with_cart_button_to_checkout() {
if ( is_checkout() ) {
echo '<div id="wcsuccess-upsell-area" style="margin-top: 30px; padding: 20px; border: 1px solid #ddd;">';
echo '<h3>Recommended Products</h3>';
// Query for upsell products
$args = array(
'posts_per_page' => 3,
'post_type' => 'product',
'orderby' => 'rand',
'meta_query' => array(
array(
'key' => '_stock_status',
'value' => 'instock'
)
)
);
$upsell_products = new WP_Query( $args );
if ( $upsell_products->have_posts() ) {
echo '<ul class="products">';
while ( $upsell_products->have_posts() ) {
$upsell_products->the_post();
wc_get_template_part( 'content', 'product' );
echo '<a href="' . esc_url( wc_get_cart_url() ) . '?add-to-cart=' . get_the_ID() . '" class="button add-to-cart">Add to Cart</a>';
}
echo '</ul>';
} else {
echo '<p>No upsell products available at the moment.</p>';
}
wp_reset_postdata();
echo '</div>';
}
}
add_action( 'woocommerce_review_order_before_submit', 'wcsuccess_add_upsell_with_cart_button_to_checkout', 10 );
How This Addition Works
- Add to Cart Button: Each product in the upsell section now includes an “Add to Cart” button that, when clicked, adds the product to the customer’s cart and refreshes the page.
- Custom Button Style: The button inherits WooCommerce’s button styling, but you can easily customise it further with additional CSS.
Step 3: Using Shortcodes in the Upsell Area
If you want to display dynamic content using shortcodes, such as a promotion or product bundle, you can use the do_shortcode() function. Here’s how to modify the upsell area to include a shortcode:
/*
* Snippet: How to Add an Upsell Area at WooCommerce Checkout Page – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1540
* Tested with WooCommerce 10.7.0
* "This function displays a shortcode in the upsell area"
*/
function wcsuccess_upsell_with_shortcode_in_checkout() {
if ( is_checkout() ) {
echo '<div id="wcsuccess-upsell-area" style="margin-top: 30px; padding: 20px; border: 1px solid #ddd;">';
echo '<h3>Special Offers</h3>';
// Display a shortcode inside the upsell area
echo do_shortcode('[your_custom_shortcode]');
echo '</div>';
}
}
add_action( 'woocommerce_review_order_before_submit', 'wcsuccess_upsell_with_shortcode_in_checkout', 10 );
Replace [your_custom_shortcode] with the actual shortcode you want to display. This could be a discount code, product list, or any other dynamic content supported by shortcodes in WordPress.
Best Use Cases for an Upsell Area at Checkout
- Offer Related Products: Display products that are complementary to items already in the cart, such as accessories or bundles.
- Show Limited-Time Offers: Encourage customers to add discounted or time-sensitive offers just before completing their purchase.
- Highlight Top-Selling Products: Promote popular products to customers at the checkout stage, where they’re more likely to make impulse buys.
Conclusion
Adding an upsell area to the WooCommerce checkout page is a smart strategy for increasing your store’s revenue. By using the provided custom code, you can display relevant products or promotions directly at checkout, giving your customers an easy way to enhance their order.
Always test your changes in a staging environment before deploying them live, and make sure to use a child theme to avoid losing your customisations during theme updates. For more WooCommerce tips and tricks, explore our WooCommerce Visual Hooks Guide and wp-config generator for further customisation options.
I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.
Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science. I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.
Stay In Touch
