Change the Number of Related Products in Woocommerce with Hooks

I had a recent WordPress project that involved custom theming the Woocommerce plugin. And while I’m not deep into its functionality, I’m impressed with what I’ve seen so far.

One of the first things I needed to do was change the number of related products that show up by default. There are a number of ways you can accomplish this. I chose to override the hooks by adding a woocommerce.php template file in my child theme.

1
2
3
4
5
6
7

// Change the number of related products displayed
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
add_action( 'woocommerce_after_single_product_summary', 'child_after_single_product_summary', 20 );
 
function child_after_single_product_summary() {
  woocommerce_related_products( 4, 4 );
}

It’s fairly straight-forward. First, we remove the woocommerce_output_related_products function from the woocommerce_after_single_product_summary hook, making sure to specify the proper priority of 20 to ensure its removal. Second, we add a hook that calls our own function. Our function calls woocommerce_related_products, which does all the work. It takes two parameters: the number of related products to show, and the number of related products per row.

You may have to add some css rules to allow for more items per row. Our above example has four items in a row, so I’ve modified my child theme’s style.css accordingly.

1
2
3
4
5

.woocommerce .related ul li.product,
.woocommerce-page .related ul li.product {
  width: 21% !important;
  height: auto;
}

I’m really not a big fan of !important, but that’s beyond the scope of this post.