January 31, 2013 at 6:13 pm #19923
I would like to have one large image on my product pages (721px x 281px), and disable the click to zoom feature.
What changes would I have to make on the Replete theme in order to keep everything responsive, and working as it should?
Thanks in advance and have a great day.February 1, 2013 at 4:35 pm #105561
You can modify the grid containers for the items a bit but you’ll have to work within the limits of the twelve column grid that page uses.
You can do this in the theme files config-woocommerce>config.php. The code that wraps the single page in the containers (which determine the layout).
# wrap single product image in an extra div
add_action( 'woocommerce_before_single_product_summary', 'avia_add_image_div', 2);
add_action( 'woocommerce_before_single_product_summary', 'avia_close_div', 20);
echo "<div class='four units single-product-main-image alpha'>";
# wrap single product summary in an extra div
add_action( 'woocommerce_before_single_product_summary', 'avia_add_summary_div', 25);
add_action( 'woocommerce_after_single_product_summary', 'avia_close_div', 3);
echo "<div class='eight units single-product-summary'>";
The first function wraps the images in a four column grid and the second puts the product summary into an eight column grid with the four and eight class selectors. You can modify them to your needs, for example: change the first one to twelve and the second to twelve as well will make both sections take up the full width of the container.
DevinFebruary 15, 2013 at 5:18 pm #105562
Thanks for the advice Devin.
I have a 9/3 scheme that looks great.
Now I just need to disable the click zoom feature.February 15, 2013 at 6:55 pm #105563
Now that I have changed the layout, my product image is blurry.
My original image is larger than the product image, so its not an issue of pixelation because its being ‘upscaled’.
The image looks great when I click to zoom, but since I will be disabling that, I need the main product image to be as sharp as possible.
I also tried the regenerate thumbnails plugin with no luck.
Any ideas?February 15, 2013 at 8:01 pm #105564
I have been tinkering with the following:
- In WP Backend
woocommerce > settings > catalog > Image Options
Single Product Image : Width 690 Height 999 (Hard crop unticked)
- In my WP themes folder
replete > config-woocommerce > config.php
line 16 : $ avia_config [ ‘imgSize’][ ‘shop_single’] = array(‘width’=>690, ‘height’=>999);
Then did a Regenerate Thumbnails, but still no luck.February 16, 2013 at 7:05 am #105565
Go to WooCommerce > Settings > Catalog and check the thumbnail size settings on the option page. Change the size(s) if necessary and regenerate the thumbnails again.
PeterFebruary 20, 2013 at 5:22 pm #105566
I tried that suggestion and my images are still looking less than perfect.
The quality loss is really obvious when you click on the image and the Pretty Photo lighbox opens up, revealing the crisp, sharp image.
I am still trying to disable the Pretty Photo lightbox as well, but for now I need it for comparing the quality of the images.
Any other ideas/suggestions?
Is there any way to PM you my site and credentials?
Thanks againFebruary 20, 2013 at 11:24 pm #105567
I’m experiencing the same problem. And because of the thousands of graphics I am using it takes a minimum of 12 hours to regenerate all the graphics.
From what I can see it appears as either the single page product image is being distorted in terms of clarity either because of an image overlay or because it’s calling for the 80×80 image size for the main single product page image.
When I click to zoom the quality is perfect.
Any ideas, potentially ones that will save me 12+ hours waiting for files to regenerate again?February 21, 2013 at 3:23 am #105569February 21, 2013 at 7:56 am #105570February 21, 2013 at 3:56 pm #105571
Did you alter the size of the image on the single product page? My image is 690px wide
If so, how did you figure out the issue.
I am still trying to:
– Disable Pretty Photo click/zoom
– Get a sharp image with a 690px wide image (which is a 9/3 grid layout)
ThanksFebruary 21, 2013 at 7:10 pm #105572
You can use Simple Image Sizes plugin to resize by individual image or by category which will save you some time. It also pulls all the page sizes from functions.php into Settings > Media.
NickFebruary 21, 2013 at 7:30 pm #105573
It’s all in how you configure the Image Sizes in the Media Settings.
This has been one of the biggest thorns in my side because I have thousands of product images.
I’ve been testing using a specific category that only has 54 images and have concluded that having any of the media sizes set to “crop” completely screws up the way the graphics look on any given section of the website.
I was digging into the code trying to find all the image overlay settings because I thought that was what was distorting the images but turns out it’s the crop function!
I haven’t looked at your website to see if what you’re experiencing is the same thing I was experiencing but it sure sounds like it.
If so, un-toggle “crop” on all the various image sizes under “Settings->Media->Image Sizes” make sure you save the settings at the bottom of the page and force regenerate all the images.
Hope this helps and saves some sanity and time :)February 21, 2013 at 7:38 pm #105574
One more thing…
Even if you leave all the default image sizes as they are and simply turn cropping off on all the different sizes, you should see a huge difference…Unless you have low resolution graphics, then you’ll probably have to adjust the sizes.
Thank God….now I can move forward and address some other less time consuming issues :)February 21, 2013 at 9:36 pm #105575
Here are some screenshots:
My woocommerce image settings:
My Product Page:
My Pretty Photo Lightbox image:
Maybe my eyes are going bad, or I have looked at this too many times, but the product image quality is lacking to me.
The original image is larger than the product image (690 px) so its not like the image has to be stretched/enlarged.
I have regenerated thumbnails several times.February 21, 2013 at 9:54 pm #105576
You need to install this plugin. This is what I am using and you have a ton more preset image sizes and options
Then once it’s installed and activated, follow the steps I posted above and regenerateFebruary 22, 2013 at 9:06 am #105577
The topic ‘Changing Product Image Size and Disabling Click-Zoom’ is closed to new replies.