By default WooCommerce product tabs like description, additional information & customer reviews, etc are coming in tabs style on the single product details page. In this tutorial, I shall show how you’ll replace these tabs with accordions. Actually, the accordion mode is a good option for mobile devices. So tablet users can smoothly handle the product details. We shall also do an extra job. We shall move it to the right side of the product image (below the product summary section).
1. Removes WooCommerce Product Tabs
At first, remove the unwanted items (product tabs) from the product details page. Just drop this single PHP line into functions.php file of your theme.
|
1 2 3 4 |
<?php //* Do not include this line //* removes default woocommerce tabs from single product page remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs' ); |
2. Adds WooCommerce Product Data to Accordion
Converting the WooCommerce product data tabs to accordion style. Again open the functions.php file of your theme and add this PHP snippet there.
The rest of the content is available for Pro members. Click on the PAY NOW button to enable access to this content.
$15.00Pay Now
* Payment is non-refundable.
Paid members will be able to login below to see the restricted content.
irene orozco (verified owner) –
Hi Paul,
Please, answer me. On april, after i pay for the solution, you made changes to make the accordion work on my page with Elementor.
On may, the accordion did not show as it was on april, and I wrote you on May20, May24, May25, June3, June7, June10, June13, June17 and June20 asking you please to explain what changes were done or to do again in a way un update do not undone that. And since June3 i did not receive any email back from you. In that mail you said “check your code in the theme folder”, but where? Even inside /wp-content/themes/jupiterx-child/woocommerce/single-product-template there is no file and no codes.
Please, i really need to be done this. Even if you do not want to do it again, please send me the file or the code to add.
Alyssa Williamson (verified owner) –
It works! Wasn’t sure about paying $15 for a snippet, but hey, it works perfectly so I’m glad the author got paid for his work. Took maybe 60 seconds and works perfectly and is easy to customize further. Is saving an hour or more of figuring it out worth $15? It is to me!
Mark Grice (verified owner) –
Works perfectly, thank you!
Stephen Pallam (verified owner) –
Awesome…worked like a charm..thanks paul…
Hamutal Weisz (verified owner) –
Works exactly as is should – not like most other proposed solutions out there.
Thank you!
tanyaslogos (verified owner) –
Fantastic tutorial! I wanted to thank you from the bottom of my heart for taking the time to create this tutorial and for offering it to your customers. This was an absolute lifesaver! You are a rock star!
rostik.liubka (verified owner) –
Recently I needed to implement accordion tabs for a mobile version of ecommerce project. After spending many hours trying to solve the issue with bootstrap accordion, its collapse, nesting of divs, and trying to make bootstrap and jQuery play well together, I found Paul’s site and this tutorial. I gave it a try and guess what — accordion works like a charm! Especially great thanks to Paul and his support — I needed first tab expanded on initial load and css adjustment for + icon — reply was quick and adjustments provided! Really appreciate his help and best recommendations from me!