Last active
April 7, 2025 09:00
-
-
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/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 9.6.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; ?> name="single-product "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