Would you like to have 100% control over your WooCommerce Related Products?
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.
How to customize WooCommerce Related Products (Video walkthrough)
In the article I’m going to show you how to do the following (click on the links below to go to each section)
- How to change what products to show in WooCommerce related products
- How to hide WooCommerce related products
- How to change the number of WooCommerce related products
- How to change WooCommerce related products title
- How to change WooCommerce related products columns
- How to change WooCommerce related products image size
- How to add a WooCommerce related products carousel
- How to create a totally unique WooCommerce Related Products section
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!
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.
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 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.
How to add a WooCommerce Related Products carousel
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 :)