How to change WooCommerce Related Products

Would you like to have 100% control over your WooCommerce Related Products?

In the article I’m going to show you how to do the following (click on the links below to go to each section)

WooCommerce related products normally show up automatically under your WooCommerce. Single Product, based on your WooCommerce Product categories or tags (read more here).

However it’s much better if you can control your related products, both in what products you show and the layout.

Primarily I’m going to be using our WooBuilder Blocks plugin (free trial available) to customize the WooCommerce related products section. WooBuilder Blocks lets you customize the WooCommerce Product Page using the WordPress Block Editor (Gutenberg).

I’m also going to be using WooCommerce Blocks (now part of WooCommerce ) and our Storefront Blocks plugin (free trial available) for a cool looking related products carousel.

Let’s dive in!

Video walkthrough

How to change what products to show in WooCommerce Related Products

Normally you can’t really control what products to show in the related products section, as WooCommerce will automatically add related products for you, based on the product categories and tags you have set.

See below

change woocommerce related products

However with a combination of WooBuilder Blocks and WooCommerce Blocks you can handpick what WooCommerce products to show.

In the video below you’ll see how the WooCommerce product page has been designed with our WooBuilder Blocks plugin and then the related products are chosen by using the WooCommerce Blocks plugin.

I used the ‘hand picked’ WooCommerce Block to select the products and then change the columns from 3 to 4 in the right hand options sidebar.

How to hide WooCommerce Related Products

Sometimes you might want a WooCommerce product layout that doesn’t show the related products section.

This is very easy with WooBuilder Blocks.

All you have to do is not include the Related Products block that comes with WooBuilder Blocks.

How to change WooCommerce Related Products 1
If you don’t want to show related products, simply don’t add the block

How to change the number of WooCommerce Related Products to show

Sometimes you might want to show more or less related WooCommerce products.

This is very simple with a combination of our WooBuilder Blocks plugin and WooCommerce Blocks.

In the video below you’ll see I’ve added 6 related products.

I also changed the number of WooCommerce related products columns and removed the add to cart buttons.

How to change the WooCommerce Related Products title

Sometimes you’ll want to change to the title of related products.

This is really easy to do with our WooBuilder Blocks plugin.

You can change the title to whatever you like.

Here’s a video that shows you how.

How to change WooCommerce Related Products columns

Sometimes you might want to change the number of WooCommerce related products columns.

Again, because we are using the WooBuilder Blocks and WooCommerce Blocks, this is really easy.

Here’s a video that shows you how to do it.

In this example you’ll see me change the number of WooCommerce related columns from four to three.

For this I’m going to use our WooBuilder Blocks plugin and our Storefront Blocks plugin.

I’m using WooBuilder Blocks to design the product using the WordPress Block editor (Gutenberg) and I’m using Storefront Blocks to add the WooCommerce Related Products Carousel.

Here’s a video

How to change the WooCommerce Related Products image size

The easies way to change the WooCommerce Related Products image size is to change the number of columns.

This is easily done using a combination of our WooBuilder Blocks plugin and WooCommerce Blocks.

Here’s a video

How to create a totally unique WooCommerce Related Products layout

If you really want to push the envelope then you can.

And because we are using the WooBuilder Blocks plugin that let’s use the WordPress Block Editor to layout our WooCommerce Product Pages, then anything is possible.

We can use any Gutenberg Block we like within our WooCommerce Single Product page, and our WooCommerce related products sections.

In the video below you’ll see me adding a Gutenberg block called the ‘Square Grid Block’.

The Square Grid Block is part of our Storefront Blocks plugin.

Here’s the video.

So that’s how you can get complete control over your WooCommerce Related Products section.

If you have any questions, please leave them in the comments below.

Thanks for taking the time to Pootle :)

Jamie

Leave a Comment

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

Scroll to Top