Skip to content

Instantly share code, notes, and snippets.

@timrross
Last active Nov 10, 2021
Embed
What would you like to do?
<?php
/* CSS for responsive product tabs in WooCommerce. See my blog post here: https://www.timrosswebdevelopment.com/responsive-product-data-tabs-woocommerce */
/**
* 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)) : ?>
<!-- Add a new class to style the responsive tabs -->
<div class="woocommerce-tabs wc-tabs-wrapper woocommerce-tabs-responsive">
<ul class="tabs wc-tabs" role="tablist">
<?php foreach ($product_tabs as $key => $product_tab) : ?>
<li 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); ?>">
<a href="#tab-<?php echo esc_attr($key); ?>">
<?php echo wp_kses_post(apply_filters('woocommerce_product_' . $key . '_tab_title', $product_tab['title'], $key)); ?>
</a>
<!-- Add the content here that is only displayed on small screens -->
<div class="woocommerce-Tabs-accordion-content woocommerce-Tabs-accordion-content--<?php echo esc_attr($key); ?> entry-content" id="accordion-<?php echo esc_attr($key); ?>">
<?php
if (isset($product_tab['callback'])) {
call_user_func($product_tab['callback'], $key, $product_tab);
}
?>
</div>
</li>
<?php endforeach; ?>
</ul>
<?php foreach ($product_tabs as $key => $product_tab) : ?>
<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--<?php echo esc_attr($key); ?> panel entry-content wc-tab" id="tab-<?php echo esc_attr($key); ?>" role="tabpanel" aria-labelledby="tab-title-<?php echo esc_attr($key); ?>">
<?php
if (isset($product_tab['callback'])) {
call_user_func($product_tab['callback'], $key, $product_tab);
}
?>
</div>
<?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