Change number of columns for product categories

Hi, how could I change number of columns in mobile view for product categories carousel? Should I increase values for “data-mobile” or “owl-items-xs-2”. I need to have fours columns in compare with default two ones.

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached. Unfortunately, there is no option in theme settings available to change the number of columns for mobile. Because the mobile view inherits from the desktop view.

Sorry you cannot change the number of columns for mobile.

It requires customization and this is beyond our limitations and support policy.

Best Regards.

Thanks for the fast response. And if I change values for “data-mobile” or “owl-items-xs-2”? Could you please give me know how to change that values by CSS (or script if needed)?

Hello,

You are Welcome.

Unfortunately, we could not help you with this because it is not possible with Custom CSS and it will require core file customization and this is beyond our limitations and support policy.

Best Regards.

And where could I find that files? I would look at them by myself.

Best Regards.

Hello,

Please add this code to the functions.php of the child theme:

add_filter('woodmart_categories_shortcode_custom_sizes',
			function() {
				return array(
					'desktop'          => 8,
					'tablet_landscape' => 4,
					'tablet'           => 4,
					'mobile'           => 4,
				);
			}
		);

Please note this change would be applied to all the categories carousel. Unfortunately, it is not possible to make it individually.

Best Regards

Thank you very much Elise for the help. It’s working for the carousel layout of product categories, is there also a way for the default layout?

Best Regards

Edit the file woodmart\woocommerce\content-product.php and woodmart\woocommerce\content-product_cat.php
and change this line

$xs_columns = (int) woodmart_get_opt( 'products_columns_mobile' );

to this

$xs_columns = 4;

But this will work for both products and categories.

Isn’t there any similar add_filter function as in Elise’s code suggestion but not for carousel layout categories as it is, but only for default layout categories?

Your code is for both products and categories. It’s working, it’s perfect because I can achieve what I really need to, but only for categories. I have to keep products in normal mobile sizes (two columns per row).

Best Regards

Following this.
I Hope this is configurable in the future for mobile device.

Set product 2 column
Set categories 3-4 column

Try to edit this file only woodmart\woocommerce\content-product_cat.php. And you can copy it to the child theme to keep your changes after update.

[Author]

Posts