If you have added custom product data tabs to your woocommerce install, then you might have noticed that they don’t work well on a small screen. In this post I will modify the default tab template with a responsive design to make the tabs stack nicely on a mobile device.
On a desktop screen, I want the tabs to continue to work the same as normal, and on a mobile screen I want the tabs to display as an accordion. The default markup makes this hard to do, as the tabs and the content are in separate <div>
tags.
There are two options to get around this. Modify the template and duplicate the content, then use css to show and hide the tab content. The other would be to use javascript to move the content into the correct place when a tab is clicked, avoiding the duplicate content.
I will choose the CSS route, as it’s a bit simpler and doesn’t interfere with the js that Woocommerce already adds to the page.
The template that lays out tabs is woocommerce/templates/single-product/tabs/tabs.php, so copy that from the woocommerce plugin and copy it to your theme inside the woocommerce folder.
In this template, I’ve duplicated the tab content inside each tab. I will use CS to hide and show this content on active tabs. I’ve also added a class name to the tab block so that we can use CSS to style the responsive tabs.
With that done, I can use CSS to make sure the tabs display correctly on small screens.