Product image flipper plugin not working with Leto:Product loop widget


#1

Hello,

I want my products to flip images on hover. I installed and tried two plugins that should be able to do this

  1. https://wordpress.org/plugins/woocommerce-product-image-flipper/
  2. https://wordpress.org/plugins/wc-secondary-product-thumbnail/

Both of them work with the Related products on Product page, but none of them works with Leto: Product loop widget I got on my main page, which is the page I want my customers to buy from.

I use WP 5.0 and newest version of Leto theme and PageBuilder plugin.

Is there a way to make this work? Thank you.

Best regards,
Stanislav


#2

Hello there,

Please check your product if it has gallery images uploaded.

Share one of your products’ link here, so I can inspect and troubleshoot it.

Regards,
Kharis


#3

Hello,

almost every product has another photo in gallery. The page name is www.naplece.sk

Thanks


#4

Hello there,

The plugin works on shop or archive product page.

However it doesn’t on the product loop widgets as seen on the home page. This normal as it has special selector that differs to the shop page’s. Changing it will require a lot of time to code, test and debug. I am sorry. This situation is really out of the scope our support service. For third party plugin integrations, you might need to hire a WordPress coder.

Thank you for your understanding.

Regards,
Kharis


#5

Hello,

yes I know it runs on Shop and Products page. The problem is that the Shop page is built with Elementor plugin and I can’t get the Elementor editor to run, it’s just stuck on loading page. So I can’t edit the page and I’m looking for a different solution, so I can dump Elementor.

So your widget is not going to be able to work with this image flipper plugin? That’s unfortunate.

I can’t find anywhere how are those Related products displayed. It’s some kind of a widget or something else?

Thanks.

Regards,
Stanislav


#6

Hello there,

Try with product shortcode and insert it with the Text widget in your elementor.

For example:

[products limit="4" columns="4"]

And add the below CSS code to Appearance > Customize > Additional CSS; to define product shortcode’s columns.

    .woocommerce[class*="columns-"] ul.products li {
      float: left;
    }

    .woocommerce[class*="columns-"] ul.products li {
      margin-right: 3.8%;
    }

    .woocommerce[class*="columns-"] ul.products li.product.first {
      clear: both;
    }
    .woocommerce[class*="columns-"] ul.products li.product.last {
      margin-right: 0;
    }

    .woocommerce[class*="columns-"] ul.products.columns-1 li.product {
      float: none;
      width: 100%;
    }
    .woocommerce[class*="columns-"] ul.products.columns-2 li.product {
      width: 48.1%;
    }
    .woocommerce[class*="columns-"] ul.products.columns-3 li.product {
      width: 30.7966666667%;
    }
    .woocommerce[class*="columns-"] ul.products.columns-4 li.product {
      width: 22.15%;
    }
    .woocommerce[class*="columns-"] ul.products.columns-5 li.product {
      width: 16.96%;
    } 
    .woocommerce[class*="columns-"] ul.products.columns-6 li.product {
      width: 13.4933333333%;
    }

Regards,
Kharis