How to change the catalog image size and number of its column

Dear Aigar

Hi, currently my green fashion bags shopping website is almost completed.
What I need to make the change to suit my website design is the catalog image size in Woocommerce.

This is my url to the page that I want to adjust:
http://www.hempmethee.com/hemp-products/ ==>Show all product categories
http://www.hempmethee.com/product-category/messenger-bags/ ==> SHow single product catagory

I want to increase the size of image, but I don’t know how to do it. I went to adjust in Woocommerce>Settings>Product image size, but after that nothing change. so, possibly I need to make change in any CSS too?

And can I reduce the number of column of the image catalog the page show all product categories ? or after I increase the catalog image size then the column will be reduced automatically.

Best Regards,
Methee Wu.

These things are not related to theme but WooCommerce itself.

When you changed image size in Woocommerce > Settings > Product Image size you didn’t read the main part:

These settings affect the actual dimensions of images in your catalog – the display on the front-end will still be affected by CSS styles. After changing these settings you may need to regenerate your thumbnails.

WordPress won’t do it automatically and you need to use plugins such as this Regenerate Thumbnails – WordPress plugin | WordPress.org
You can see that this plugin is downloaded over 1.1 million times just because of this “problem”

You can add categories in shop page by going to WooCommerce Settings - Products - Shop Page Display.

Didn’t get your question about columns, what did you mean by that?

Dear Aigars

So sorry for my extremely late reply. I had been in big trouble last month (due to the hacker hacked woocommerce website and I was also the victim that my credit card was hacked, so I spentg alot of time on that)

I adjusted the size of the “Catalog Images” in Woocommerce setting from 300x300 to be 500x500. Then I clicked regenerate thumbnail in media library. But on hempmethee.com/hemp-products/
all the product pictures are still in same size with no change at all.

Did I make anything wrong ? or I need to adjust also the css

Best Regards,
Methee Wu

Sorry to hear about hacking. I hope you did recover everything.

Images are now bigger but WooCommerce will still display 4 columns.

There is no easy workaround for this and this is definitely out of scope of free support.

The general idea would be to change number of product per row and you can get this done by adding this to functions.php (In the best case scenario do this via Child Theme)

// Change number or products per row to 3
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
	function loop_columns() {
		return 3; // 3 products per row
	}
}

Afterwards you will have to tweak CSS as well like this

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
	width: 29%;
}

Of course this is just general idea and you might have to tweak this accordingly if you want less columns, wider columns etc.

Just play around number to see what works for you.

Dear Aigars

Thanks for your very fast reply. My credit card and bank account are fine because the bank could detect that it was the hacking activity so I didnt need to pay. But what kept me busy was that I need to spent time discuss with Bank and also I need to change all email accounts password and also my website’s credential. Also I had to check whether my website (powered by woocommerce) is safe from the hackers so the customers can shop in my online site safely.

I will try to adjust and learn as you suggested :slight_smile:

Bests Regards,
Methee Wu

Do you know how you got hacked? Was it phishing, insecure password, the same password for everything or other reason?

The Woocommerce website itself got hacked, anyone who use credit card to purchase their Woothemes’s products during November 27th 2013 and May 8th 2014 were hacked (I am not sure everyone or not, but I was one of the victims).

Woothemes staff said that “criminal hackers had intercepted some credit card details between checkout and our off site credit card processor”

You can follow below link (their detailed explanation):

I am sure, there are many many victims and some of them might not know even until now and end up paying the invoice . Make sure you check your credit card invoice if you used credit card on their website during the above dates.

Methee Wu

Methee,

I was aware of this problems with WooThemes but I didn’t know that it got so serious. At first I thought it was a bug that were not yet exploited but now I see that it it was a massive security breach with huge consequences.

Thanks for keeping me updated!

Hi Aigars,

I know this is a very old thread, but it’s the only thing that I’ve found in my searching that has come close to solving my issues with scaling my catalog in woocommerce.

After more research and experimentation, I was able to do pretty much what I wanted to do with the size. However I found that having a left or right sidebar enabled for woocommerce would override the code and make it not work.

Your CSS and functions.php code that I used successfully resized the catalog images and got them closer together:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
 width: 12%;
 }

// Change number or products per row to 5
 add_filter('loop_shop_columns', 'loop_columns');
 if (!function_exists('loop_columns')) {
 function loop_columns() {
 return 5; // 5 products per row
 }
 }

With the code and no woocommerce sidebar:

With the code and the woocommcerce sidebar enabled:

Is there any additional code or anything I can try to make it so I can still utilize the sidebar for showing product categories while having the smaller images I desire?
What i’d ultimately like: 2017-03-22_1816

Thanks if you’re still out there and have any more ideas.

Paul