Tabs block not switching correctly unless duplicate tab block is also present

Hi WoodMart Support,

I’m having a strange issue with the WoodMart Tabs block on my homepage.

Site URL:
https://harvinderb1.sg-host.com/

The section is called “What Is Popular Now” and uses the WoodMart tabs block with two tabs:

For Dogs
For Cats

The expected behaviour is simple: when I click For Cats, the content should switch from the dog categories to the cat categories.

However, the tabs do not switch correctly.

What makes it confusing is that I recreated the same tabs block again directly below the original one. When both tab sections are visible on the page, the lower one starts working, but the upper one does not.

I tested this several ways:

Original tabs block on its own: tabs do not work.
Newly recreated tabs block on its own: tabs do not work.
Both tabs blocks visible together: the bottom one works, the top one does not.
If I hide the top one and leave only the bottom one visible, the bottom one stops working again.
If I hide the bottom one and leave only the top one visible, the top one still does not work.

So it seems like there may be some kind of JavaScript initialisation issue, duplicate block dependency, or bug with how the WoodMart tabs block is being loaded/triggered on this page.

I have tried publishing, clearing SG Cache, refreshing, and recreating the block from scratch using the WoodMart/Gutenberg block editor.

I also temporarily added a third tab as a test, but that did not fix the issue.

Please could you help me identify why the WoodMart tabs are not switching correctly when only one tabs block is present on the page?

I have attached a screenshot showing the two duplicated sections. In the screenshot, only the lower section works when both are visible.

Thanks,
Harv

Attachments:

You must be logged in to view attached files.

Hello,

Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site and then check the issue. I am sure your issue will be solved. Then, activate the 3rd party plugins one by one and check which plugin is creating the issue for you.

Otherwise, if the issue still exists, then keep the 3rd party plugins deactivated and let me know so I will check and give you a possible solution. Also switch the child theme to the parent theme.

Best Regards

Hi,

I have only installed the plugins which xtemos recommend. The others are the default ones by Siteground (hosting provide) which I need.

It was working but when I changed the products, it stopped.

I copied the exact setup from the demo theme and, like I said, when I have two sections the same, one works one doesn’t.

When I delete one (the one that doesn’t work) then it stops working and vice versa.

I need to be using the Child Theme too so using the Parent Theme is not an option.

Please help me investigate this.

Hello,

Please check your site again and test the tabs on the homepage.

I have created a new Tabs section below the one that was not working and added two tabs there. The newly created tabs are working correctly on your site.

This indicates the issue is related specifically to the existing tabs block configuration/content rather than a general problem with the WoodMart tabs functionality itself.

Please compare the non-working tabs section with the newly created working one and recreate the original section from scratch.

Best Regards

This is the strange thing, I deleted the two block above and now the one that you created, which was working, has stopped working..

Hello,

So, has your issue been solved?

Best Regards.

Really? Did you not read my message?

I’m sorry if I wasn’t clear enough.

No, it is not working.

You create a tab that worked.

I deleted my tabs that were not working.

Now, your tab is not working anymore.

Hello,

The problem is caused by the custom block and its styles above the tabs, which overlap the block with the tabs. Check the video https://gyazo.com/fad2eca2077d1ac3e5c5366a4c668617

Kind Regards

Understood. Thanks for helping me find the issue.

I have fixed it using this css:

.rpf-trust-wrapper,
.rpf-trust-bar,
.rpf-hero-trust,
.rpf-hero-trust__grid,
.rpf-hero-trust__item {
pointer-events: none !important;
}

Hi there,

Thanks for the update and for sharing your solution. Glad to hear you’ve identified the overlapping custom block as the cause and that your CSS fix resolved the tabs issue.

Just a small note: using pointer-events: none will disable clicks on those elements, so if that section ever needs to be interactive, you may want to keep the rule scoped only to the specific overlaying element.

If anything else comes up, feel free to let us know.

Kind regards,
XTemos Studio

[Author]

Posts