I'm making a WordPress website with WooCommerce and I need to resize the product thumbnails in the display products (category) page.
In particular I have this situation:
And I'd like to have a page like this:
Is it possible? I've checked that the CSS class should be img.attachment-shop_catalog.wp-post-image and I've tried with -webkit-transform:scale(1.2); but my product image thumbnails overlap. It's not a problem of WooCommerce images settings (the "force hard crop" option is disabled), so I think I have to add a custom CSS. Could you help me to fix this?
Thanks in advance!
I would have checked all surrounding classes cause it is probably limited by them, or there is padding-right set on outer container.
I would have tried to find (using Chrome possibilities) and try first to locally resize them and product container in CSS.
Related
I’m setting up a Woocommerce store and all the product images are blurry.
I suspect it’s the issue described in this article: docs.woocommerce.com/document/fixing-blurry-product-images
“Your image dimensions should match or be higher than those of your theme.”
The original image sizes are definitely large enough.
I tried to implement the solution from the article above, but I’m having trouble fixing the problem in the new in Appearance > Customise > WooCommerce > Product Images.
I've tried everything I could find, but nothing seems to be working.
We use Verdure - Organic Tea Shop Theme and WooCommerce version 5.1.0.
The images look completely fine on mobile.
Any advice would be greatly appreciated.
Maybe Appearance > Customize > WooCommerce > Product Images is not the place you need to look, your theme probably overrides this. Instead of looking for image size settings in Appearance > Customize, try looking if your theme has a custom Appearance settings panel. It seems like it does!
I'm facing a situation in my shop page.
https://www.soygorrion.com.ar
Images are not displaying in the single product page of WooCommerce. I can see the thumbnails, but when I click in the product to see it the image does not display.
Example: https://www.soygorrion.com.ar/tienda/bolsos/ombu/
I tried to regenerate thumbnails but it doesn't work. Also I'm able to see the images on the Multimedia page and open them from their link with no problem.
Can someone give me a hint? When I inspect the element from chrome I see that the image URL links are written this way
data-default="[{"large":["https:\/\/www.soygorrion.com.ar\/wp-content\/uploads\/2019\/12\/Pin_Paco-650x650.jpg",650,650,true],"single":
Edit: also I tried to deactivate plugins to see if that was the problem.
thank you!
Okay, the problem was this CSS code:
div.noo-woo-images-wrap {
display: block;
}
display was set to none.
Here are the settings i use on the website for the woocommerce images.
If you visit the website homepage, you will notice that the images with the 3 rows are being cropped but everywhere else they are normal. (right below in the special offers section they are okay, with the same size)
If you inspect an image and open in new tab, you will notice they are actually cropped. Those rows are created with siteorigin plugin and the widget is the product tyche widget of the theme tyche.
What could be the solution of this issue? Why the images are being cropped at those 3 rows? (Gaming, accessories, merchandise)
It might be the issue for different sizes of the 3 images. Try to do all the images equal size then add the pictures again. Hopefully, it will work.
Okay it was a theme issue and not Woocommerce.
Thanks to Simple Image Sizes plugin, I managed to fix the issue simply by disabling cropping on all of the theme images and resizing those image to the proper size so they get the perfect quality!
I have been trying to resize the thumbnails in lightbox but can't figure it out.
My current thumbnails are cropped and are about 50x30 px.
I need them to be square like 50x50.
I looked online for an hour but can't seem to find anything that works.
Below is a screenshot of the problem:
https://i.stack.imgur.com/yltym.jpg
Thanks for any help
You can change the sizes of WooCommerce thumbnails by going to the WordPress admin and navigating to WooCommerce > Settings > Products > Display. Then, adjust the sizes of WooCommerce Thumbnails. You'll also need to regenerate the thumbnails using a plugin, like Regenerate Thumbnails.
There's more information at the WooCommerce Docs.
Additionally, if those settings don't do it for you, you can drop in a function to adjust the WooCommerce thumbnails further. See this StackOverflow answer.
I installed the BxSlider as a plugin for Wordpress and inserted the php script code to show above the footer on all pages.
The images scroll perfectly across the page except I'm trying to reduce the spacing between the images to show more than one image per transition.
To best explain the website shows as follows http://www.harvestoffalyfoodfestival.com/
How and where can I edit the html/css code to make these adjustments.
The slider settings within the plugin 'Slider Margin' doesn't have any effect when entering your option amount? Thanks
You will need to set a width on the bxslider container, as at the moment it's 100%.
Ideally we need to see more code, as this could also be a settings issue within bxslider.
Have you got your js settings for bxslider?