Return to previous page

Product Images Width and Height - by plush

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

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.

#86082 Copied

28 Answers

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.

#86088 Copied

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.

#86117 Copied

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.

#86120 Copied

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.

#86122 Copied

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?

#86128 Copied

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.

#86135 Copied

plush

Participant

September 11, 2015 at 17:55

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

#86343 Copied
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.
#86516 Copied
plush

Participant

September 14, 2015 at 08:28

Hello,

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

#86523 Copied

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.

#86690 Copied

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.

#86740 Copied

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.

#86779 Copied

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.

#86857 Copied
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.
#86862 Copied
plush

Participant

September 15, 2015 at 07:14

Hi Jack,

I added the code but see no change?

#86867 Copied

Robert Hall

Support staff

September 15, 2015 at 07:19

Hello,

Please clean all cache and check this issue.

Regards,
Robert Hall.

#86872 Copied

plush

Participant

September 15, 2015 at 07:35

Yes. Thank you team.

#86880 Copied

Stan Russell

Participant

September 15, 2015 at 09:53

Hello plush,

is your problem solved?

Regards,
Stan Russell.

#86927 Copied

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?

#87071 Copied
Eva Kemp

Support staff

September 15, 2015 at 17:37
Hello,

Please add this code in Global Custom CSS or child style.css file:

.owl-images-carousel.owl-carousel.owl-theme img:hover { opacity: 0.7 !important; }

Regards,
Eva Kemp.
#87088 Copied
plush

Participant

September 16, 2015 at 08:30

Perfect. I’m glad there’s usually a workaround to most things with this theme very flexible.

Thank you.

#87175 Copied

Eva Kemp

Support staff

September 16, 2015 at 08:38

Hello,

You’re welcome.

Regards,
Eva Kemp.

#87182 Copied

plush

Participant

September 17, 2015 at 19:30

Is there a way to do same above effect to fade a little when you hover over image on the brands page I have for each single image brand on that page when you hover over it? Thank you.

#87666 Copied

Eva Kemp

Support staff

September 17, 2015 at 20:12

Hello,

As I see hover effect is working for images in brands slider on home page.
Please show a screenshot where you want to modify it.

Regards,
Eva Kemp.

#87685 Copied

plush

Participant

September 17, 2015 at 21:45

Hi,

Yes on the homepage the hover effect is present, I would like to also have it on the brands page I created with single image of each brand. See link to page in private content. Thank you.

Please, contact administrator
for this information.

#87711 Copied
Eva Kemp

Support staff

September 18, 2015 at 07:57
Hello,

Please use this css code:

.wpb_single_image .vc_single_image-wrapper.vc_box_border img:hover { opacity: 0.8; }

Regards,
Eva Kemp.
#87786 Copied
plush

Participant

September 19, 2015 at 00:06

Great. Thank you.

#88048 Copied

Jack Richardson

Support staff

September 19, 2015 at 08:20

Hello,

You’re welcome.

Best regards,
Jack Richardson.

#88066 Copied
Viewing 29 results - 1 through 29 (of 29 total)