Bits & Babble

A blog in development.

Change the Number of Related Products in Woocommerce with Hooks

October 18, 2013  

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 );
}

// 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;
}

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

7 Comments

By SPENCER SOKOL
  • About
  • Twitter
  • Studio 27

Categories

  • Alloy
  • Android
  • Appcelerator Titanium
  • Babble
  • Debugging
  • Genesis
  • iOS
  • s2Member
  • Woocommerce
  • Wordpress

About Spencer Sokol

Spencer co-founded Studio 27, a small web and application design and development company in Indianapolis. He has spent many years in both the development and testing side of the software industry, and generally avoids talking to people face to face.

Comments

  1. John Lion says

    March 25, 2014 at 7:33 am

    Thanks spencer, I’m just in the middle of customising woo commerce for the first time too. Once I got my head round the way the they’ve structured their files the first evening it starts to get exciting. I’m looking forward to leaning more.

    I’d tried something similar to your code above provided in the woo docs but creating your own function is great, I just missing the no of items per row 🙂

    Cheers

    Reply
    • Spencer Sokol says

      March 27, 2014 at 2:14 am

      Yeah, the templating structure seemed a little unorthodox. I need to get back in there and start playing around again.

      Reply
  2. Z says

    June 6, 2014 at 11:27 am

    Thanks Spencer, I’ve been trying out other codes to make this work but your method was perfect!

    Reply
  3. Javier says

    March 3, 2015 at 1:13 pm

    Same case here. I need more than just 2 related products. I change my functions.php in order to get 6 related products in just 1 row but is showing me 3 products in 2 rows.
    What can I do?
    Thanks.
    http://www.finessefinejewelry.com/shop/?product=flower-ring-with-diamonds

    Reply
  4. Spencer Sokol says

    March 3, 2015 at 1:27 pm

    It looks like the woocommerce_related_products function has changed it’s arguments. Take a look here.

    Reply
    • Javier says

      March 3, 2015 at 2:36 pm

      Well, I change it but now there are just two products in one row again…

      1063: 'posts_per_page' => 6,
      1064: 'columns' => 1,
      1065: 'orderby' => 'rand'

      Reply
  5. Zee says

    May 27, 2015 at 10:24 am

    Thanks Spencer! No matter how many times I deal with WooCommerce, the customisation always gives me a headache!

    Reply

Leave a Reply Cancel reply

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

  • About
  • Indianapolis Design & Development
Copyright © 2022 Spencer Sokol

Copyright © 2022 · Bits and Babble on Genesis Framework · WordPress · Log in