woocommerce do not display related products

WooCommerce Docs

Documentation, Reference Materials, and Tutorials for your WooCommerce products

Set up Related Products, Up-Sells and Cross-Sells

Products can be Related to each other in three ways: Up-Sells, Cross-Sells or by having the same tags or categories.

To add an up-sell or cross-sell to a product:

  1. Go to WooCommerce > Products and select the product on which you’d like to show an up-sell or cross-sell.
  2. Scroll down to the Product Data panel.
  3. Select the Linked Products tab in the left menu.
  4. Add the product you wish to link to by searching for it.
  5. Update.

Up-Sells ↑ Back to top

Up-sells are products that you recommend instead of the currently viewed product.

They are typically products that are more profitable or better quality or more expensive. Depending on your theme template, these products display on the single product page underneath the product’s description.

  • Up-sells (user defined) show on the product page.

Product Up-Sells

Cross-Sells ↑ Back to top

Cross-sells are products that you promote in the cart, based on the current product.

They are typically complementary items. For example, if you are selling a laptop, cross-sells might be a protective case or stickers or a special adapter. Or if you’re selling a ninja t-shirt, they could be a ninja hoodie and ninja socks.

Depending on your theme template, they display on the cart page underneath the cart products table with a thumbnail image.

  • Cross-sells (user defined) show on the cart page.

Cross Sells

Related Products ↑ Back to top

Related Products is a section on some templates that pulls products from your store that share the same tags or categories as the current product.

These products cannot be specified in the admin, but can be influenced by grouping similar products in the same category or by using the same tags.

  • Related products (automatic) also show on the product page.

Related Products

How to move the WooCommerce Related Products Display

Updated November 25, 2018

Read Time: 3 minutes

Share this

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:

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

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:

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.

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 ��

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.

Your WooCommerce store can drive additional revenue by improving your email marketing. Try Jilt for free to increase sales with abandoned cart recovery emails, post-purchase follow-ups, and more!

Related content

  • Posted in: Ask Sell with WP, How-To, J
  • Tagged in: WooCommerce

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

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

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?

This has only half worked on my site.

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

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

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?

Support » Plugin: WooCommerce » Woocommerce Related Products display

Woocommerce Related Products display

I am only seeing 3 product columns in my Related Products instead of 4.
The rest of my store is 4 columns of products.

I also want them to SHOW in the Related Products similar products (not different) ones on this area … Mine are not showing the same type of Category in the Related Products which I would assume it would pickup from the same Category

How do I fix this ?

In the Woocommerce document, it says “These products cannot be specified in the admin, but can be influenced by grouping similar products in the same category or by using the same tags.”

So why do mine not show up other categories from the same Category ?

Eg If I’ve click on a product in the Product Brand “Covergirl” then the Related Products in my opinion should show other Products in the “covergirl” Category Brand.

It shouldn’t show another Brand in there completely as it is not the same grouping

It is not for some reason.

My theme is Storefront

Automattic Happiness Engineer

What is your site URL?

Hi, site it not yet live, nearly live.

Automattic Happiness Engineer

For the snippet to change the number of columns, could you please paste here what you used? Did you change the numbers that are in the example to fit your use case?

As for the same categories not showing in the Related Products section, typically this is by categories. You mentioned Brands a few times – do you mean that you are using another plugin for brands (i.e. https://woocommerce.com/products/brands/) or one of the categories is Brands, and products under Brands category does not show in Related Products?

Hi, sorry clarification. My customer has Brands Category and 30 Brand names under that category.

Therefore when a client clicks on say Maybelline Brand name and clicks on an actual product to view more details about it on the single page, then underneath you have the Related Products. How does the Related Products work ?

Does it pick Related Products from that Top Category called Brands ?

The Snipped in functions.php for the Shop columns for entire Woocommerce site:

/*adjustment for 4 shop columns*/
add_filter( ‘storefront_loop_columns’, function() < return 4; >); //change shop colunns//

Not sure HOW to change the Related products to 4 Products showing as it is only showing 3.

This was the SNIPPED I used in functions.php changed to 4 related products is all I want (not 3) and 4 columns

add_filter( ‘woocommerce_output_related_products_args’, ‘jk_related_products_args’ );
function jk_related_products_args( $args ) <
$args[‘posts_per_page’] = 4; // 4 related products
$args[‘columns’] = 4; // arranged in 4 columns
return $args;
>

Automattic Happiness Engineer

This explains how related products are chosen:

For the number of columns, you don’t need that first snippet. Instead in the Customizer under Appearance > Customize, in the WooCommerce > Product Catalog section, you can choose the number of products and rows displayed. Just set that to four there.

For the number of related products that snippet is missing the first part as shown here:

Hope that helps!

Are you referring to the Theme Customiser firstly ? As I have no Appearance/Customise in there.

Then I look under Woocommerce/ Settings / Products and can’t find it either.

Automattic Happiness Engineer

Customizer can be accessed here, as shown in screenshot links:

Hi, That doesn’t come up on my screen under the Storefront child theme in Customiser.

Is it because I haven’t updated to the latest version or that shouldn’t matter.

Automattic Happiness Engineer

Yes, that only appears in WooCommerce 3.3.3 or above. You’ll need to be on that or preferably the latest 3.3.5 to see that option.

I have a number of formatting issues when I try to upgrade to Woocommerce 3.3.3 therefore I have left it on the safe stable version for now with the amount of plugins I have on this client site.

I will be upgrading it later.

So back to my issue I Had added in the coding in functions.php

add_filter( ‘woocommerce_output_related_products_args’, ‘jk_related_products_args’ );
function jk_related_products_args( $args ) <
$args[‘posts_per_page’] = 4; // 4 related products
$args[‘columns’] = 4; // arranged in 2 columns
return $args;
>

It still only shows 3 columns on the Single Products Page “Related Products” area.

add_filter( ‘woocommerce_output_related_products_args’, ‘jk_related_products_args’ );
function jk_related_products_args( $args ) <
$args[‘posts_per_page’] = 4; // 4 related products
$args[‘columns’] = 4; // arranged in 4 columns
return $args;
>

Automattic Happiness Engineer

It looks like you’re missing the global at the start. I’ve tested this and it definitely works:

Thanks for all the help so far.
I feel like I’m going completely mad !

So that function was correct in my end just pasted it incorrectly in here. Still only showing 3 columns.

I am using Storefront child theme also so you know.

I think maybe I have some coding somewhere else that is causing this issue with only 3 products showing in the Related Products area. My main Product pages have a left sidebar and content area of 75% width.

Maybe something there is causing the issue ?

Just so you know, I have left sidebar as displayed: none; on the Single Page ONLY .. All other pages have the left sidebar Category menu.

Previously someone had suggested going to the Customizer under Appearance > Customize, in the WooCommerce > Product Catalog section, you can choose the number of products and rows displayed. Just set that to four there.

I have gone in there also (upgraded) and I see “Shop Page Display” and “Category Display” and “Default Product SOrting”, there is nowhere in there that says that I can choose the number of products and rows displayed, nothing at all.
I have Version 3.3.4 Wopcommerce now.

ALSO my main functions.php has coding on the top :
/*adjustment for 4 shop columns*/
add_filter( ‘storefront_loop_columns’, function() < return 4; >); //change shop colunns//

I’m assuming this is not causing an issue. This allows for 4 products throughout the site but not reflecting in Related Products.

Leave a Reply

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