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 | |
/* 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