Enhance your WooCommerce thank you page by displaying cross-sell products and encouraging customers to explore additional items related to their recent purchase. This customization adds value to the post-purchase experience, potentially increasing sales and customer satisfaction. Follow the steps below to integrate cross-sell products seamlessly into your WooCommerce thank you page. Make sure you have cross-sells set up against your products, and this code will show all of them at the bottom of the thank you page. The positioning of the cross-sell product loop can be changed by changing the priority in the very first function (we have set it to 10 in this example).
/**
* Snippet Name: Add cross-sell products on the thank you page
* Snippet Author: wpsnippets.dev
*/
// This function checks cross sell product ids and add them on the thank you page
function wps_display_cross_sells_on_thankyou( $order_id ) {
$cross_sell_ids = array();
$order = wc_get_order( $order_id );
$items = $order->get_items();
foreach ( $items as $item ) {
if( $item_cross_sell_ids = get_post_meta( $item['product_id'], '_crosssell_ids', true ) ) {
$cross_sell_ids = array_unique( array_merge( $item_cross_sell_ids, $cross_sell_ids ));
}
}
if ( ! empty( $cross_sell_ids ) ) {
$cross_sell_query = new WP_Query( array(
'post_type' => array( 'product', 'product_variation' ),
'post_status' => 'publish',
'post__in' => $cross_sell_ids,
'orderby' => 'post__in',
'posts_per_page' => -1,
) );
if ( $cross_sell_query->have_posts() ) {
echo '<section class = "wps-cross-sells">';
echo '<h2>Recommended for You</h2>';
echo '<ul class="products">';
while ( $cross_sell_query->have_posts() ) : $cross_sell_query->the_post();
wc_get_template_part( 'content', 'product' );
endwhile;
echo '</ul>';
echo '</section>';
wp_reset_postdata();
}
}
}
add_action( 'woocommerce_thankyou', 'wps_display_cross_sells_on_thankyou', 10, 1 );
Code Explanation
- This code snippet adds cross-sell products to the WooCommerce thank you page, enhancing the post-purchase experience for customers. It retrieves cross-sell product IDs based on items in the customer’s order and queries these products to display them on the thank you page. By showcasing relevant products, this customization encourages additional purchases and increases customer satisfaction.
- This post-purchase customization uses the
woocommerce_thankyouhook to execute thedisplay_cross_sells_on_thankyoufunction. Within this function, it retrieves product IDs from the customer’s order and queries the corresponding cross-sell products. Finally, it outputs the cross-sell products with appropriate HTML markup for display on the thank you page.