WordPress.org

Forums

[resolved] [closed] woo commerce: product page image too big (34 posts)

  1. hartmutnz
    Member
    Posted 2 years ago #

    Hi, have adjusted the SETTINGS in Cataloge settings, set the product image sizes in WP, and Woocommerce options, all good, but on the actual product page it still shows up as a HUGE image (even bigger than the uploaded image) Anyone found a way to make them look normal size about 150 px by 200 or so? Page: http://www.artandcraftconnection.com/woocom2/shop/scarf-1/

    Here are the settings I selected on the settings page and saved:
    Catalog Images Width 100 Height 150 Hard Crop
    Single Product Image Width 150 Height 250 Hard Crop
    Product Thumbnails Width 90 Height 90 Hard Crop

    Also Regenerated Thumbnails using the regenerate thumb plugin

  2. inspirata
    Member
    Posted 2 years ago #

    Having same issue - image size is only 142 x 200 but image posts at over 300px square!

  3. ljp
    Member
    Posted 2 years ago #

    Same problem here - I changed the image size in the catalog tab to 150 x 225, and uploaded a pic of exactly those pixel dimensions, but it still shows the same enormous image -- only fuzzy because the original image is now stretched to cover the size. It undoubtedly means I will need to go into the actual css, but I don't know where. Can someone help?

  4. inspirata
    Member
    Posted 2 years ago #

    I found a solution - I added this into the custom.css file

    .single-product.layout-full .images img {
    width: 200px;
    }

    where 200px is your preferred image width.

    You might want to move the product summary over too, once the image is smaller. So I then added:

    .single-product.layout-full .summary { width:600px; }

    Hope this helps!

  5. ljp
    Member
    Posted 2 years ago #

    Inspirata, what you described sounds like exactly what I want, but I don't see a custom.css file anywhere in the woocommerce plug-in folder. I am supposed to make one? Forgive my ignorance, I'm rather new to this.

  6. inspirata
    Member
    Posted 2 years ago #

    This was in my theme folder - so it might depend what theme you're using. Sorry I should have mentioned that. I use Wootique.
    If you use Firefox and install the plugin Firebug, you can determine the div id or class that needs to be altered. I'd imagine it would be something similar though. My understanding is that Woocommerce creates the styles on the product pages, but I could be completely wrong.

  7. hartmutnz
    Member
    Posted 2 years ago #

    Hi thanks inspirata, I am using the Pinboard theme with the woocommerce plugin, so I added your code in the custom css, which pinboard has.. works good so thanks. If someone doesn't have the custom css they could add the code to the style.css it should work, just update it again if you upgrade the WordPress version, OR better, create a child theme first.. still have to learn that , ha,ha.. take care,Groggo

  8. ljp
    Member
    Posted 2 years ago #

    My theme is Weaver II, which is totally customizable; you can do just about every change you want in admin. I believe there's a way to add custom css there. I'm still working on it. Or maybe I'll use a child theme. I'm still learning about that too. If anyone else is using this theme, I'd be happy to hear from them.

  9. ljp
    Member
    Posted 2 years ago #

    I got it fixed - I temporarily disabled the CSS style options in Woocommerce -- and the image instantly jumped to the right size, so the problem is clearly one with woocommerce styles themselves, not theme styles. I carried out a search and found the single product image in woocommerce.css and reduced it from 100% to 50% Now it looks perfect!

  10. jstelluto
    Member
    Posted 2 years ago #

    Having a similar problem. I've used the code above, deactivated and reactivate my theme and woocommerce. Then regenerated the thumbs.
    Product image is set to 300x300px but is displaying HUGE! When I deactivate WOO.css, it fine - just ugly.
    The woo.scc stylings are are fine except for no left margin and a huge product image. Any ideas?
    Here's the page I'm referring to: http://www.firepitfridaymediagroup.com/tuttobene/shop/torrone/

  11. hartmutnz
    Member
    Posted 2 years ago #

    I found no solution really. But I think if you upload 2-3 images per product it sizes them down accordingly as they form a grid. The other solution I did, was, I bought the premium woothemes that have woocommerce built in, they work much better, cost me $70 but I think it was worth it. They also give you premium support for about 3 questions.. they say a year, but it gets slower each time you ask , so ask wisely, ha,ha,.. You get 2 bonus themes too, I am doing sites for other people so can use a lot of it. Hope this helps..

  12. jstelluto
    Member
    Posted 2 years ago #

    I have another site I'm working on where I'm using only one image. this is an actual WooTheme. It works great. I just don't want to switch themes when I'm so close to wrapping up this project. especially if someone has any idea of a simple css snippit to put in.

  13. hartmutnz
    Member
    Posted 2 years ago #

    ..I UNDERSTAND, ... IF "especially if someone has any idea of a simple css snippit" You are ok... hope that happens soon for you. I couldn't wait. I learned though to focus a LOT more on what theme to use for what project.. before I start. Man, the times I spent re-theming bad results.. good luck, Groggo

  14. jstelluto
    Member
    Posted 2 years ago #

    I agree totally :) Hope someone has an idea. The theme developer couldn't help. I've got an email into Woo for help.
    thanks

  15. hartmutnz
    Member
    Posted 2 years ago #

    Hi again, a strange thing happened. I had a problem with HUGE thumbnails in the category pages. they stretched over the whole page.. re-installed pinboard theme first, worked in Chrome, but not Internet Explorer. De-installed some plugins I did not need, no change.. then I checked the widgets and re-saved what was there one by one, suddenly everything was back to normal! Thumbnails all good size, category pages fine.. so maybe it has something to do with the sidebar widgets? Worth checking. Cheers, Groggo

  16. jfish5
    Member
    Posted 2 years ago #

    I was having a similar problem with the product image being too big. Also, the catalog images and product thumbnails were too big and blurry. Here is the fix that is working for me. The first two snippets came from here. Rather than fixing the width for the single product image, I set it to auto, which allows the image to conform to the dimensions set in Woocommerce/Settings/Catalog

    ul.products li.product a img { width:auto; height: auto; }
    
    .related ul.products li.product img, .related ul li.product img, .upsells.products ul.products li.product img, .upsells.products ul li.product img { width: auto; height: auto; }
    
    .single-product.layout-full .images img {
    width: auto;
    }

    I placed all of this in custom.css

  17. pininja
    Member
    Posted 1 year ago #

    I spent hours looking up the solution to this problem (mainly because I had it myself) and discovered what I've done.

    Go to woocommerce-> general

    and see if you unchecked "enable woocommerce css"

    No matter make sure it is checked! Or else your formatting for your product page will result in a full width picture and etc.

    I hope I saved you some trouble.

  18. sputnik suzi
    Member
    Posted 1 year ago #

    Hi, thanks for this super-useful relevant thread!

    I'm having exactly this problem with massive images. I too found that disabling the Woo css fixes it, but the layout/ buttons etc look ugly.

    I've tried both of the css edits suggested by jfish and inspirata, but they don't seem to have any effect, not sure why ... I've done the edits in the style.css file (I don't have a custom.css file - I'm using Zeecorporate).

    I'm a bit new to css ... can anyone help as I'm completely stuck! I can't change themes as my client is wedded to the look of his theme and really doesn't want to change it.

    Thanks so much!

  19. sputnik suzi
    Member
    Posted 1 year ago #

    Following another tack, ljp where would I find woocommerce.css? I thought I'd try your edit as it makes sense that the problem is in the Woocommerce styles rather than the theme styles. But I can't find this file ...

  20. cjfort
    Member
    Posted 1 year ago #

    I too am still struggling. None of the above fixes help my pinboard/woocommerce site. I did find this code `body div.product div.images img, body #content div.product div.images img {
    width: auto !important;}` on the same post where jfish5's fix was found. It makes the product image clear, but smaller, and all the other images are still blurry - I really want to use pinboard, and the woo commerce themes have the same problem! I also am new to coding and know just enough to set my own site up...

    my site is cindyjfort.com.

  21. sputnik suzi
    Member
    Posted 1 year ago #

    Cindy I'm not sure if I can help because you say you already tried the above fixes, also I'm just a beginner at css so I'm crashing around in the dark somewhat! But just to say I managed to sort mine out, using ljp's solution, above. I edited the woocommerce.css file and changed the product pic size to 30% (it was showing as 48%).

    Did you try this already?

  22. hartmutnz
    Member
    Posted 1 year ago #

    Hi again, I really did never fix that problem, and even "payed" for a commercial woo theme. BUT when I activated the right sidebar on the product pages, which works for me, the product image gets pushed over to the left and resizes itself to a normal picture.. not sure if this all you need. I use the sidebar on the product pages for "latest products" etc and the client liked it..
    You can view the product page on my test site:
    http://www.artandcraftconnection.com/alaska/product/2/
    Maybe it helps you? until code solutions work...

  23. DaxBrat
    Member
    Posted 1 year ago #

    Thanks Inspirata. That solution worked perfectly for me.

  24. bbernstone
    Member
    Posted 1 year ago #

    oy!! i found the mistake made by woocommerce.. you cant even change it unless you get yourself ftp access to the woocommerce.css file (in wp-content/plugins/woocommerce/assets/css) .. in there (if you make it cleaned up by going to http://procssor.com/) you will find a line (do a search for "img") that has width: 100%.. change this 100% to auto and you are all set!!

  25. cjfort
    Member
    Posted 1 year ago #

    Hallelujah!!! It has worked! I had to go into the woocommerce.css (had not done that in my post above) and made the change bbernstone suggested and my site is doing what I want it to!

    Actually, the images were not 100% clear after going into the css file, so I did do one more thing that I hadn't thought to do till after I had posted on this thread...I went into the woocommerce settings in my dashboard; in the "catalog" tab, near the bottom there is a place to change 3 different image sizes. I changed each of these sizes to 300 x 300 and kept the hard crop box checked, and that made the final adjustment for the images...

    Thanks to everybody who posted today - you each moved me along to this place of success - and thank you bbernstone for the procssor.com link - I had not come across this wonderful tool till now!

  26. sputnik suzi
    Member
    Posted 1 year ago #

    Thanks bbernstone and lfp from me too!

    I got part way along to a fix after seeing ljp's post, but the image was still blurred (but smaller) when changing the percentage width in woocommerce.css. Changing the image width to 'auto' as per bbernstone's suggestion has it perfectly crisp, presumably this just uses the original image size? Anyway it looks great.

    Thanks all!

  27. amst3l
    Member
    Posted 1 year ago #

    Thanks a lot! exactly what I needed! Too bad you can't give rep points to someone because you definitely earned them!

  28. fiorita
    Member
    Posted 1 year ago #

    Hi, I have problem with product pictures - I want them to be the same size the categories page and main e-shop page. but they are all different. How do I fix it

    The other problem, that I have blurring images of related products and the product itself in the single product page.

    Please help

    http://www.e-levandule.cz/e-shop

    Thanks

  29. CindyJ83
    Member
    Posted 1 year ago #

    My product images are huge... Please help!

    At first my problem was all of my images in my product categories we fuzzy. I wrote the site the made my childs theme and they gave me the code below to try.
    I added this code to my style sheet...

    ul.products li.product a img { width:auto; height: auto; }

    ul.products li.product a img { width:auto; height: auto; }

    .related ul.products li.product img, .related ul li.product img,
    .upsells.products ul.products li.product img, .upsells.products ul
    li.product img { width: auto; height: auto; }

    This did fix my problem with blurry images however now my related product images are huge. Some products its just one, some both. I can't figure out how to fix it and I am willing to pay someone that can. I just made my website live and I really want it to look professional. At this point I would be happy getting them resized or no related products to show at all.

    Please Help!! http://www.lovemodest.com / Cindy@lovemodest.com

    Thank you,
    Cindy

  30. cjfort
    Member
    Posted 1 year ago #

    CindyJ83 - I remember that somewhere along the way, I think on the WooCommerce site, there was a suggestion to make all the "Featured Image" photographs the same size, about 600px by 600px, so that the catalog page images would be consistent. I wonder if that would help? And then, in my above post, I had gone into the Woo-Commerce settings page, catalog tab, down in image sizes, I set everything to 300 x 300 (or 600 x 600 works in my site, too). And I regenerated my thumbnails as the settings page suggest to do. That is when everything looked right for me, and it might be worth trying before you pay someone - by the way, your site does look great, even with the extra large "related products"- nice job!

Topic Closed

This topic has been closed to new replies.

About this Topic