Images not showing when using WooCommerce shortcodes

[kvpadmin]

I’m trying to make a new home page with links to featured and popular products using woo commerce shortcodes but none of the product images are showing.

The stack and demo content I imported contained a mouseover effect on the product images originally and I coded it out in CSS with the help of support here when we first set up the site. I believe these image not showing could be related to that but I have no idea how to fix it. I’ve tried all kinds of things in the CSS but nothing I’ve tried yet has helped.

Any ideas?

I’m staging the page here for now: https://www.singh-ray.com/home/

[thai]

Hi There,

I couldn’t find any custom CSS that hiding the product images.

Please try testing a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes!

[kvpadmin]

Deactivating the plugins made no difference.

[christian]

Hey @kvpadmin,

Are you using the latest version of Woocommerce (3.3.1)? It is currently not compatible with X. In this case, you will need to downgrade to 3.2.3 which is the latest compatible version.

If that is not the case, please give us WP admin access in a Secure Note.

Thanks.

[kvpadmin]

I am using woo commerce 3.2.6. Woo made me upgrade to that last month to fix another issue that popped up.

[kvpadmin]

I highly doubt it is a compatibility issue though. I’ve had multiple issues related to that animation that imported with the demo content. I ** AM ** using that animation in the carousel and post images on the current home page. I don’t want it on any of the products in the store though.

I’ve had to code the animation out for each product type individually (single, variable, bundle, virtual, etc). So I’m thinking the site sees these featured items as a different post type for some odd reason and that’s why it’s acting up like the others did before.

[rad]

Hi there,

Images are there but covered by your custom CSS background.

.woocommerce li.product .entry-wrap:before {
    background-color: #ffffff !important;
}

Please change that to transparent.

Thanks!

[kvpadmin]

That worked but the product name and button are now overlapping the images.

[christian]

Please add this also

.page .woocommerce li.product .entry-product {
    min-height: 400px;
}

.page .woocommerce li.product .entry-wrap {
    top: auto;
}

Hope that helps.

[kvpadmin]

That did it. Thanks!

[nabeel]

Glad we could help.

Cheers!