WordPress.org

Forums

WooCommerce - excelling eCommerce
Image size on Product Page (5 posts)

  1. B-Rye
    Member
    Posted 1 year ago #

    Hi,
    Working on a website right now for a friend of mine. Fairly new to WordPress and woocommerce.

    Here's the issue I'm having. In category view the image sizes are fine. However when I actually go to a product page it is blowing the image up so much that it distorts my image. Can I make this image on the products page smaller? I don't need it to be as big as it is.

    here is the sample page

    http://kh-fireworks.b-rye.com/?product=hot-tamali

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

  2. B-Rye
    Member
    Posted 1 year ago #

    looking at going to about 1/2 that size

  3. B-Rye
    Member
    Posted 1 year ago #

    anyone? i'm stuck here

  4. ManusH
    Member
    Posted 1 year ago #

    The problem is that;
    in the single product page,
    your product image is resized to fit a larger area than the original image size.

    Speaking of this sample product (Hot Tamali)
    your original image size = 188x218
    in category view it is used as: 175x203

    in the single product page
    the product image is : 137x160
    but resized to : 200x234

    to fit that thumbnail area,
    because of the
    width: 200px;
    css rule.

    In the WooCommerce Settings,
    there is a section to control the product image/thumbnail sizes:

    WooCommerce > Settings > Catalog > Image Options

    You can redefine your image sizes and as it is described there, in order to take effect, you have to regenarate the new thumbnails using a plugin.

    BUT; again, if you use smaller images than the area, it will try to resize it to fit the area. Resizing a bigger image to a small place won't disturb much but enlarging will make the images look blurry/pixelate.

    After changing image sizes and regenarating the new thumbnails, you may want to change that css rule as
    width: auto;
    and it will not try to fit the area...

    ok?

  5. B-Rye
    Member
    Posted 1 year ago #

    I understand. where would I change that css rule width: auto;

    which file do I add that to?

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WooCommerce - excelling eCommerce
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.