Change no of columns in catery

Hi Support Team,

I want to change the no of columns on the category page from 3 into 4 (or maybe 5 and found a topic for Sydney Pro with these codes:

In function.php add

add_filter(‘loop_shop_columns’, ‘loop_columns’);
if (!function_exists(‘loop_columns’)) {
function loop_columns() {
return 4;
}
}

ass addtional CSS:

@media only screen and (min-width: 769px){

.woocommerce .content-area ul.products li.product,
.woocommerce-page .content-area ul.products li.product {
width: 22.12% !important;
}

}

However this does not work for Talon Pro. Colomns are resized but there are still 3 items (with empty space at the right for the 4th item. See www.zaaldesign.nl/kf

Can you help me?

Thanks & regards,
Jan Zaal

Hello Jan,

Just replace your css code with this one:

@media only screen and (min-width: 769px){
    .woocommerce .content-area ul.products li.product,
    .woocommerce-page .content-area ul.products li.product {
        width: 22.95% !important;clear: none;
    }

}

and you should have 4 columns like in the screenshot https://www.screencast.com/t/qChdYEKis

Best Regards!

Thanks Dimik,

Works ok on category pages but I would like the 4 colums on “related products” section on product page as well. Can you help me with the css code?

Thanks & regards,
Jan

Hi Jan,

Can you please share a link to a product where you have 4 related products, and I can then try to generate css code for that part.

Regards

Hi Dimik,

I have not made related products myself because the theme generates these automaticaly but shows 3 related products only. I have found below code in woocommerce docs to change the number of related products output:

Blockquote

/**

  • 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;

Blockquote

But when I paste this code in Talon Pro Child’s function.php I get this error message

Blockquote

Communication with the site is not possible to check for errors, the PHP adjustment has been reversed. The PHP file change must be changed in another way, for example by using SFTP.

Blockquote

I have tried to add the code by FTP but cannot get access to the site anymore. Removed the code and could open the site.

What can I do now?

Hope you can help me.

Regards,
Jan

Hi Jan,

Glad to hear that you managed to remove that code, since website is working now. Regarding error which you have encountered, it is probably because you have errors in that code. some quotations are incorrect and function jk_related_products_args is missing closing curly brace.

If you have configured upsells products for each product item https://www.screencast.com/t/Vabj8oOY6Yx , you should be able to limit display to 4 items with this function:

/** Change number of upsells in single prodict posts
*  Set the first number to how many total and the second number to how many rows.
*/
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_upsells', 15 );
 
    if ( ! function_exists( 'woocommerce_output_upsells' ) ) {
        function woocommerce_output_upsells() {
        	woocommerce_upsell_display( 4,4 ); // Display 3 products in 1 row
    }
}

Best Regards!

Yes, and for related products, this is code which you need to use:

/**
 * WooCommerce Extra Feature
 * --------------------------
 *
 * Change number of related products on product page
 * Set your own value for 'posts_per_page'
 *
 */
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'] = 4; // arranged in 2 columns
	return $args;
}

and in addition to that code, you also need css code below:

section.related.products .columns-4 .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    width: 23%;
}

Best Regards!

Hi Dimik,

Sorry but this code doens not work. Pls. have a look add: www.zaaldesign.nl/kf

Hope you can help.

Regards,
Jan

Hi Dimik,

Pls. note that the site has been moved to the final location and is now visible on: www.korenfietsen.nl.

Hope you have a solution to show 4 related products i.o.3.

Thanks in advance,
Jan

Hi Jan,

I have already tested both codes and they are working just fine. With second code for related products, when placed inside functions.php file https://www.screencast.com/t/tQe6awxD it will set related products to 4 https://www.screencast.com/t/Lg0cO2PlfwH and with mentioned css code you will be able to organize them in one row https://www.screencast.com/t/mOCRMWFWVh

On your installation I don’t see class for 4 columns https://www.screencast.com/t/ThHghydAd , so it could be that some other code is messing with this one so you can try with parent theme. Other then that I can’t suggest anything else.

Best Regards!