WooCommerce Product Gallery Carousel

[johannaaimara]

We are facing a problem with the Product Gallery of Woocommerce. On our Product Detail Site Template we would like to display multiple images but make them appear all in one row. The default Wocoomerce Product Image Widget creates a second row when adding multiple images.

We created two different variants (see: https://musesum.ch/product/uhu-schwarz/) which should somehow work as we like but we need further assistance (Maybe there is even a easier way?).

Variant 1 (two widgets combined and linked via Javascript (?): First we put the Image Widget with Product Thumbnail selected. Below we added an image carousel with the product image gallery selected. Is it possible to link those two widgets together with a code like "When I click image 2 from the image carousel display it on the Image Widget on top."?

Variant 2 (media carousel): This looks like the best solution but does not work because we cannot choose the "prodcut gallery images" for the slideshow. Is it possible to make the slideshow work with the product thumbnail an product gallery images?

[DanielCyran]

This "product images" widget is awful. The Elementor team should have upgraded this widget or created a new one a long time ago so that the thumbnails are in slider form. How can you make a proper store with such an ugly widget?

[DanielCyran]

@nicholaszein Would you be able to do something about it?

How to make a decent store with an ugly and old product photo layout?

most people have to use external plugins because it's faster and easier (but generally worse for the store)

[aderlo]

The 'Product Images' widget is a weak point for online stores using Elementor PRO.

[DanielCyran]

An additional problem with the "product images" widget is that when using the Hello Elementor theme, the thumbnails are blurry without applying the appropriate code:

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
return array(
'width' => 300,
'height' => 300,
'crop' => 0,
);
} );