Premium WordPress Themes, Templates & Plugins › Support › WordPress Theme Support › Cosmos › Disable Product Image Zooming
- This topic has 7 replies, 2 voices, and was last updated 10 years, 8 months ago by
ThemeofWP.
- AuthorPosts
-
- August 25, 2014 at 6:59 am #417
chiefnaka
MemberI want to disable the product image zoom on the product page. I have my images set at 220 X 220 and want them to be rendered that size on the product pages. However, they “upscale” to 440 X 440 and I cannot find the code to get that to stop!
Thank you for helping me. All plug ins are current.
I have the Cosmos theme, all current, and Woocommerce installed and Simple Images plug-in installed but it will not stop the up-scaling or down-scaling for thumbnails, which is OK for the thumbnails for now.
You can see this at htp://c-clearantifog.net/shop. Then click on 1 ounce spray bottle to see the image size. Right click view image p0roperties and you will see the up-scaling. This is what I want to stop.
Thank you!
Terry
- August 25, 2014 at 7:09 am #419
ThemeofWP
KeymasterHi Terry, firt of all thanks for prefer our items. We hope these answers works for you.
Please open the style.css find with CTRL+F line “1912” and delete this style or comment.
[code title=””].woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
width: 13.8%;
}[/code]product listing page thumbnails will be turning normal height/weight.
Also for the single product image size please add this style to you style.css:
[code title=””].woocommerce #content div.product div.images img, .woocommerce div.product div.images img, .woocommerce-page #content div.product div.images img, .woocommerce-page div.product div.images img {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
display: block;
height: auto;
transition: all 0.2s ease-in-out 0s;
width: auto;
}[/code]Both image sizes will be turn regular size.
King Regards
ThemeofWP.com Team - August 25, 2014 at 5:04 pm #424Member
Thank you! That fixed the image size, but now I got too much white space in the product box between the image and the text description.
How do I center the image in the box? I tried “position: center;” but the image did not move.
You can see the issue here: http://c-clearantifog.net/shop/1-oz-spray-bottle-c-clear-lens-cleaner-anti-fog/
The theme is getting me where I want to go, so let’s keep going!
Terry
- August 25, 2014 at 7:30 pm #426Keymaster
Hi, please add these in to your style.css
[code title=””].woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
margin-bottom: 2em;
text-align: center;
}
}[/code]also add this:
[code title=””].woocommerce #content div.product div.images img, .woocommerce div.product div.images img, .woocommerce-page #content div.product div.images img, .woocommerce-page div.product div.images img {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
display: inline;
height: auto;
text-align: center;
transition: all 0.2s ease-in-out 0s;
width: auto;
}[/code]Maybe you can change the text-align: center; to text-align: right;
- August 25, 2014 at 8:19 pm #429Member
Outstanding! Thank you!
I have couple of cleanup issues I may need some help with, but for now I am moving forward. Thank you for your great support!
Terry
- August 25, 2014 at 11:44 pm #431Member
Due to your support I am recommending your themes to my website designers. They have built over 300 websites and are now hooked on WP.
-
- AuthorPosts
- You must be logged in to reply to this topic.