New Ask Jilt question! This question comes from Yuta:

My customers seem to find additional products in the “related products” section to buy, but not everyone scrolls down to find them. I wanted to move these up on the page in the sidebar, but when I put the related product shortcode in a widget, nothing happens. Is there a way to make it work?

Absolutely. By default, WooCommerce will display a list of related items at the bottom of the product page, below the main product description.

WooCommerce also has a [related_products] shortcode built in that lets you output the list of related products, determine the maximum number of related products to output, and how many columns should be shown. We can use this to output related products in a different place. You can do something like this:

[related_products per_page="3"]

to output related items for the current product. However, When you put this into a text widget, nothing will happen:

This is due to the way WordPress handles text widgets by default. They will always output the text you enter directly, and will not expand shortcodes here as a result.

With that said, we can get around this pretty easily by forcing text widgets to expand shortcodes instead of outputting the text exactly as we’ve entered it. Be sure you’re familiar with how to add custom code to your site to do this — you can add a small code snippet to expand shortcodes in text widgets:

// Let text widgets expand shortcodes
add_filter( 'widget_text', 'do_shortcode' );

Now instead of outputting my text, the shortcode is expanded to show my related products.

The only thing left may be to adjust the CSS of the related products to fix the column widths.

While this does a pretty good job of outputting related products a bit higher up on the page, it will also leave them at the bottom of the product description as well.

Since this is a pretty simple problem to solve, and I couldn’t find another widget for this, I build a custom widget to handle this instead.

If we turn this into a real widget, we can determine when the widget is active and use it to remove the original related products display, giving us a simplified product page in the process. This related products widget will only be shown on product pages, and will output the related items for that product. On other pages, it will be hidden.

If you want to learn more about building widgets, check out this tutorial on creating simple widget. You can also view the code for my custom widget, and click “Download Zip” in the top right to download a zip file of this code that you can install as a plugin (upload the zip to your site the same way you upload other plugins — you may want to rename it first).

Once you have this code installed as a plugin, you’ll now see a dedicated “WooCommerce Related Products” widget in your store. This widget will do what the text widget in our first section did, but with upgrades 🙂

When this widget is active, it will output related products, but it will also automatically

• remove the original related products display from the bottom of product pages,
• adjust the number of columns that related products are shown in, and
• tweak the CSS for related products shown in this widget to optimum display.

Now your related products can be displayed in your widget area without adding custom code to modify text widgets or adding additional CSS to your store. You can view or download the widget plugin here.

Good luck Yuta 🙂