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.
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
deferattribute 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: