SOLVED: WooCommerce Single Product Template wrong product image when query loop is present

Bricks Version: 1.5.7
Browser: Chrome (latest)
OS: Windows
URL: MUC – S/O YELLOW

I have a query loop for related products inside the product template (see URL at the end) which somehow messes up the product image gallery. For some reason, it uses the image from the last loop item (related products) as the main product image.

The other products have the same problem.

If I remove the related products section, it shows the correct image.

Hi Tobias,
Thanks so much for your report!

Unfortunately, I cannot reproduce the issue. Can you show me the settings of your "related products " loop?

Best regards,
timmse

Hi @timmse,

it’s a pretty simple loop inside a nestable slider.

If you give me an email address, I can send you log in credentials.

Best,
Tobias

Hmm… weird :thinking:
Would you be so kind as to send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase?

Best regards,
timmse

Hi @timmse,

unfortunately, it’s also not working without slider. Do you have a workaround for the problem? Or do you at least know what causes the problem? Maybe I can find a workaround myself then.

Thanks!

Tobias

Not yet, with a regular loop, it worked fine in my tests. I exported your template and imported it into my test installation: no problem at all. I’m still investigating…

Hi Tobias @0x7466 , this is an update on the investigation.

The root cause of the issue is because of multiple variable product add-to-cart forms appear on the same page.

Explanation:
In your MUC product page, MUC itself is a variable product. Coincident, the other 2 related products were variable products too. At this moment, 1 of the WooCommerce JS script “accidentally” grabs the last variable product image from the entire DOM and shows it in the product gallery.

Temporary Solution:
You could remove the Add to cart element in your product item template and the product gallery should works as usual. Alternatively, you could replace the Add to cart element with normal button + dynamic post_url to link visitor to the respective single product page.

By default, WooCommerce will do the same and auto-replace add-to-cart button with “Select Option” button in any products loop too.

We have recorded this in the bug tracker and will improve this in future updates.

Thank you very much for your time and report.

Regards,
Jenn

2 Likes

“We have…” @itchycode Are you joined Bricks team or I’m missing something?

1 Like

Hey Tobias,
Bricks 1.6 (Beta 2) contains a fix for this problem.

You can download it manually in your account:
https://bricksbuilder.io/account/?v=1.6-beta2

Best regards,
timmse

Hi @timmse,

thanks for the update. This bug is now gone.

However, I think you’ve introduced a new bug with the sticky header. When the header scroll hiding feature is enabled, it moves the site up when the header is hidden and down when it’s shown.

See it for yourself. Scroll down and up to hide/show the header.
https://soyellow.theodor.host.tfm.agency/

Hey Tobias,
Thanks for confirming. True… the content jumps up because of changing the position property from sticky to fixed, which is needed to fix an issue with the mobile menu set to position right :expressionless:

Definitely have to look at it again, thanks for the tip!

Best regards,
timmse

Hey Tobias,
We’ve fixed this “jumping content” in Bricks 1.6.1, now available as a one-click update within your WordPress Dashboard. Please let us know if you are still experiencing issues.

Best regards,
timmse

1 Like