Smaller Thumbnails and Product Images

5 posts from 3 voices

• Started 10 months ago by tjmaxwell
• Latest reply from Devin
• This topic is resolved

Tags:

No tags yet.

1. 

   tjmaxwell
   Member

   Hello,

   I would like to know how to make my small product images (the ones that show up in a grid) and my main product images a little smaller. I don't have access to larger images for my products, so many of the images look grainy and blurry at the default size. Messing around with the WooCommerce image size settings doesn't seem to have any effect, so I'm assuming I need to make some CSS changes. Can you please point me in the right direction? I know that the left-hand "container" where the main product image shows on a product page is a fixed width, so that can't be easily changed. I'm fine leaving the grey surrounding box around the image the same size, but I just need the images themselves to be smaller. Thanks in advance for your help!

   Posted 10 months ago #
2. 

   Ismael
   Moderator

   Hi tjmaxwell,

   Kindly open wp-content/themes/abundance/woocommerce-config/config.php and find this code (line 39):
   

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

   Just adjust the height and width. Hope this helps. :)

   Regards,
   Ismael

   Posted 10 months ago #
3. 

   tjmaxwell
   Member

   Thanks for that. Maybe I need to recreate thumbnails, but it doesn't seem to be making a difference. If I tweak the widths in CSS, it shrinks the pictures, but then the "more information" and "add to cart" buttons that appear as you hover over the thumbnails doesn't look very good.

   I've followed various hacks I've found on various pages to improve the quality of my thumbnails, but they still look terrible. Some of my product images are fairly small, but they should be large enough to generate decent looking thumbnails. On several products, the main product image (which in some cases is "blown up" to fit the space on the product page) looks better quality than the thumbnails, and I just can't figure out why. I'm fine with the thumbnails the size they are, but I need to fix the blurriness somehow. Do you have any advice?

   http://dev.squaresound.com/category/piano-compilations/

   Posted 10 months ago #
4. 

   tjmaxwell
   Member

   Sorry, try this link instead.

   http://dev.squaresound.com/category/final-fantasy-sheet-music/

   Posted 10 months ago #
5. 

   Devin
   Moderator

   Hi tjmaxwell,

   You will need to regenerate your thumbnails but also try using a 5 column layout for your catalog view. This will shrink the container for your items without having to do much editing. Go to WooCommerce>Settings>Pages then Column and Product Count.

   You'll also need to add the following to your quick css in the styling tab of the theme options to get the hover buttons looking clean with the 5 column layout:
   

   #top div .thumbnail_container .show_details_button,#top div .thumbnail_container .add_to_cart_button {background-position-x: 5px;}

   http://wordpress.org/extend/plugins/regenerate-thumbnails/

   Regards,

   Devin

   Posted 10 months ago #

RSS feed for this topic

Reply

You must log in to post.