How To Show Cross Sell Products In Woocommerce

How To Articles

As an avid user of WooCommerce, I am always looking for ways to enhance the shopping experience for my customers. One effective strategy I have found is to showcase cross-sell products on the product pages. Not only does this help to increase sales, but it also allows me to introduce my customers to other products they may be interested in.

There are several methods you can use to display cross-sell products in WooCommerce, and I’m going to walk you through each one in detail.

Method 1: Using the Cross-Sells Product Field

WooCommerce provides a built-in feature called “Cross-Sells” that allows you to manually assign related products to each product in your store. To get started, simply navigate to the product edit page in your WooCommerce dashboard and scroll down to the “Linked Products” section.

Here, you can search for and select the cross-sell product(s) that you want to display alongside the main product. Once you’ve made your selection, save the changes and the cross-sell products will be visible on the product page.

Method 2: Using a Custom Widget

If you prefer a more automated approach, you can use a custom widget to display cross-sell products. There are several WooCommerce compatible plugins available that offer this functionality.

One popular plugin is “WooCommerce Cross-Sell Products Widget”. After installing and activating the plugin, you can navigate to the “Widgets” section in your WordPress dashboard. Look for the widget provided by the plugin and drag it into the desired widget area on your website.

From there, you can configure the widget settings to determine how many cross-sell products to display, the order in which they appear, and more. Once you’ve made your adjustments, save the changes and the widget will start displaying cross-sell products on your product pages.

Method 3: Using a Custom Code Snippet

If you’re comfortable with coding, you can also use a custom code snippet to display cross-sell products. This method gives you more control over the appearance and behavior of the cross-sell section.

First, you’ll need to locate the template file responsible for rendering the product page in your active theme. This file is typically named “single-product.php” or “content-single-product.php”. Open the file and find the section where you want to display the cross-sell products.

Next, you can use the following code snippet to programmatically retrieve the cross-sell products and display them in the desired format:

$cross_sells = get_post_meta( get_the_ID(), '_crosssell_ids', true );
if ( $cross_sells ) {
echo '<h3>Related Products</h3>';
echo '<ul>';
foreach ( $cross_sells as $cross_sell ) {
$product = wc_get_product( $cross_sell );
echo '<li><a href="' . get_permalink( $cross_sell ) . '">' . $product->get_title() . '</a></li>';
echo '</ul>';

Simply copy and paste this code snippet into the appropriate section of your template file. Save the changes and the cross-sell products will now be displayed on the product page.


Adding cross-sell products to your WooCommerce store is a great way to boost sales and provide a more personalized shopping experience for your customers. Whether you choose to use the built-in Cross-Sells feature, a custom widget, or a custom code snippet, implementing this strategy is sure to have a positive impact on your store’s performance.

I hope you found this article helpful and that you’re excited to start showcasing cross-sell products in your own WooCommerce store. Happy selling!