Product tabs elementor not showing correctly

Hi,

On a staging environment I’m removing WP Bakery and start using Elementor to build new product pages. Unfortunately, some elements are not working properly.

The product tabs are showing twice. I had to add the Elementor element ‘Product Data Tabs’ to the product template, otherwise I could not use it. On frontend I see now the tabs twice, which is should not be the case.

Please check the link below. It’s visible on all product pages. When you click on the different product tabs, you see the issue clearly.

Thanks for helping out,

Paul

Hi,

I’ve fixed the problem on desktop, but for some reason the double tabs are still shown on mobile. I have also theme ‘Tethys’ and Elementor activated on another website, but there it’s working good both on desktop and mobile (same setup). The only thing I noticed is that the Elementor tab element is called ‘Product data tabs’ on Woodmart en in Tethys it’s called ‘Single product tabs’. In Woodmart I can’t find the Elementor element ‘Single product tabs’.

Please let me know how to fix this, thanks!

Attachments:

You must be logged in to view attached files.

Hello,

I checked your website, and it appears that the tabs are displaying correctly, appearing only once.:
Screenshot for clarification:
https://ibb.co/ChKMPjc

Check back your site and check the issue.

Best Regards.

Hi Aizaz,

Please check on mobile (as described in my last post).

Thanks,

Paul

Hello,

Can you please share the WP admin login details of your site so I will check and give you the possible solution.

Best Regards.

Sure, please check extra info box.

Hello,

Now I have checked your site. The tabs are showing one time on your site on a mobile device.
Check back your site and check the issue.

Best Regards.

Hi,

I’m sorry, I was not clear enough. All product pages with Elementor have this issue, but most categories don’t have Elementor yet (so you see indeed the tabs correctly). Please the product in the extra information box, this one uses a Elementor template.

Hello,

You’ve employed the Elementor Pro plugin along with its widget. I recommend utilizing the custom layout feature provided by our theme for WooCommerce pages to check the problem.
These are the custom layouts for functional woocommerce pages. Please check this manual how it works:
https://xtemos.com/docs-cat/woocommerce-layouts-builder/?theme=woodmart

If you have any questions feel free to contact us.

Best Regards.

Hi Aiziz,

Thanks! That fixed the problem with the double tabs. The only thing that does not work (compared to my live website) is the way the tabs work.

On my live website, the tabs on mobile are shown in accordion and on desktop regular tabs. On the test environment, the tabs on mobile are regular tabs instead of accordion. I’d like to have the tabs on mobile shown in accordion and desktop regular, like my live environment. How can I fix this?

Thanks

Paul

…and another thing – also the border and active tab indication (green line) is missing on desktop.

Attachments:

You must be logged in to view attached files.

You can ignore my last message about the border styling, I’ve fixed that.

Hello,

The issue of the Tabs layout is caused by the Single product Layout that you have set. Please try removing the Single product layout from Dashboard >> Layouts. Then check back.

Sorry but the layout of tabs while using layout builder cannot be controlled by Theme Settings.
If you want to use Single product layout then you can either have tabs or accordion layout for the single product tabs.

But Alternately, You can add 2 product tabs elements in the Single product layout and make one to tabs and other to accordion. And hidden the accordion tabs on Desktop and the Simple tabs on Mobile.

Best Regards.

Hi,

Ok so it only works without the Elementor layout? I can, of course, use 2 tabs – one for desktop and one for mobile. But does this affect loading times? Is it not possible with custom code, as it is working without the Elementor layout.

Hello,

Yes, it only works without the Elementor layout. No, it will not affect the loading time of the site on mobile or desktop.

Sorry, this is not possible with the custom code.

Best Regards.

[Author]

Posts