CODEWITHSUNDEEP
wordpressimagewoocommerce
csandreas1
csandreas1

Reputation: 2378

Product Images don't show (Woocommerce)

My Product images appear, but when I click to enter the product page, the images are hidden and they appear only when I click. Some products show on other browsers. Some products Show only on microsoft Edge.

Edit: The real problem to that was cloudflare rocket loader, blocking some javascript of the website. By disabling that option it fixed the problem. enter image description here

Upvotes: 2

Views: 4506

Answers (5)

Roberto Petrilli
Roberto Petrilli

Reputation: 857

I solved the issue with the following jquery code

$('.woocommerce-product-gallery--with-images').css('opacity', 1);

Upvotes: 0

Sanu
Sanu

Reputation: 330

Simply add this css

.woocommerce-product-gallery {opacity: 1 !important;}

I don't really know the best way to rectify this issue.

Upvotes: 1

Elaine
Elaine

Reputation: 19

Found this css on another support site and it fixed it for me:

.woocommerce div.product div.images.woocommerce-product-gallery 
{
opacity:100!important;
}

Upvotes: 0

Chirag S Modi
Chirag S Modi

Reputation: 419

There is CSS issue, in woocommerce.css this class .product.has-default-attributes.has-children > .images has opacity:0 you need to set this class opacity:1 bellow is the snippet 

.product.has-default-attributes.has-children > .images {opacity :0}

Changes this line to 

.product.has-default-attributes.has-children > .images{opacity :1;}

Upvotes: 2

Ankur Bhadania
Ankur Bhadania

Reputation: 4148

In your Css woocommerce.css has .product.has-default-attributes.has-children > .images class set opacity to 0 Change or remove this class Or override class from your themes css 

.product.has-default-attributes.has-children > .images{opacity: 0;}

TO

.product.has-default-attributes.has-children > .images{opacity:1;}

Image is appear only on click Because after click .image class add the opacity to 1 using some JQuery

Upvotes: 3

Related Questions