Product Images Width and Height - by plush

This topic has 29 replies, 5 voices, and was last updated 8 years, 6 months ago ago by Jack Richardson

  • Avatar: plush
    plush
    Participant
    September 11, 2015 at 05:09

    Hello,

    Where or how do I change the dimensions of the product images, for example I would like the width to be 600 and height to be 300 in the product page layout. I know in another theme we can change it under product page layout, single product page layout etc…but I can’t find these options here? Thank you.

    28 Answers
    Avatar: Robert Hall
    Robert Hall
    Support staff
    September 11, 2015 at 07:25

    Hello,

    You can change image size in Dashboard->WooCommerce->Settings->Products->Display->Product Images.
    Then you need regenerate your thumbnails via Regenerate Thumbnails plugin.

    Regards,
    Robert Hall.

    Avatar: plush
    plush
    Participant
    September 11, 2015 at 08:32

    Hi Robert,

    That’s right thank you. How can we get quickview to show that size as well? I noticed when you view a picture in quickview it’s different sizing.

    Avatar: Robert Hall
    Robert Hall
    Support staff
    September 11, 2015 at 08:47

    Sorry, but isn’t possible to change image size in “Quick View” mode via admin panel.
    You can do it manually with some CSS code.

    Regards,
    Robert Hall.

    Avatar: plush
    plush
    Participant
    September 11, 2015 at 08:57

    Nevermind, the demo pictures are big and not the right size, so once I put a image with the appropriate size the Quick View image is to the original size that I want. Thank you.

    Avatar: plush
    plush
    Participant
    September 11, 2015 at 09:11

    Noticed another thing, when I resized the thumbnails my category pictures resized too, I would have liked to kept them at the original size, is there anyway to have those category pictures be a different size?

    Avatar: Robert Hall
    Robert Hall
    Support staff
    September 11, 2015 at 09:28

    No, it’s not possible too, but we can try to change the size using CSS code.
    Please clarify what image size you want for category images?

    Regards,
    Robert Hall.

    Avatar: plush
    plush
    Participant
    September 11, 2015 at 17:55

    On the homepage the image size I want for the categories is 265 x 265.

    Avatar: Eva
    Eva Kemp
    Support staff
    September 14, 2015 at 08:16

    Hello,

    You can try to use this code in Global Custom CSS, but images will be distorted:

    .product-category > a img {
        height: 265px;
        width: 265px !important;
    }

    Regards,
    Eva Kemp.

    Avatar: plush
    plush
    Participant
    September 14, 2015 at 08:28

    Hello,

    I added the code but that didn’t change the size?

    Avatar: Eva
    Eva Kemp
    Support staff
    September 14, 2015 at 15:49

    Hello,

    I’ve added the code in your child style.css file and the changes are visible now.
    Please check home page.

    Regards,
    Eva Kemp.

    Avatar: plush
    plush
    Participant
    September 14, 2015 at 17:57

    Yes like you said it looks distorted 🙁 I have gone ahead and removed it. Have to think of an alternative for that section and remove 8theme product categories, do you have a recommendation of an element I use to replicated the look and just link the picture or section to appropriate category? Thank you.

    Avatar: Eva
    Eva Kemp
    Support staff
    September 14, 2015 at 19:23

    Hello,

    You can try to use WooProduct Categories element or Single Image element (upload images and link them to category pages).

    Regards,
    Eva Kemp.

    Avatar: plush
    plush
    Participant
    September 15, 2015 at 05:04

    Hi,

    I used the image carousel to set up same effect, however I notice under mobile viewing the image is not centered, how do I center it? And how can I make it fade when you hover over it like how it does with the 8theme product categories images. They are currently right above and below eachother under my home page. Thank you.

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    September 15, 2015 at 06:45

    Hello,

    Please use this code in Custom CSS for mobile:

    .owl-images-carousel.owl-carousel.owl-theme img {
        width: 100%;
    }

    Best regards,
    Jack Richardson.

    Avatar: plush
    plush
    Participant
    September 15, 2015 at 07:14

    Hi Jack,

    I added the code but see no change?

    Avatar: Robert Hall
    Robert Hall
    Support staff
    September 15, 2015 at 07:19

    Hello,

    Please clean all cache and check this issue.

    Regards,
    Robert Hall.

    Avatar: plush
    plush
    Participant
    September 15, 2015 at 07:35

    Yes. Thank you team.

    Avatar: stan
    Stan Russell
    Participant
    September 15, 2015 at 09:53

    Hello plush,

    is your problem solved?

    Regards,
    Stan Russell.

    Avatar: plush
    plush
    Participant
    September 15, 2015 at 17:15

    One more thing I had asked for regarding the image carousel on my home page besides centering, how can I make it fade a little bit when you hover over it like how it does on the product category images?

  • 1 2
    Viewing 20 results - 1 through 20 (of 29 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.