Support » Plugin: Custom Product Tabs for WooCommerce » No Tabs Showing Up

  • Resolved benstewart906

    (@benstewart906)


    Hi there! I have installed this amazing plugin and have created my custom tabs but none of them seem to be displaying on my single product pages. I’m sure it has something to do with the theme not supporting them, but I can’t seem to find exactly how to add this. Thank you!

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Contributor yikesitskevin

    (@yikesitskevin)

    Hi @benstewart906,

    Do the default WooCommerce tabs show up (Description, Additional Information, Reviews)?

    Also, I can’t access your site – it seems to be locked behind a login. Do you have a screenshot or a publicly accessible page? (Don’t share your credentials here!)

    Cheers,
    Kevin.

    Hi Kevin, thanks so much for the response. No the default tabs aren’t showing up either. How could I go about displaying them?

    Plugin Contributor yikesitskevin

    (@yikesitskevin)

    Have you added a description for your products? If you have and you don’t see the Description tab, your theme is most likely not supporting tabs.

    Do you have a WooCommerce-related theme? Have you gone through your theme options? Some themes have options for what to display on the product page.

    Hi Kevin, I have added a product description and short description, as well as assigned and populate 4 additional custom tabs via this plugin. None of them are showing up though. Inspecting the code I don’t see them being hidden or anything either (just absent).

    I am using Beaver Builder to build my site, and I have a child theme active. It does allow to you build custom templates for single product pages, which I’ve experimented with but the “Product Tabs” module that exists within the page builder just displaying a white box (nothing).

    I’m assuming the tabs feature need to be enabled somewhere within the WooCommerce template files.

    Although i am building on a hidden dev directory, it is a clone of this site here: https://vedaecn.com/product/disposable-full-spectrum-vape/

    Plugin Contributor yikesitskevin

    (@yikesitskevin)

    Hi Ben,

    Tabs are displayed via the template file and I don’t know how Beaver Builder is creating/using the WooCommerce templates so it’s difficult to know how to proceed.

    Have you googled this? Beaver Builder is a popular theme. Here’s an article from their KB about their Product Tabs module: https://kb.wpbeaverbuilder.com/article/479-product-tabs-module-for-woocommerce-singular-theme-layouts-themer

    Hmm, yes that is the link I was using and although I have found the Products Tab module within the page builder, when I add it to the page it just displays a blank box, which leads me to believe the theme isn’t currently supporting tabs.

    When I view this topic here: https://kb.wpbeaverbuilder.com/article/485-create-a-singular-themer-layout-for-woocommerce

    …the screenshot does show the tabs enabled and visible within Beaver Builder, so I’m assuming it should be a default function, so I’m confused why they aren’t there.

    Could you give me a suggestion perhaps to ensure tabs are enabled either within the WooCommerce dashboard or via FTP by inspecting some of the template files?

    Thanks for your time!

    Plugin Contributor yikesitskevin

    (@yikesitskevin)

    With a default WooCommerce setup, the tabs are found in the following template: woocommerce/templates/single-product/tabs/tabs.php. The code that displays the tabs looks like this:

    $tabs = apply_filters( 'woocommerce_product_tabs', array() );
    
    if ( ! empty( $tabs ) ) : ?>
    
    	<div class="woocommerce-tabs wc-tabs-wrapper">
    		<ul class="tabs wc-tabs" role="tablist">
    			<?php foreach ( $tabs as $key => $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 apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?></a>
    				</li>
    			<?php endforeach; ?>
    		</ul>
    		<?php foreach ( $tabs as $key => $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( $tab['callback'] ) ) { call_user_func( $tab['callback'], $key, $tab ); } ?>
    			</div>
    		<?php endforeach; ?>
    	</div>
    
    <?php endif; ?>

    I’ve seen a lot of themes exclude this template altogether and display the tabs on other templates.

    If you were to do a search of your theme, I would look for the following line:
    $tabs = apply_filters( 'woocommerce_product_tabs', array() );

    Every theme should be pulling tabs and running them through the woocommerce_product_tabs filter.

    Let me know if that gets you any further in solving this.

    Cheers,
    Kevin.

    After inspecting via FTP woocommerce/templates/single-product/tabs/tabs.php DOES exist, and it appears to be identical to your code above.

    Additionally, here are is my single-product.php file:

    <?php
    /**
     * The Template for displaying all single products
     *
     * This template can be overridden by copying it to yourtheme/woocommerce/single-product.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/
     * @package 	WooCommerce/Templates
     * @version     1.6.4
     */
    
    if ( ! defined( 'ABSPATH' ) ) {
    	exit; // Exit if accessed directly
    }
    
    get_header( 'shop' ); ?>
    
    	<?php
    		/**
    		 * woocommerce_before_main_content hook.
    		 *
    		 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
    		 * @hooked woocommerce_breadcrumb - 20
    		 */
    		do_action( 'woocommerce_before_main_content' );
    	?>
    
    		<?php while ( have_posts() ) : the_post(); ?>
    
    			<?php wc_get_template_part( 'content', 'single-product' ); ?>
    
    		<?php endwhile; // end of the loop. ?>
    
    	<?php
    		/**
    		 * woocommerce_after_main_content hook.
    		 *
    		 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
    		 */
    		do_action( 'woocommerce_after_main_content' );
    	?>
    
    	<?php
    		/**
    		 * woocommerce_sidebar hook.
    		 *
    		 * @hooked woocommerce_get_sidebar - 10
    		 */
    		do_action( 'woocommerce_sidebar' );
    	?>
    
    <?php get_footer( 'shop' );
    
    /* Omit closing PHP tag at the end of PHP files to avoid "headers already sent" issues. */
    

    And lastly here is my content-single-product.php:

    <?php
    /**
     * The template for displaying product content in the single-product.php template
     *
     * This template can be overridden by copying it to yourtheme/woocommerce/content-single-product.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/
     * @package WooCommerce/Templates
     * @version 3.6.0
     */
    
    defined( 'ABSPATH' ) || exit;
    
    global $product;
    
    /**
     * Hook: woocommerce_before_single_product.
     *
     * @hooked wc_print_notices - 10
     */
    do_action( 'woocommerce_before_single_product' );
    
    if ( post_password_required() ) {
    	echo get_the_password_form(); // WPCS: XSS ok.
    	return;
    }
    ?>
    <div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>>
    
    	<?php
    	/**
    	 * Hook: woocommerce_before_single_product_summary.
    	 *
    	 * @hooked woocommerce_show_product_sale_flash - 10
    	 * @hooked woocommerce_show_product_images - 20
    	 */
    	do_action( 'woocommerce_before_single_product_summary' );
    	?>
    
    	<div class="summary entry-summary">
    		<?php
    		/**
    		 * Hook: woocommerce_single_product_summary.
    		 *
    		 * @hooked woocommerce_template_single_title - 5
    		 * @hooked woocommerce_template_single_rating - 10
    		 * @hooked woocommerce_template_single_price - 10
    		 * @hooked woocommerce_template_single_excerpt - 20
    		 * @hooked woocommerce_template_single_add_to_cart - 30
    		 * @hooked woocommerce_template_single_meta - 40
    		 * @hooked woocommerce_template_single_sharing - 50
    		 * @hooked WC_Structured_Data::generate_product_data() - 60
    		 */
    		do_action( 'woocommerce_single_product_summary' );
    		?>
    	</div>
    
    	<?php
    	/**
    	 * Hook: woocommerce_after_single_product_summary.
    	 *
    	 * @hooked woocommerce_output_product_data_tabs - 10
    	 * @hooked woocommerce_upsell_display - 15
    	 * @hooked woocommerce_output_related_products - 20
    	 */
    	do_action( 'woocommerce_after_single_product_summary' );
    	?>
    </div>
    
    <?php do_action( 'woocommerce_after_single_product' ); ?>
    

    Which I do notice has the outpout_product_data_tabs line in it.

    Thank you so much for all your help

    Plugin Contributor yikesitskevin

    (@yikesitskevin)

    These are files from your theme or from the WooCommerce plugin? The files will always exist in WooCommerce. You should look at your theme’s files to see if the templates are being overridden.

    Also, the outpout_product_data_tabs is important. If your theme is removing that action, the tabs won’t be displayed. Search your theme for outpout_product_data_tabs or woocommerce_after_single_product_summary

    Alright I found it! I apologize I didn’t catch this earlier, but yes indeed the child had a tabs.php file that was overriding the default theme. I’ve renamed/disabled this and things are working perfectly!!!!

    I wish i could give you 6 out of 5 stars, you guys rock!

    Plugin Contributor yikesitskevin

    (@yikesitskevin)

    Awesome! That’s an easy fix. Glad it’s working. Thank you! 🙂

Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.