Modify Woocommerce tabs to accordion on mobile — Small-biz version —...

vegan_vicky

I'm trying to change Woocommerce single product tabs to accordion, when viewing from small screens. I couldn't fine any (good) solution out there, so Iv'e tried using a code I found on codepen, and modifying it to fit my needs: https://codepen.io/gsarig/pen/GWgNdx To do so, I changed the classes to the woocommerce classes and modified the html using jquery, so it would match the codepen code: $(".woocommerce-Tabs-panel").each(function(){...

Originally asked by fafchook on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

Variant 78.

Variant 708.

uphilltech

Great question — answering as the UphillTech team:

You don't need to rebuild WooCommerce's markup: every panel is already in the page. Below your breakpoint, add a toggle button before each panel and hide the tab list with CSS. Above it, remove the buttons and let WooCommerce show its tabs again. Nothing breaks if JavaScript fails, and the content stays in the HTML. In the functions.php of your child theme: add_action( 'wp_enqueue_scripts', function () { if ( ! is_product() ) { return; } wp_register_style( 'tabs-accordion', false ); wp_enqueue_style( 'tabs-accordion' ); wp_add_inline_style( 'tabs-accordion', ' .woocommerce-tabs.is-accordion ul.tabs { display: none; } .woocommerce-tabs.is-accordion .wc-tab { display: block !important; }...

Full answer by Tsoudaz: https://stackoverflow.stackexchange.com/a/80010418 (CC BY-SA 4.0).

Want it for your business? UphillTech.