Custom product Tabs not showing on mobile

Hey @marthast,

Thanks for using Custom Product Tabs! I tried to view your site but it just says “Coming Soon”.

If you can take down that privacy block on your site I will suggest some CSS as best as I can!

Also, WooCommerce is displaying your tabs with a tabs template. However, themes often times override those templates so if your theme has a woocommerce folder inside of it most likely you’ll find a tabs.php file that is creating the non responsive markup.

If that’s the case you could create a child theme and override the WooCommerce template there as well.

Template Structure Overriding Templates:
https://docs.woocommerce.com/document/template-structure/

Creating A Child Theme:
https://developer.www.ads-software.com/themes/advanced-topics/child-themes/

Also if you’re not working locally on your site but you do want to experiment with stuff without breaking your site you should try out Local by Flywheel. This will allow you to spin up local WordPress installs where you can test on your computer. You can also easily see where all your WordPress files are and make changes to them.
https://premium.wpmudev.org/blog/how-to-use-local-by-flywheel-for-quick-wordpress-development/

Cheers,
Freddie

Thanks, just removed the coming soon mode – really appreciate you taking a look! This is just a test site at the moment.

Hey @marthast,

I have to change my response because I was looking at the wrong area. This styling is coming from your theme, gtbuilder. I would contact them and let them know the tabs are broken because it looks like there isn’t any styling coming from your child theme at all.

– Freddie

• This reply was modified 5 years, 3 months ago by Freddie.

Yes was just about to reply as not sure what the folder is you’re referring to and just tried taking all the content out of the tabs and still same problem. I have inherited this theme from another developer and need to add the shop part. So do you think it is because it isn’t woo commerce compatible?

Hi,

I have now created a fresh install using the gtbuilder theme, only plugins installed are woocommerce and your custom product tabs and can see that the theme is generally woocommerce compatable and when only the standard woocommerce tabs are used they are responsive on mobile so the theme does appear to have woocommerce responsive styling for the standard tabs – see:

https://kdtest.pipeten.co.uk/product/test-product-no-custom-tabs/

However when I add a couple of custom tabs using your plugin they are not responsive on mobile and hide the standard tabs (eg reviews) if the appear after the custom tabs- see below:

https://kdtest.pipeten.co.uk/product/test-product-2-custom-tabs/

I really need help with this – we have actually paid for your Pro version – can provide license number if that helps.

Thanks

Andrea

@marthast,

Your theme is WooCommerce compatible but unfortunately the developers of that theme didn’t take into consideration that you would be adding more tabs.

If they were to make an update that allowed for more tabs to be visible this problem would be solved but without that we’re unable to help.

I’m really sorry, I wish there was something I could do but Custom Product Tabs cant control how a theme styles tabs.

Your best bet is to reach out to those developers and explain to them that the way they’ve created that theme has restricted you to only the default tabs because I’m sure you’re not the only one that is facing that issue who has purchased that theme.

Another option you could take is to override their tabs template in your child theme. You can find documentation on that here:
https://docs.woocommerce.com/document/template-structure/

Cheers,
Freddie

@marthast,

Please reach out through the premium support channel and I will help you create that template file. I didn’t notice you said you had paid for premium support my apologies!

Cheers,
Freddie

Hi thanks for your help. I have solved this with css to make the tabs stack vertically on a mobile.

Sorry here is the css used for future reference

@media (max-width: 767px){.woocommerce div.product .woocommerce-tabs ul.tabs {
display: inline-block;
font-size: 0;
}
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
font-size: 16px;
display:list-item;

}