Skip to content

Instantly share code, notes, and snippets.

@damiencarbery
Created April 17, 2024 15:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save damiencarbery/d68fdfa2f18969ae3e1411985b8d6376 to your computer and use it in GitHub Desktop.
Save damiencarbery/d68fdfa2f18969ae3e1411985b8d6376 to your computer and use it in GitHub Desktop.
Change WooCommerce product tabs to accordion - Modify tabs.php template to use the <details> element for accordion like behaviour for product information. https://www.damiencarbery.com/2024/04/change-woocommerce-product-tabs-to-accordion/
<?php
/**
* Single Product tabs
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/tabs/tabs.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://woo.com/document/template-structure/
* @package WooCommerce\Templates
* @version 3.8.0
*/
// Change tabs from ul/li and div to details/summary disclosure element.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
/**
* 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()
*/
$product_tabs = apply_filters( 'woocommerce_product_tabs', array() );
if ( ! empty( $product_tabs ) ) : ?>
<div class="woocommerce-tabs wc-tabs-wrapper">
<?php $open_status = 'open="open"'; // Set first item to be open on page load. ?>
<?php foreach ( $product_tabs as $key => $product_tab ) : ?>
<details <?php echo $open_status; ?> class="<?php echo esc_attr( $key ); ?>_tab" id="tab-title-<?php echo esc_attr( $key ); ?>" role="tab" aria-controls="tab-<?php echo esc_attr( $key ); ?>">
<summary><?php echo wp_kses_post( apply_filters( 'woocommerce_product_' . $key . '_tab_title', $product_tab['title'], $key ) ); ?></summary>
<?php
if ( isset( $product_tab['callback'] ) ) {
call_user_func( $product_tab['callback'], $key, $product_tab );
}
?>
</details>
<?php $open_status = null; // Default to closed. ?>
<?php endforeach; ?>
<?php do_action( 'woocommerce_product_after_tabs' ); ?>
</div>
<?php endif; ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment