Moving WooCommerce Upsells on Product Pages

Your WooCommerce products can have upsells assigned to them so that you can encourage customers to buy different versions or more expensive products while visiting your product page. You can add these under Product Data > Linked Products while editing a product, and the upsells will be shown at the end of your product description.

However, most times this is at the bottom of your product page. What if customers don’t end up scrolling all of the way? They won’t see your more expensive or profitable products that can drive increased revenue, as they could add the current product to the cart without ever seeing upsells.

To combat this, you could move the location of your upsells on the product page. The easiest way to move upsells is to put them in a widget, then remove them from the product page if the widget is used, so we’ll take a look at using this method to move upsells first.

Create a WooCommerce Upsells Widget

In this example, we’ll use a widget to show upsells, then hide the original upsells on the product page if the widget is active. If you want some more in-depth details on creating widgets, we’ve written two tutorials in our “Learn to build WooCommerce plugins” series:

• Create a simple WooCommerce widget
• Create a smart WooCommerce widget

Since those two articles focus on the details of building a widget, we’ll only focus on the relevant functions to our upsells here.

First, the widget function will need to output the upsells when it’s used. This is definitely easy enough to do, as WooCommerce includes a template function for this: woocommerce_upsell_display()

public function widget( $args, $instance ) {
    
    // Only show this if we're looking at a product page
    if ( ! is_singular( 'product' ) ) {
        return;
    }

    global $product;

    // bail if the product has no upsells before we output anything
    if ( ! $product->get_upsells() ) {
        return;
    }   
        
    // get the widget configuration
    $title = $instance['title'];
        
    echo $args['before_widget'];
        
    if ( $title ) {
        echo $args['before_title'] . wp_kses_post( $title ) . $args['after_title'];
    }
        
    // Show the product's upsells
    woocommerce_upsell_display();
        
    echo $args['after_widget'];
}

That’s the meat of our widget already 🙂 Now we have to remove the original upsell display if this widget is in use. The is_active_widget() check is our friend here, and we can remove the upsells from the bottom of the product page if this widget is in use.

public function remove_product_upsells() {
    if ( is_singular( 'product' ) && is_active_widget( false, false, $this->id_base ) ) {
        remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
    }
}

That’s the basic gist of our upsells widget: remove the old upsells, and add our new ones where we want them. However, I’ll take two final steps to clean up the display of my upsells widget.

First, I’ll modify the number of columns in the upsells display to use two columns:

public function change_upsell_columns( $args ) {
  if ( is_singular( 'product' ) && is_active_widget( false, false, $this->id_base ) ) {
    $args['columns'] = 2;
  }
  return $args;
}

Second, I’ll add some CSS to adjust the column widths appropriately so they take up the full widget space without looking smooshed.

public function modify_product_upsells_styles() {
  if ( is_singular( 'product' ) && is_active_widget( false, false, $this->id_base ) ) {
    echo '<style>
      .woocommerce .widget_wc_upsells ul.products li.product,
      .woocommerce-page .widget_wc_upsells ul.products li.product {
        width: 48%;
        margin-top: 1em;
      }
    </style>';
  }
}

Now my upsells will also look like they belong there when used in a widget, as styles will be adjusted for the widget space.

You can view the complete code here — click “Download Zip” and install this as a plugin if desired, or checkout the gist to modify it further for your own plugin.

The Results: A WooCommerce Upsells Widget

Let’s have a look at a comparison. When the upsells are originally displayed, they’ll be shown below the main description.

Upsells: regular display

Now I’ll install my upsells widget plugin, and add it to my sidebar.

New Upsells widget

Now that this widget is active, my upsells are removed from the bottom of the product page, and displayed in 2 columns in the sidebar instead.

Upsells in widget

Create an Upsells Shortcode

You could also create an upsells shortcode, but there’s no easy way to know if a shortcode is “active” like there is with a widget.

As a result, we’ll go more in-depth with this next week in a for-developers tutorial, as it makes a good example of using a class member in a plugin. This would let you use the shortcode (for example) in a new product tab or elsewhere on the product page.