woocommerce Badge and jQuery ADD TO SHOPPING BAG and wishlist doesn't work

[r3style]

Thank you.Certainly,It was not displayed lengthwise.
But loading first view is second images and then be replaced first images…an unfavorable impression.

Can you not do loading first view first images?

[Swift Ideas – Ed]

Good spot. This will fix that:

ul.products li.product figure.product-transition-fade > a > .product-image:first-child {
	z-index: 1;
}

– Ed

[r3style]

That won’t change anything.
Already hover action is fine.

I mean just ”when loading page” view second images , loading finished replaced first images.

[Swift Ideas – Ed]

Sorry, pasted the old code. This is the new:

ul.products li.product figure.product-transition-fade > a > .product-image {
z-index: 3;
}

– Ed

[r3style]

That won’t change anything.

[Swift Ideas – Ed]

Have you tried it? I’m running that here and it’s working 100%.

– Ed

[r3style]

Of course.

Chrome , Sometimes problem Sometimes fine.
You may understand it if you display SHOP PAGE in IE11.

Second images Appear for an instant ”when loading page”…
So second images hidden at first.
I add this custom css.　It have fixed ie11,Chrome.

Should I add -webkit-,-moz-,-ms- ?
Please tell me correct description

ul.products li.product figure.product-transition-fade > a > .product-image.second-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}

ul.products li.product figure.product-transition-fade:hover > a > .product-image.second-image {
    visibility:visible;
    opacity:1;
    transition-delay:0s;
}

[Swift Ideas – Ed]

This would likely be best:

ul.products li.product figure.product-transition-fade > a > .product-image.second-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility:hidden;
    opacity:0;
-moz-transition:visibility 0s linear 0.5s,opacity 0.5s linear;
-webkit-transition:visibility 0s linear 0.5s,opacity 0.5s linear;
-ms-transition:visibility 0s linear 0.5s,opacity 0.5s linear;
-o-transition:visibility 0s linear 0.5s,opacity 0.5s linear;    
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}

ul.products li.product figure.product-transition-fade:hover > a > .product-image.second-image {
    visibility:visible;
    opacity:1;
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
-ms-transition-delay:0s;    
-o-transition-delay:0s;
transition-delay:0s;
}

[r3style]

Thank you.

[Rui Guerreiro – SUPPORT]

No problem. Thanks Ed.
-Rui