All tabs open by default

Hi @leahjm77,

This is possible and the best way to achieve this is by changing your tabs template. Are you familiar with replacing and customizing tab templates? Do you know if you’re using the default WooCommerce tab template (i.e. do you know if your theme is changing your tab template?)

Let me know.

Thank you,
Kevin.

Thank you for your reply! I believe my theme is changing the tab template but I’m not sure. I should be able to find and edit the file in either case. Do you know of the code change for that or a link to a resource that explains how to do it?

Hi @leahjm77,

Can you send me a URL to your website so I can look at your tabs? The code change will depending on the tabs template. If you’re using WooCommerce’s default template, I can definitely help. If you’re using a custom template, then can you please copy and paste the contents of that template here?

The most likely place to find your theme’s template is [your-theme]/woocommerce/templates/single-product/tabs/tabs.php.

Thank you!
Kevin.

Thank you very much for your help Kevin! There is a tabs file in my theme files. Here is the full code:

<?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://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.4.0
*/

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()
*/
$tabs = apply_filters( ‘woocommerce_product_tabs’, array() );
$single_type = qode_woocommerce_single_type();
$tabs_position_class = ‘left’;
if($single_type == ‘tabs-on-bottom’){
$tabs_position_class = ‘center’;
}

if ( ! empty( $tabs ) ) : ?>
<?php if($single_type != ”) { ?>
<div class=”q_tabs horizontal <?php echo esc_attr($tabs_position_class);?>”>
<ul class=”tabs-nav”>
<?php foreach ( $tabs as $key => $tab ) : ?>
<li class=”<?php echo esc_attr( $key ); ?>_tab”>
“><?php echo apply_filters( ‘woocommerce_product_’ . $key . ‘_tab_title’, esc_html( $tab[‘title’] ), $key ); ?>

<?php endforeach; ?>

<div class=”tabs-container”>
<?php foreach ( $tabs as $key => $tab ) : ?>
<div class=”tab-content” id=”tab-<?php echo esc_attr( $key ); ?>”>
<?php call_user_func( $tab[‘callback’], $key, $tab ); ?>
</div>
<?php endforeach; ?>
</div>
</div>
<?php } else { ?>

<div class=”q_accordion_holder toggle boxed woocommerce-accordion”>
<?php foreach ( $tabs as $key => $tab ) : ?>

<h6 class=”title-holder clearfix <?php echo esc_attr($key) ?>_tab”>
<span class=”tab-title”><?php echo apply_filters( ‘woocommerce_product_’ . $key . ‘_tab_title’, esc_html( $tab[‘title’] ), $key ); ?></span>
</h6>
<div class=”accordion_content”>
<div class=”accordion_content_inner”>
<?php call_user_func( $tab[‘callback’], $key, $tab ) ?>
</div>
</div>

<?php endforeach; ?>
</div>

<?php } ?>

<?php endif; ?>

Hi @leahjm77,

Thanks for finding that! Unfortunately the formatting got messed up when you pasted the code. Can you paste it again but wrap everything in the code tags? (use the code button from the editor’s controls, or wrap everything in backticks).

Thank you!
Kevin.

Sorry about that! Will try again.

<?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://docs.woocommerce.com/document/template-structure/
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 2.4.0
 */

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()
 */
$tabs = apply_filters( 'woocommerce_product_tabs', array() );
$single_type = qode_woocommerce_single_type();
$tabs_position_class = 'left';
if($single_type == 'tabs-on-bottom'){
	$tabs_position_class = 'center';
}

if ( ! empty( $tabs ) ) : ?>
	<?php if($single_type != '') { ?>
		<div class="q_tabs horizontal <?php echo esc_attr($tabs_position_class);?>">
			<ul class="tabs-nav">
				<?php foreach ( $tabs as $key => $tab ) : ?>
					<li class="<?php echo esc_attr( $key ); ?>_tab">
						<a href="#tab-<?php echo esc_attr( $key ); ?>"><?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?></a>
					</li>
				<?php endforeach; ?>
			</ul>
			<div class="tabs-container">
				<?php foreach ( $tabs as $key => $tab ) : ?>
					<div class="tab-content" id="tab-<?php echo esc_attr( $key ); ?>">
						<?php call_user_func( $tab['callback'], $key, $tab ); ?>
					</div>
				<?php endforeach; ?>
			</div>
		</div>
	<?php } else { ?>

		<div class="q_accordion_holder toggle boxed woocommerce-accordion">
			<?php foreach ( $tabs as $key => $tab ) : ?>

				<h6 class="title-holder clearfix <?php echo esc_attr($key) ?>_tab">
					<span class="tab-title"><?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?></span>
				</h6>
				<div class="accordion_content">
					<div class="accordion_content_inner">
						<?php call_user_func( $tab['callback'], $key, $tab ) ?>
					</div>
				</div>

			<?php endforeach; ?>
		</div>

	<?php } ?>

<?php endif; ?>

Thank you! Sorry about that – it’s really difficult for me to copy and paste the code when it’s unformatted. I will try to customize your template today ??

• This reply was modified 5 years, 8 months ago by yikesitskevin.

Hi @leahjm77,

Okay. I took a look at the template. I don’t think this will be a problem but it wasn’t what I was expecting.

Would you mind sending me a link to one of your products? I think it will be easier to make these changes while looking at how the tabs display on your site.

Thank you,
Kevin.

For sure, here’s a product link – https://jrmhockeyart.com/products/marc-andre-fleury/

Thanks again! I really appreciate this.

Sorry this is taking so much back and forth @leahjm77 but I can’t access your site right now. I’m getting a 502: Bad Gateway error.

Do you know why this is happening?

Edit: nevermind! I tried again 15 minutes or so later and it’s working. I am looking at the template now.

• This reply was modified 5 years, 8 months ago by yikesitskevin.

Hi @leahjm77,

So your theme has two different ways of displaying tabs built into it. I can’t tell exactly what the second method does but it looks like it might be what you’re looking for you. Can you change your tab template’s line 38:

Current: <?php if($single_type != '') { ?>

New: <?php if( false ) { ?>

That should force the theme to use the other template.

Cheers,
Kevin.

Hi Kevin, thanks for your help. I am aware of the other tab layout in my theme, but it changes the product page layout in other ways that I don’t like (and it moved the tab content to be over in only half of the page). I was just wondering if there was a fairly easy way to add code to make the tabs stay open one after the other but keep the same product page layout I’m using. If it’s difficult or not possible then don’t worry about it. Thank you.

Ah, I understand. Try replacing your tab template with the following. It will most likely need some styling but it should simply output the title and content of each tab, one by one, no “tabination.”

<?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://docs.woocommerce.com/document/template-structure/
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 2.4.0
 */

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()
 */
$tabs = apply_filters( 'woocommerce_product_tabs', array() );
$single_type = function_exists( 'qode_woocommerce_single_type' ) ? qode_woocommerce_single_type() : false;
$tabs_position_class = 'left';
if($single_type == 'tabs-on-bottom'){
	$tabs_position_class = 'center';
}

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

	<?php foreach ( $tabs as $key => $tab ) : ?>
		<h3 class="wc-tab-title">
			<?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?></span>
		</h6>
		<div class="wc-tab-content">
			<?php call_user_func( $tab['callback'], $key, $tab ) ?>
		</div>
	<?php endforeach; ?>

	<?php if( false /* $single_type != ''*/ ) { ?>
		<div class="q_tabs horizontal <?php echo esc_attr($tabs_position_class);?>">
			<ul class="tabs-nav">
				<?php foreach ( $tabs as $key => $tab ) : ?>
					<li class="<?php echo esc_attr( $key ); ?>_tab">
						<a href="#tab-<?php echo esc_attr( $key ); ?>"><?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?></a>
					</li>
				<?php endforeach; ?>
			</ul>
			<div class="tabs-container">
				<?php foreach ( $tabs as $key => $tab ) : ?>
					<div class="tab-content" id="tab-<?php echo esc_attr( $key ); ?>">
						<?php call_user_func( $tab['callback'], $key, $tab ); ?>
					</div>
				<?php endforeach; ?>
			</div>
		</div>
	<?php } elseif ( false ) { ?>

		<div class="q_accordion_holder toggle boxed woocommerce-accordion">
			<?php foreach ( $tabs as $key => $tab ) : ?>

				<h6 class="title-holder clearfix <?php echo esc_attr($key) ?>_tab">
					<span class="tab-title"><?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?></span>
				</h6>
				<div class="accordion_content">
					<div class="accordion_content_inner">
						<?php call_user_func( $tab['callback'], $key, $tab ) ?>
					</div>
				</div>

			<?php endforeach; ?>
		</div>

	<?php } ?>

<?php endif; ?>

edit: fixing formatting.

• This reply was modified 5 years, 8 months ago by yikesitskevin.

Hello @leahjm77,

Just checking in.

Please let us know if you still need help with this issue.

Thank you!
-Tracy

Hello @leahjm77,

We haven’t heard back from you in awhile, so I am going to close out this ticket.

If you need further help, please reopen it and we will be happy to help you.

Thank you!
-Tracy