Increase the Product Image Size in the Catalog Page

Question

I know, this is a simple fix (it has to be), but I have been searching for two days and haven't been able to accomplish this. The products in the catalog page of my site are too small.

Here is my site: http://monocleprints.com/woo/shop/

I have tried all the back-end things I can think of:

• changing the sizes in WooCommerce -> Settings -> Catalog

• resizing all the thumbnails with the Thumbnail Regenerator plugin

• resizing with the Simple Image Sizes tool (in the Media folder)

I realize that I might need to edit the css. Where would I go to do that?

Answer 1

There is probably better way to do this but you could try this:

Go to plugins > Editor > Select woocommerce plugin and open

/assets/css/woocommerce.css

Find this:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product

and change width to a larger percentage.

Answer 2

If you are using a woocommerce theme you should check in the themes directory for woocommerce config files. These config files usually do the final styling on the images. For example, the file might be your_theme/config-woocommerce/config.php wherein you would find something like:

//product thumbnails
$avia_config['imgSize']['shop_thumbnail']   = array('width'=>80, 'height'=>80);
$avia_config['imgSize']['shop_catalog']     = array('width'=>450, 'height'=>355);
$avia_config['imgSize']['shop_single']      = array('width'=>450, 'height'=>355);

When in doubt, consult your theme's website/support forum as the question was probably already asked there.

Answer 3

I have spent too much time today trying to figure out how to change the size of the thumbnails in the shopping cart and finally succeeded using CSS as follows:

.woocommerce table.cart img, .woocommerce #content table.cart img,
    .woocommerce-page table.cart img, .woocommerce-page #content table.cart img {
    width: 90px;
        height: auto;
        padding: none !important;
}

I hope that helps for you!

Answer 4

Settings for this have been moved to the Theme Customizer.

Design -> Customizer -> WooCommerce -> Productimages

There is one setting for product pages and another for catalogue pages.

Tested in WooCommerce 3.3.3

Answer 5

I was going trough the same problem, and I've found a possible solution for it.

Open the page where the image size is being changed, find the loop, e.g:

if ( have_posts() ) : while ( have_posts() ) : the_post();

  // Loop code, thumbnail woocommerce function, etc

endwhile; endif;

and replace it with the code below:

query_posts($args); // Note: if there's no arguments for the query, it can be empty

//loop code, call the default thumnail function! the_post_thumnail()

rewind_posts();