12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Sep 8, 2020

WooCommerce Tabs as Accordion

Sridhar Katakam

Updated on February 17, 2021

This members-only tutorial provides the steps to show WooCommerce tabs as an accordion at a specified breakpoint so that Description, Additional information and Reviews appear as tabs on desktops and as accordion for tablets and/or mobiles in Oxygen.

WooCommerce Tabs converted to an Accordion

We shall

  • load jQuery Collapse on singular product pages in the head
  • add a couple of lines of JS to make the WooCommerce tabs output in the HTML markup, initialize jQuery Collapse and make the first section open by default if the viewport width is 767px or below
  • make the above two scripts prevent render-blocking by adding defer attribute to the script tags in the HTML output
  • add custom CSS

It is also possible to change the panels/sections behaviour such that only one tab will remain open at any given time turning the tabs into a true accordion.

Update: Instructions for replacing tabs with accordions in all views (screen sizes) are given at the end of the tutorial.

Step 1

Let’s load jQuery Collapse on WooCommerce product pages.

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site's /wp-content/plugins/my-custom-functionality-master.

Upload jquery.collapse.js to the plugin's assets/js directory.

Edit plugin.php and add the following inside the custom_enqueue_files() function:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.