• Resolved tangerine3

    (@tangerine3)


    Hello,

    All my pictures within woocommerce are blurry especially the single product image on the product page, those are gigantic and some are not square.

    I have read tons of threads regarding this issue but still can’t make heads or tails of why this is doing this. I am running a child theme of mystile and have the parent of mystile installed.

    I noticed there are three places where you can set image sizes, one is in Mystile, dynamic images, thumbnail settings, one is in wordpress, settings, media, and then one in woocommerce customizer.

    Do all these different image settings have to be set to the same dimensions or should I only be concerned with the woocommerce product settings? Here is what I have now.

      mystile image settings

    = Thumbnail Image Dimensions 300×300, Single Post – Thumbnail Dimensions 300×300

      WP media settings

    = Thumbnail size 300×300, medium size 225×225, large size 300×300

      WC product images

    = main image width 300×300, thumbnail width = 150×150

    Also in the WC customizer product image settings I notice it says main product image will be uncropped is that why some of my images on the product page are not square? How would I get them to be square?

    I take a picture of a product then bring it into Irfanview and resize it to 300×300, sometimes 640×480, then upload the pic into WP media library. When I go to my hosts server I notice it is saved in a whole bunch of different sizes. Here are all the pic sizes.

    /public_html/wp-content/uploads/2018/07/bazooka-sour-straws-tropical-thunder-pineapple-peach-300×300-100×100.jpg
    /public_html/wp-content/uploads/2018/07/bazooka-sour-straws-tropical-thunder-pineapple-peach-300×300-150×150.jpg
    /public_html/wp-content/uploads/2018/07/bazooka-sour-straws-tropical-thunder-pineapple-peach-300×300-225×225.jpg
    /public_html/wp-content/uploads/2018/07/bazooka-sour-straws-tropical-thunder-pineapple-peach-300×300-300×300.jpg
    /public_html/wp-content/uploads/2018/07/bazooka-sour-straws-tropical-thunder-pineapple-peach-300×300.jpg

    Here is how big and blurry it looks
    https://heavenlybluevapor.com/product/bazooka-sour-straws-tropical-thunder-pineapple-peach/

    here is a category page and they are blurry there too.
    https://heavenlybluevapor.com/product-category/e-liquid/bazooka/

    When I right click on the picture and inspect element this is the code.
    UNFORTUNATELY I CAN’T FIGURE OUT HOW TO COPY THE CODE, PLEASE RIGHT CLICK ON THE PICTURE IN THE LINK ABOVE TO SEE IT, SORRY.

    Status report:

    
    ### WordPress Environment ###
    
    Home URL: https://heavenlybluevapor.com
    Site URL: https://heavenlybluevapor.com
    WC Version: 3.4.3
    Log Directory Writable: ?
    WP Version: 4.9.6
    WP Multisite: –
    WP Memory Limit: 256 MB
    WP Debug Mode: –
    WP Cron: ?
    Language: en_US
    External object cache: –
    
    ### Server Environment ###
    
    Server Info: Apache
    PHP Version: 5.6.32 - We recommend using PHP version 7.2 or above for greater performance and security. How to update your PHP version
    PHP Post Max Size: 64 MB
    PHP Time Limit: 30
    PHP Max Input Vars: 1000
    cURL Version: 7.24.0
    OpenSSL/1.0.0
    
    SUHOSIN Installed: –
    MySQL Version: 5.6.32-78.1
    Max Upload Size: 64 MB
    Default Timezone is UTC: ?
    fsockopen/cURL: ?
    SoapClient: ?
    DOMDocument: ?
    GZip: ?
    Multibyte String: ?
    Remote Post: ?
    Remote Get: ?
    
    ### Database ###
    
    WC Database Version: 3.4.3
    WC Database Prefix: wp_
    Total Database Size: 24.54MB
    Database Data Size: 20.04MB
    Database Index Size: 4.50MB
    wp_woocommerce_sessions: Data: 0.03MB + Index: 0.00MB
    wp_woocommerce_api_keys: Data: 0.00MB + Index: 0.00MB
    wp_woocommerce_attribute_taxonomies: Data: 0.00MB + Index: 0.01MB
    wp_woocommerce_downloadable_product_permissions: Data: 0.00MB + Index: 0.00MB
    wp_woocommerce_order_items: Data: 0.15MB + Index: 0.07MB
    wp_woocommerce_order_itemmeta: Data: 0.83MB + Index: 0.60MB
    wp_woocommerce_tax_rates: Data: 0.10MB + Index: 0.08MB
    wp_woocommerce_tax_rate_locations: Data: 0.05MB + Index: 0.07MB
    wp_woocommerce_shipping_zones: Data: 0.00MB + Index: 0.00MB
    wp_woocommerce_shipping_zone_locations: Data: 0.00MB + Index: 0.01MB
    wp_woocommerce_shipping_zone_methods: Data: 0.00MB + Index: 0.00MB
    wp_woocommerce_payment_tokens: Data: 0.00MB + Index: 0.00MB
    wp_woocommerce_payment_tokenmeta: Data: 0.00MB + Index: 0.00MB
    wp_woocommerce_log: Data: 0.00MB + Index: 0.00MB
    wp_captainform_submissions: Data: 0.02MB + Index: 0.03MB
    wp_commentmeta: Data: 0.05MB + Index: 0.04MB
    wp_comments: Data: 0.93MB + Index: 0.30MB
    wp_contact_stored_data: Data: 0.00MB + Index: 0.00MB
    wp_contact_subscribers: Data: 0.00MB + Index: 0.00MB
    wp_links: Data: 0.00MB + Index: 0.00MB
    wp_options: Data: 1.50MB + Index: 0.17MB
    wp_postmeta: Data: 4.27MB + Index: 2.10MB
    wp_posts: Data: 2.06MB + Index: 0.27MB
    wp_post_right_content: Data: 0.00MB + Index: 0.00MB
    wp_spider_faq_category: Data: 0.00MB + Index: 0.00MB
    wp_spider_faq_faq: Data: 0.00MB + Index: 0.00MB
    wp_spider_faq_question: Data: 0.00MB + Index: 0.00MB
    wp_spider_faq_theme: Data: 0.01MB + Index: 0.00MB
    wp_termmeta: Data: 0.02MB + Index: 0.02MB
    wp_terms: Data: 0.01MB + Index: 0.02MB
    wp_term_relationships: Data: 0.02MB + Index: 0.04MB
    wp_term_taxonomy: Data: 0.01MB + Index: 0.01MB
    wp_usermeta: Data: 0.47MB + Index: 0.29MB
    wp_users: Data: 0.04MB + Index: 0.04MB
    wp_wc_download_log: Data: 0.00MB + Index: 0.00MB
    wp_wc_webhooks: Data: 0.00MB + Index: 0.00MB
    wp_wfBadLeechers: Data: 0.00MB + Index: 0.00MB
    wp_wfBlockedIPLog: Data: 0.00MB + Index: 0.00MB
    wp_wfBlocks: Data: 0.00MB + Index: 0.00MB
    wp_wfBlocksAdv: Data: 0.00MB + Index: 0.00MB
    wp_wfConfig: Data: 0.05MB + Index: 0.01MB
    wp_wfCrawlers: Data: 0.00MB + Index: 0.00MB
    wp_wfFileChanges: Data: 0.00MB + Index: 0.00MB
    wp_wfFileMods: Data: 0.89MB + Index: 0.14MB
    wp_wfHits: Data: 0.34MB + Index: 0.08MB
    wp_wfHoover: Data: 0.00MB + Index: 0.00MB
    wp_wfIssues: Data: 0.00MB + Index: 0.00MB
    wp_wfKnownFileList: Data: 0.00MB + Index: 0.00MB
    wp_wfLeechers: Data: 0.00MB + Index: 0.00MB
    wp_wfLockedOut: Data: 0.00MB + Index: 0.00MB
    wp_wfLocs: Data: 0.00MB + Index: 0.00MB
    wp_wfLogins: Data: 0.01MB + Index: 0.01MB
    wp_wfNet404s: Data: 0.00MB + Index: 0.00MB
    wp_wfNotifications: Data: 0.00MB + Index: 0.00MB
    wp_wfPendingIssues: Data: 0.00MB + Index: 0.00MB
    wp_wfReverseCache: Data: 0.00MB + Index: 0.00MB
    wp_wfScanners: Data: 0.00MB + Index: 0.00MB
    wp_wfSNIPCache: Data: 0.00MB + Index: 0.00MB
    wp_wfStatus: Data: 0.07MB + Index: 0.03MB
    wp_wfThrottleLog: Data: 0.00MB + Index: 0.00MB
    wp_wfVulnScanners: Data: 0.00MB + Index: 0.00MB
    wp_woocommerce_termmeta: Data: 0.02MB + Index: 0.02MB
    wp_wpml_mails: Data: 8.07MB + Index: 0.02MB
    wp_yoast_seo_links: Data: 0.01MB + Index: 0.01MB
    wp_yoast_seo_meta: Data: 0.01MB + Index: 0.01MB
    
    ### Post Type Counts ###
    
    attachment: 586
    captainform_post: 1
    contact_form: 1
    custom_css: 1
    customize_changeset: 8
    faq: 1
    jetpack_migration: 2
    nav_menu_item: 27
    oembed_cache: 3
    page: 22
    popup: 1
    popup_theme: 6
    post: 1
    product: 103
    product_variation: 779
    revision: 361
    shop_coupon: 7
    shop_order: 664
    shop_order_refund: 31
    sidebar: 1
    ufaq: 2
    wooframework: 620
    wpcf7_contact_form: 3
    
    ### Security ###
    
    Secure connection (HTTPS): ?
    Hide errors from visitors: ?
    
    ### Active Plugins (18) ###
    
    AddToAny Share Buttons: by AddToAny – 1.7.28
    Authorize.net Payment Gateway For WooCommerce: by Ishan Verma – 4.2 – Not tested with the active version of WooCommerce
    CaptainForm: by captainform – 2.2.6
    Contact Form 7: by Takayuki Miyoshi – 5.0.2
    Display Pages Shortcode: by Paul Angell – 1.1
    Hide products count: by Joan Boluda – 0.6 – Not tested with the active version of WooCommerce
    Jetpack by WordPress.com: by Automattic – 6.3.2
    MCE Table Buttons: by Jake Goldman
    10up
    Oomph – 3.3
    
    Popup Maker - Age Verification Modals: by WP Popup Maker – 1.2.2
    Popup Maker: by WP Popup Maker – 1.7.29
    Regenerate Thumbnails: by Alex Mills (Viper007Bond) – 3.0.2
    Shortcodes Ultimate: by Vladimir Anokhin – 5.0.4
    WC Password Strength Settings: by Daniel Santoro – 2.0.2 – Not tested with the active version of WooCommerce
    WooCommerce Extra Fee Option: by Terry Tsang – 1.0.7 – Not tested with the active version of WooCommerce
    WooCommerce Services: by Automattic – 1.15.0 – Not tested with the active version of WooCommerce
    WooCommerce: by Automattic – 3.4.3
    WooSwipe: by Website Design – 1.1.6.6
    Yoast SEO: by Team Yoast – 7.7.3
    
    ### Settings ###
    
    API Enabled: ?
    Force SSL: –
    Currency: USD ($)
    Currency Position: left
    Thousand Separator: ,
    Decimal Separator: .
    Number of Decimals: 2
    Taxonomies: Product Types: external (external)
    grouped (grouped)
    simple (simple)
    variable (variable)
    
    Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
    exclude-from-search (exclude-from-search)
    featured (featured)
    outofstock (outofstock)
    rated-1 (rated-1)
    rated-2 (rated-2)
    rated-3 (rated-3)
    rated-4 (rated-4)
    rated-5 (rated-5)
    
    ### WC Pages ###
    
    Shop base: #7 - /shop/
    Cart: #8 - /cart/
    Checkout: #9 - /checkout/
    My account: #10 - /my-account/
    Terms and conditions: ? Page not set
    
    ### Theme ###
    
    Name: Mystile1
    Version: 1.2.17
    Author URL: https://www.woothemes.com
    Child Theme: ? – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
    WooCommerce Support: ?
    
    ### Templates ###
    
    Overrides: –
    

    This has actually been going on a long time but not as bad as now, please help, thank you.

    • This topic was modified 6 years, 8 months ago by tangerine3.
    • This topic was modified 6 years, 8 months ago by tangerine3.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support con

    (@conschneider)

    Engineer

    Hi there,

    The product images of your product pages have these measurements: https://cld.wthms.co/NbLM6t – factoring in my shaky hand, I would say about 512×512 pixels.

    I would change your image settings to:

    mystile image settings
    = Thumbnail Image Dimensions 300×300, Single Post – Thumbnail Dimensions 600×600

    WP media settings
    = Thumbnail size 300×300, medium size 225×225, large size 600×600

    WC product images
    = main image width 600×600, thumbnail width = 150×150

    and then resize all of your images to a square format between 512px – 600px and then try and re-upload.

    Kind regards,

    Thread Starter tangerine3

    (@tangerine3)

    ok i will try these setting and resize. But is it recommended that I resize within the WP media library or delete pics from server and then resize using Irfanview and bring back into WP media library and then set product image? Also one issue besides being blurry was they were too big, any recommendations on what the settings should be to make them smaller only for main product image? FYI that picture you show being about 512×517 was originally sized outside WP/WC at 300×300 so something “made” it bigger when it was set as product image where you see those measurements of 512×517 . . . .

    Thread Starter tangerine3

    (@tangerine3)

    ok so i changed all the settings in Mystile settings, WP media settings and WC product images to the above recommendations and did not resize any of my pictures I have over 300 . . . but instead i regenerated thumbnails and it worked! BUT only for the single product images. So now I need to know how to get the category pics to not be blurry

    good product images = https://heavenlybluevapor.com/product/bazooka-sour-straws-tropical-thunder-pineapple-peach/

    bad category images = https://heavenlybluevapor.com/shop/

    What made it work for product images but not category images? What image settings and where change the category images? Thanks almost there! any more help on fixing this would be appreciated.

    Thread Starter tangerine3

    (@tangerine3)

    ok so when i changed this setting

    WC product images
    = main image width 600×600, thumbnail width = 150×150 to 300×300 to match wp media thumbnail settings and mystile thumbnail settings all category pics were fixed as well.

    So I guess you have to make sure that all setting areas for your images have to match re product image and thumbnail size and make sure in WP media settings and WC thumbnail settings cropped is selected if you want all to be square and that when you import your images into WP they are at least the same size or bigger than your settings.

    I hope I have all that correct.

    P.S. I do like that WC 3.3 automatically fixed images without having to run regenerate thumbnails each time a change was made. Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘All pictures are blurry and too big’ is closed to new replies.