Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #19923

    Hello.

    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.

    #105561

    Hi GoElemental,

    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).

    Look for:

    #
    # 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);
    function avia_add_image_div()
    {
    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);
    function avia_add_summary_div()
    {
    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.

    Regards,

    Devin

    #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.

    #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?

    #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.

    #105565

    Hi!

    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.

    Best regards,

    Peter

    #105566

    Thanks Peter,

    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 again

    #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?

    #105569

    Scratch my post. I figured it out

    #105570

    Hi!

    Glad that you solved the problem :)

    Best regards,

    Peter

    #105571

    pcprincess:

    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)

    Thanks

    #105572

    @pcprincess77

    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.

    Thanks,

    Nick

    #105573

    @GoElemental

    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 :)

    #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 :)

    #105575

    Thanks pcprincess.

    Here are some screenshots:

    My woocommerce image settings:

    pq8T1FM.png

    My Product Page:

    3UHIOlG.png

    My Pretty Photo Lightbox image:

    kVWWPw4.png

    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.

    #105576

    You need to install this plugin. This is what I am using and you have a ton more preset image sizes and options

    http://wordpress.org/extend/plugins/simple-image-sizes/screenshots/

    Then once it’s installed and activated, follow the steps I posted above and regenerate

    #105577

    Hi!

    @GoElemental problem solved?

    Best regards,

    Peter

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Changing Product Image Size and Disabling Click-Zoom’ is closed to new replies.