WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
Reduce Product Image Size (WooCommerce) (5 posts)

  1. ldsrhb
    Member
    Posted 1 year ago #

    When my products are viewed, they're quite huge. Any way to reduce them, while leaving the clarity, and NOT having to tinker with PHP, HTML? I'm a bit of a novice and not wanting to screw something so over my head up!

    Thank you!

    http://wordpress.org/extend/plugins/woocommerce/

  2. jameskoster
    Member
    Plugin Author

    Posted 1 year ago #

    Need to see a URL to give you the exact code, but you should be able to change the single product image size with something like;

    .single-product .images img {
    max-width:100px;
    }
  3. DesignerEthan
    Member
    Posted 1 year ago #

    You can resize the images in the woocommerce catalog settings. You will then need to download the regen thumbs plugin and regen all your images.

  4. ldsrhb
    Member
    Posted 1 year ago #

    Hey there,

    Thank you for the help. Unfortunately neither did the trick. The latter, in fact, made the images blurrier. Here's an example (albeit I put them back to their normal size so they're not blurry):

    epicmineralbeauty.com/product/beautiful/

    Any further ideas? Thanks so much

  5. bheadrick
    Member
    Posted 1 year ago #

    your single-product image size is set to 300x300

    After you update the size to the size you want, you also need to update the css. The problem is that by default, the image will be stretched out to the full width of the container it's in - which is why Ethan's option made your image fuzzy.
    In addition to following Ethan's advice, you need to add something like this to your css:

    .single-product .images img {
    width:auto;
    max-width:100%;
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic