WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. ldsrhb
    Member
    Posted 12 months 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 12 months 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 12 months 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 12 months 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 11 months 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%;
    }

Reply

You must log in to post.

About this Plugin

About this Topic