WIP: WooCommerce Gallery element - Image links to media file

[joep]

Hi Guys,

I actually created a “How to” at first but i think this should be be reported as a bug.
When using the Products Gallery element on, for example, the homepage, the thumbs are working as image swatches; but when clicking on the main image the link is to the media file itself instead of the product post.
Small video: Protected Content (passw: jasper)

Expected bevaiour:
When clicking on the main image; the visitor should proceed to the product page.

Related post:

Swatches on image gallery or Link on first image Product Gallery?

Hi Guys, I created a WooCommerce Products query loop on the homepage with the featured image and image gallery (tag: {woo_product_images}) as elements where the main image links to the product page and i have a nice zoom effect and overlaying icons:on-hover. The downside is that the color swatches are not working in this setup: [image] [image] Now the client DO would like to use the image swatches on the homepage. A solution for this is to use the native “Product Gallery” but the main image…

Jasper

[timmse]

Hi Joep,
Thanks so much for your report!

I was able to replicate the issue and added it to the bug tracker.
Regarding linking to the product page: that’s a feature request, but I’m not quite sure if that would be the intended behavior. Usually, the product gallery element is used in a single product template. For listings, it’s common to use a single product image or an image slider that can be linked to the product page, if necessary.

Best regards,
timmse

[joep]

Hi Timmse,

If i may vouch for the Products Gallery element with link to the product page.
It is being used as showcase for products on the homepage; I have built it with a normal query loop as well showing the main image (linking to product) + gallery below but the downside here is that the swatches are not working this way.

Could also be another way that somehow we can enable the swatches in this element structure with featured image/ Image Gallery.

Jasper

[timmse]

The product gallery element uses the default WooCommerce code, which means that what you want is not possible either outside of Bricks by default, unless I am mistaken.

You are welcome to submit this as a feature request on the idea board so that we can see if there is demand for it: Idea board – Bricks

@joep

Could also be another way that somehow we can enable the swatches in this element structure with featured image/ Image Gallery.

No, since both are completely different elements. The only way I see is to create a custom element, which requires some coding skills: Create Your Own Elements – Bricks Academy

[joep]

@timmse

The product gallery element uses the default WooCommerce code, which means that what you want is not possible either outside of Bricks by default, unless I am mistaken.

Hi,

Hmm… i do not totally understand the above text … i am using it inside Bricks templated homepage.

@timmse

For listings, it’s common to use a single product image or an image slider that can be linked to the product page, if necessary.

This i understand :-).

In the current client website (elementor based) they also have Products on the homepage (as showcase) with swatches working so therefore i was looking for a solution to replicate that.

Jasper

[timmse]

Let me try to explain it again:

Bricks utilizes the native WooCommerce product gallery PHP/HTML/JS/CSS code within the product gallery element (and every other WooCommerce element), leveraging the native functionality provided by WooCommerce.

The fact that it is possible to open the image itself is a bug that I have confirmed. Assuming that it should be possible to change the link destination (which does not actually exist and is only “usable” due to the bug) is not a bug, but a feature request.

I hope that was a little clearer

[joep]

Ah cool ! Yes, understandable now
Will write a nice understandable Feature Request