Change product data tabs into accordions and move them after the add to cart button

admin

Administrator
Staff member
In WooCommerce on the single product page, I am needing to:

<ul>
<li>change the default tabs into accordions</li>
<li>move them up to the right of the main image (after the add to cart button or near there)</li>
</ul>

Currently, i used <a href="https://wordpress.org/plugins/woo-accordions/" rel="nofollow noreferrer">Woo Accordions</a> plugin to turn the tabs into accordions and it worked great. I also used
Code:
functions.php
file to rename and remove tabs. But when i used

<pre class="lang-php prettyprint-override">
Code:
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 60 );

to move the new accordions-that-used-to-be-tabs, they were tabs again.

I realize this must have to do with the plugin, and i looked at its files somewhat quickly, and there wasn't too much that i wouldn't be comfortable modifying it, but I want to find the best / a better solution before do that.

Does anyone have any ideas or insight on how i might get those tabs to be accordions in the new location? With or without the plugin i mentioned above that i used.

I am comfortable digging into code in most files, and do already have all of the Woo template files and Avada (my theme) Woo files copied into my Child theme and ready for modification as needed.

If you need me to provide anything else just let me know. There is a screenshot of each - the tabs as accordions in their original location, and then the tabs turned back into tabs when moved up and under the cart button.

<a href=" " rel="nofollow noreferrer"><img src=" " alt="tabs made into accordions in original location"></a>
<a href=" " rel="nofollow noreferrer"><img src=" " alt="accordions turned back into tabs when moved to where i need them to be"></a>