New Ask Sell with WP 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:


WooCommerce related products text widget

 
WooCommerce related products text widget not expanded

Widget does not expand


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.

WooCommerce related products in text widget

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.

How to Create a WooCommerce Related Products Widget

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 πŸ™‚

WooCommerce Related Products widget

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.


WooCommerce Related Products regular display

Regular Display



WooCommerce Related Products widget display

Widget 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 πŸ™‚

Articles you may also like:

Posted by Beka Rice

Beka Rice manages the direction of Sell with WP content and writes or edits most of our articles to share her interests in eCommerce. Or she just writes as an excuse to spend more time jamming out to anything from The Clash to Lady Gaga. Who knows.

5 Comments

  1. Hi Beka
    I don’t seem to be able to get this to work. My product page displays my default sidebar (which has a Facebook feed) and I don’t seem to be able to tell this page to show the Shop Sidebar I’ve created using the Simple Page Sidebars plugin. On my checkout and basket pages I’ve been able to assign the Shop Sidebar to them – but nothing appears in this sidebar. I only have 2 products loaded (while I’m checking what works) and I’ve created manual cross-sell links to each of them.
    Any help would be appreciated.
    thanks
    Alan

    Reply

  2. Beka,

    Help. I used your plugin, the part that removes the related from the bottom didnt work. I am curious to just use a simple text list instead of image thumbs.. can u help if u see this?

    Reply

  3. Hi,

    This has only half worked on my site.

    The related products are still displayed at the bottom of the page… any suggestions?

    Reply

  4. It works on My site. Love it! But, why dont you put it on thΓ© WordPress repository?

    Reply

  5. Hi, Just found your plugin thank you.
    I got the widget working in sidebar with 3 related products only.
    How do i also add “You may also like… : below the descriptions as in your .jpg example please?

    Reply

Leave a reply

Your email address will not be published. Required fields are marked *