WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
How to achieve Responsive Images (15 posts)

  1. Preeminent
    Member
    Posted 1 year ago #

    So, like many others, I'm having image size and pixelation problems. I've looked around at many of the solutions, but none will work when trying to build a responsive theme with woocommerce. The images that I post will more than likely, always be different dimensions, plus I need them to be responsive, not a fixed width. Does anyone have any tips on what I should do?

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

  2. bheadrick
    Member
    Posted 1 year ago #

    for some crazy reason, woocommerce has image width set like this:
    div.product div.images img,#content div.product div.images img{width:100%}
    when it should be this:
    div.product div.images img,#content div.product div.images img{width:auto; max-width:100%}

    this will prevent images from stretching out beyond their natual size, but will allow them to collapse if the div they are in is more narrow

  3. Roy Ho
    Member
    Posted 1 year ago #

    bheadrick - have you opened a ticket for this issue? Might benefit many others in the future.

  4. bheadrick
    Member
    Posted 1 year ago #

    Well, this is their answer to the problem:
    http://wcdocs.woothemes.com/tutorials/using-the-appropriate-product-image-dimensions/
    so I don't think they would really consider it a "bug"

    but if you don't want to have the product thumb to be that big, then my solution above will do the trick.

  5. Roy Ho
    Member
    Posted 1 year ago #

    No, it certainly is not a bug however it is not a practical implementation. width 100% should only be set and triggered when size has already been reduced responsively then the 100% width would be correct as it tries to fill the container with the image.

    Another words, by default, max-width:100% is the correct implementation in a responsive design.

  6. bheadrick
    Member
    Posted 1 year ago #

    it'll probably get shot down but
    https://github.com/woothemes/woocommerce/issues/2117

  7. Preeminent
    Member
    Posted 1 year ago #

    Awesome. Thanks for the replies! I actually did switch to width:auto but didn't get a chance to get back and update my question. Thanks for starting a ticket as well!

  8. bheadrick
    Member
    Posted 1 year ago #

    And this is the answer:
    We use width 100% so the product grids are consistent. I don't think there's any excuse to use smaller images than the design intends?

  9. Roy Ho
    Member
    Posted 1 year ago #

    Actually they don't need "width:100%" to maintain consistency. They can simply grab the width of the product image settings in WooCommerce and let that determine the width of each grid item.

  10. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    ... just for example my Theme is using grids and images are still max-width. They should be like this:

    img {
        -ms-interpolation-mode: bicubic;
        border: 0;
        height: auto;
        max-width: 100%;
        vertical-align: middle;
    }

    You can also override WooCommerce styles within Child Theme and be done with it :)

    Thanks,
    Emil

  11. treybo
    Member
    Posted 1 year ago #

    Emil. Would this work in your excellent Responsive Theme?

    Sounds like the steps would be:
    1) copy WooCommerce style sheet to child theme (woocommerce.css?)
    2) change the image properties that I find there to what you outline:
    img {
    -ms-interpolation-mode: bicubic;
    border: 0;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    }

    AM I understanding this correctly?

  12. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    I would say so and this is already in Responsive :)

  13. treybo
    Member
    Posted 1 year ago #

    One thing I've noticed is that the product title doesn't change in responsive. Then when a product (with image) is viewed on mobile the product title breaks up onto multiple lines. Is there a way to set the title text so it responds as well?

    How would I go about doing that?

  14. Preeminent
    Member
    Posted 1 year ago #

    Is the font in ems instead of pixels? That will certainly help some.

  15. treybo
    Member
    Posted 1 year ago #

    I will have to check. I am using Emil's Responsive Theme that is optimized for WooCommerce. Therefore I'm a little skeptical about changing certain things that might actually hurt what the Theme does automatically.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic