Skip to content

Instantly share code, notes, and snippets.

@woogist
Last active February 8, 2018 06:24
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save woogist/5975638 to your computer and use it in GitHub Desktop.
Save woogist/5975638 to your computer and use it in GitHub Desktop.
WooCommerce - Change number of related products on product page
<?php
/**
* WooCommerce Extra Feature
* --------------------------
*
* Change number of related products on product page
* Set your own value for 'posts_per_page'
*
*/
function woo_related_products_limit() {
global $product;
$args['posts_per_page'] = 6;
return $args;
}
add_filter( 'woocommerce_output_related_products_args', 'jk_related_products_args' );
function jk_related_products_args( $args ) {
$args['posts_per_page'] = 4; // 4 related products
$args['columns'] = 2; // arranged in 2 columns
return $args;
}
@stuk88
Copy link

stuk88 commented Sep 3, 2013

there is no $related or $orderby vars defined in the function so this function will lead to getting the same products every time.

@ejntaylor
Copy link

Does not seem to work anymore.. Empty related products if this is added.

@ianitararache
Copy link

It works, I've just added it to my theme functions file.
But how can I set the number per rows, because there are 2 per line by default. First one gets "first" CSS class and second "last" CSS class

@michaelgs
Copy link

Help,
Yes the function works but, I agree, it will show the absolute same related products regardless of the main product.
how can we change the code so that I can get three related products in a row and all are different always?

@beamkiller
Copy link

Same problem here. Always the same related products at every product.

I will going to use this code instead:

// Redefine woocommerce_output_related_products()
function woocommerce_output_related_products() {
woocommerce_related_products(4,4);
}

@MatthewARinehart
Copy link

Agreed, the above isn't working as intended.

Thanks, beamkiller, for the fix!

@jessepearson
Copy link

I found the fix mentioned by beamkiller on a couple other sites, but they describe it wrong. They state (4,2) should be 4 products and 2 rows, but it is 4 products and 2 columns (or 2 per row). This led to a bit of frustration on my part, since I wasn't seeing much of a change until I saw in the code the 'first' and 'last' classes being added to the li elements.

@minimaluminium
Copy link

woocommerce_related_products function is now deprecated.

@andrewcuthill
Copy link

@iangster You need to use the woocommerce_output_related_products_args filter

@InGenuitie
Copy link

here is the answer
// Redefine woocommerce_output_related_products()
function woocommerce_output_related_products() {
woocommerce_related_products(4,2); // Display 4 products in rows of 2
}

@jameskoster
Copy link

A better way:

add_filter( 'woocommerce_output_related_products_args', 'jk_related_products_args' );
function jk_related_products_args( $args ) {
$args['posts_per_page']     = 4; // 4 related products
$args['columns']            = 2; // arranged in columns

return $args;
}

@carlosazsilva
Copy link

I can´t seem to make this work. The "posts_per_page" part works, I can control how many related items show up. The "columns" part doesn't work, the related products layout is always in two columns. Any suggestions?

@dingo-d
Copy link

dingo-d commented Sep 29, 2014

This solution doesn't work for me as well...

@magapatalogikaa
Copy link

This does not change the number of columns, just the number of posts. Does anyone have a better solution?

@chrisscottbaker
Copy link

This works. You then have to adjust the size of the image in css so they all fit on the line.

Add this to your custom css section of jetpack or your child theme css.

.woocommerce .related ul li.product, .woocommerce .related ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .upsells.products ul li.product, .woocommerce-page .upsells.products ul.products li.product {
width: 22% !important;
}

@minimaluminium
Copy link

Yes, this code actually works. It adds correct classes which are .first and .last to the list. You have to change the width of element by yourself. For example, if you set 3 columns, the width should be 30.8%.

@mstoic
Copy link

mstoic commented May 28, 2015

Yes the number of elements change, but the number of columns don't. We can control that by CSS though.

Like For 4 Columns:

.woocommerce .related ul li.product {
width: 22% !important;
clear: none;
margin-right: 4%;
}
.woocommerce .related ul li.product:nth-of-type(4n) {
margin-right: 0;
}

@yorgosf
Copy link

yorgosf commented Jul 15, 2015

This code shows always the same products. Any suggestion how to fix it?

@dameer
Copy link

dameer commented Sep 13, 2015

It doesn't make any sense to mess up with styles while there's argument "columns" that should do the job. It just doesn't work, that's all.

@isaac-sermonview
Copy link

Here's a quick and dirty way to get more products on related products:

  1. Make these directories in your child theme:

/woocommerce/single-product

(* if you are new to child themes read dooumentation here: https://codex.wordpress.org/Child_Themes)

  1. Copy the file related.php from this directory:

/wp-content/plugins/woocommerce/templates/single-product

and Paste it into the directory you made in step 1

  1. In the new related.php in your child theme open the file and change this line:
    'posts_per_page' => $posts_per_page //change this var to how many related products appears.

eg. 'post_per_page' => 6;

Hope this works for you guys.

@gtamborero
Copy link

Thanks issac! Works!

@techguydev
Copy link

the easiest and best way I found was by using a plugin called Woocommerce booster!, it works like charm. http://wooassist.com/how-to-change-the-number-of-related-products-in-woocommerce/

@derekobrien
Copy link

derekobrien commented Jun 21, 2017

For me the following worked by setting the priority parameter:

add_filter( 'woocommerce_output_related_products_args', 'cwc_change_number_related_products', 20 );

function cwc_change_number_related_products( $args ) {

$args['posts_per_page'] = 2; // # of related products
$args['columns'] = 2; // # of columns per row
return $args;
}

@markdeldegan
Copy link

Thanks Derek, that did the trick with priority. So, I wanted to change the number of products per row and ended up with this:

/* ADD 4 RELATED PRODUCTS */
add_filter( 'woocommerce_output_related_products_args', 'jk_related_products_args', 20 );
function jk_related_products_args( $args ) {
$args['posts_per_page'] = 4; // 4 related products
$args['columns'] = 4; // arranged in 4 columns
return $args;
}

I figured I'd post it here in case someone else is looking to do the same.

@matbourne
Copy link

+1 for suggesting to add the priority to the add_filter() function. Got it working for me!

add_filter( 'woocommerce_output_related_products_args', 'jk_related_products_args', 20 );

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment