Updated on September 18, 2020

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 $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: