Woocommerce catalog using 300×300 pixel images so they are blurry

  • Resolved techsoldd

    (@techsoldd)


    1 week, 6 days ago

    Hi All, I have a brand new clean WordPress install using pretty much no plugins, Twenty Twenty Five and the Woocommerce catalog page is referencing the 300×300 pixel thumbnail images so they are blurry because they are shown at ~ 450px.

    https://staging.itkit.nz/shop/

    WC Version: 9.4.1
    WP Version: 6.7
    PHP Version: 8.1.30

    Active Plugins (2)
    WooCommerce: by Automattic – 9.4.1
    Wordfence Security: by Wordfence – 8.0.0

    Theme
    Name: Twenty Twenty-Five
    Version: 1.0

    On my local test site I installed a clean version and it works correctly, referencing the original 500px image so no blur.

    Everything on the internet seems to talk about Appearance>Customize>>WooCommerce>>Product Images but there is no such option in the Customise theme it’s a completely different layout (because of Gutenberg?)

    Bad version:

    <img width="300" height="300" src="https://staging.itkit.nz/wp-content/uploads/2024/11/1081610478-JPG-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="Business Laptop - Quote" data-testid="product-image" style="max-width:none;object-fit:cover;" decoding="async" loading="lazy" srcset="https://staging.itkit.nz/wp-content/uploads/2024/11/1081610478-JPG-300x300.jpg 300w, https://staging.itkit.nz/wp-content/uploads/2024/11/1081610478-JPG-150x150.jpg 150w, https://staging.itkit.nz/wp-content/uploads/2024/11/1081610478-JPG-100x100.jpg 100w, https://staging.itkit.nz/wp-content/uploads/2024/11/1081610478-JPG.jpg 500w" sizes="auto, (max-width: 300px) 100vw, 300px">

    Good (local) version:

    <img width="300" height="300" src="https://staging.itkit.local/wp-content/uploads/2024/11/1081610478.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="Business Laptop - Quote" data-testid="product-image" style="max-width:none;object-fit:cover;" decoding="async" loading="lazy">
    • This topic was modified 1 week, 6 days ago by techsoldd.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Luigi Teschio

    (@gigitux)

    Hi @techsoldd,

    To adjust the image settings, you can follow these steps:

    1. Edit the Product Collection Template.
    2. Select an image.
    3. Use the right sidebar to modify the settings to your preference.

    Thread Starter techsoldd

    (@techsoldd)

    Thanks for the advice, I did find this yesterday but I would therefore have to set it to 300×300 to avoid the blurry. I don’t want to have to hardcode the thumbnails it should just work freely, like it does on my local site.

    So the question really is why would it be serving this;

    src="https://staging.itkit.nz/wp-content/uploads/2024/11/1081610478-JPG-300x300.jpg"

    instead of this?

    src="https://staging.itkit.local/wp-content/uploads/2024/11/1081610478.jpg"
    Plugin Contributor Luigi Teschio

    (@gigitux)

    @techsoldd, please follow these steps:

    1. Visit: /wp-admin/customize.php?return=/wp-admin/themes.php
    2. Navigate to: WooCommerce > Product Images.
    3. Ensure that the input fields are empty.
    4. If not, remove any value.
    5. Save.
    6. Visit the frontend.
    7. Check the image URL.

    I noticed that the Customizer settings are still applied even if a block theme is enabled.

    Thread Starter techsoldd

    (@techsoldd)

    Expert advice thanks @gigitux that seems to have worked ??

    It seems to be ignoring the Thumbnail Cropping setting of 1:1 but maybe these are overridden by what’s setup in the block Editor template(s). Anyway that’s not a problem for me I only need the sharp images and that’s fixed!

    • This reply was modified 1 week, 4 days ago by techsoldd.
    • This reply was modified 1 week, 4 days ago by techsoldd.
    Plugin Contributor Luigi Teschio

    (@gigitux)

    Thanks for letting us know. I’m glad that you were able to fix the issue!

    It seems to be ignoring the Thumbnail Cropping setting of 1:1 but maybe these are overridden by what’s setup in the block Editor template(s). Anyway that’s not a problem for me I only need the sharp images and that’s fixed!

    We are aware of this issue. For this reason, we kicked-off a discussion about WooCommerce Customizer settings and block themes. You are welcome to drop any comments if you like!

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.