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.
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
Yeah, the templating structure seemed a little unorthodox. I need to get back in there and start playing around again.
Thanks Spencer, I’ve been trying out other codes to make this work but your method was perfect!
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
It looks like the woocommerce_related_products function has changed it’s arguments. Take a look here.
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'
Thanks Spencer! No matter how many times I deal with WooCommerce, the customisation always gives me a headache!