[j rParticipant]

Hi.
I didn’t see if anyone posted this if so please point me in the right direction?
I want to Replace Woo-commerce tabs with accordion

I’m using the following code the first part works as it should. The second part is where I think I’m missed something. (But is working just not as it should)

I moved Woo-commerce tabs to under the product description with the code below in my functions file. (Which works as it should.)

// Removes tabs from their original loaction
remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 10 );

// Inserts tabs under the main right product content
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 60 );

Then I copied the tabs.php file to child theme and edited the code with the below. (This works but it seems to place all the accordions into one accordion group instead of each accordion being nested in the group. And each accordion inner div are collapsing underneath all accordion headings in a group instead of in between each heading like it normally would.)

<?php
/**
* Single Product tabs
*
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.0.0
*/

if ( ! defined( ‘ABSPATH’ ) ) {
exit; // Exit if accessed directly
}

/**
* Filter tabs and allow third parties to add their own
*
* Each tab is an array containing title, callback and priority.
* @see woocommerce_default_product_tabs()
*/
$tabs = apply_filters( ‘woocommerce_product_tabs’, array() );

if ( ! empty( $tabs ) ) : ?>

<div class=”x-column x-sm vc x-1-1″ style=””>

<div class=”x-accordion”>

<div class=”x-accordion-group” style=”” >

<?php foreach ( $tabs as $key => $tab ) : ?>
<div class=”x-accordion-heading” style=””>
x-accordion-toggle collapsed” href=”#collapse-<?php echo $key ?>” data-toggle=”collapse” ><?php echo apply_filters( ‘woocommerce_product_’ . $key . ‘_tab_title’, $tab[‘title’], $key ) ?>
</div>

<?php endforeach; ?>

<?php foreach ( $tabs as $key => $tab ) : ?>
<div class=”accordion-body collapse” id=”collapse-<?php echo $key ?>”>
<div class=”x-accordion-inner”>
<?php call_user_func( $tab[‘callback’], $key, $tab ) ?>
</div>
</div>

</div>

<?php endforeach; ?>

</div>

</div>

<?php endif; ?>

In suggestion on my code?

Much appreciated
Thanks

[Rue NelModerator]

Hello There,

Thanks for posting in!

Please try to replace your code with this instead:

<?php
/**
* Single Product tabs
*
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.0.0
*/

if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}

/**
* Filter tabs and allow third parties to add their own
*
* Each tab is an array containing title, callback and priority.
* @see woocommerce_default_product_tabs()
*/
$tabs = apply_filters( 'woocommerce_product_tabs', array() );

if ( ! empty( $tabs ) ) : ?>

<?php echo do_shortcode('[clear]'); ?>

<div class="x-accordion">

  <?php foreach ( $tabs as $key => $tab ) : ?>
    <div class="x-accordion-group">
      <div class="x-accordion-heading">
        <a class="x-accordion-toggle collapsed <?php echo $key ?>_tab" data-toggle="collapse" href="#collapse-<?php echo $key ?>"><?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', $tab['title'], $key ) ?></a>
      </div>
      <div id="#collapse-<?php echo $key ?>" class="accordion-body collapse">
        <div class="x-accordion-inner">
          <?php call_user_func( $tab['callback'], $key, $tab ) ?>
        </div>
      </div>
    </div> 

  <?php endforeach; ?>

</div>

<?php endif; ?>

Please let us know how it goes.

[j rParticipant]

Hi,

Sorry for the late response the code you gave me just ended in blank page.
So I ended up reverting to tabs and edited to tab CSS to better fit my needs.

So I got it looking the way I wanted it Thanks for the help mark as closed.

Best Regards.

[ChristianModerator]

You’re welcome. Glad we could help. 🙂

[Author]

Posts