WooCommerce tabs underneath each other

Question

I'm looking for a way to put the WooCommerce tabs and the content underneath each other in blocks. I've added an image with the example. Can anyone help me out?

score 1 · Answer 1 · answered Oct 22 '19 at 17:23

Try this PHP snippet – it will remove the tabs and the call each of the template parts to display them in a stack. The below code works for Description and Additional Info tabs and you might have to modify it slightly to include all your tabs.

Paste the below code in functions.php or use the Code Snippets Wordpress Plugin to add the below code:

add_action( 'after_setup_theme','db_stack_product_tabs' );

function db_stack_product_tabs(){ 
    // Remove product tabs
    remove_action('woocommerce_after_single_product_summary','woocommerce_output_product_data_tabs', 10 ); 
    // Get tab content template parts
    add_action('woocommerce_after_single_product_summary','db_get_tab_template_parts', 10 );
}

function db_get_tab_template_parts() {
    // Include required template parts
    ?>
    <div class="woo-description-section"><?php wc_get_template( 'single-product/tabs/description.php' ); ?></div>
    <div class="woo-information-section"><?php wc_get_template( 'single-product/tabs/additional-information.php' ); ?></div>
    <?php comments_template();
}

I used this code and worked, the issue is that it is visible also on products with empty description and/or additional information, how can we hide them when empty? — geoplous, Feb 16 '22 at 09:49

score 0 · Answer 2 · answered Feb 08 '19 at 10:48

if ( ! function_exists( 'woocommerce_product_description_tab' ) ) {

    /**
     * Output the description tab content.
     */
    function woocommerce_product_description_tab() {
        wc_get_template( 'single-product/tabs/description.php' );
    }
}
if ( ! function_exists( 'woocommerce_product_additional_information_tab' ) ) {

    /**
     * Output the attributes tab content.
     */
    function woocommerce_product_additional_information_tab() {
        wc_get_template( 'single-product/tabs/additional-information.php' );
    }
}

This is how those blocks are rendered.

Please copy single-product/tabs/description.php into your active theme/woocommerce/single-product/tabs/description.php

and single-product/tabs/additional-information.php to your active theme/woocommerce/single-product/tabs/additional-information.php

Modify according to your needs

score 0 · Answer 3 · answered Feb 08 '19 at 23:26

0

With Storefront theme, I just use the following CSS to achive full-width, horizontal tabs:

/* TABS ************************* */
.woocommerce-tabs .panel h2:first-of-type {
    display: none;
}
@media (min-width:768px) {
    .woocommerce-tabs ul.tabs {
    width: 100%;
    float: none;
    margin-right: 1.8823529412%;
    }
    .woocommerce-tabs .panel {
    width: 100%;
    float: none;
    }
}

answered Feb 08 '19 at 23:26

CWLocal

127
11

or you could try this plugin: WooCommerce Expand Tabs – CWLocal Feb 09 '19 at 02:27

score -2 · Answer 4 · answered Feb 08 '19 at 10:46

-2

you can achieve by the custom hooks provided by woocommerce you can follow below link

you can use below function in your functions.php to change the structure of the tab

/**
 * Customize product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );
function woo_custom_description_tab( $tabs ) {

    $tabs['description']['callback'] = 'woo_custom_description_tab_content';    // Custom description callback

    return $tabs;
}

function woo_custom_description_tab_content() {
    echo '<h2>Custom Description</h2>';
    echo '<p>Here\'s a custom description</p>';
}

answered Feb 08 '19 at 10:46

Chilll007

612
1
5
20

Thanks, but i'm not looking for a way to add a new custom tab. I want to put all existing tabs underneath each other. – Athon Feb 08 '19 at 11:06
function is not adding the new tab its changing the content of the description tab – Chilll007 Feb 08 '19 at 11:07
I'm not looking to change the content either. I want my existing tabs to be shown serarately and underneath eachother as shown in the image of my post. – Athon Feb 08 '19 at 11:22
then you have to make changes in template files directly also you have to fetch the content accordingly for each div – Chilll007 Feb 08 '19 at 12:17
Does not answer the question – Laurent Jul 10 '20 at 01:14

WooCommerce tabs underneath each other

4 Answers4