[Resolved] Order of Woocommerce Single Product Page Tabs

[Kim]

Hi there, would it be possible to show the Woocommerce Tabs one below the other like in this in example?

Section Example

Best regards!

[David]

Hi there,

try this PHP snippet – it will remove the tabs and the call each of the template parts to display them in a stack:

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();
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kim]

Hi David,

it returns an error saying “syntax error, unexpected end of file” in line 16. What do I have to change?

[David]

I made an edit to the above code.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kim]

Awesome! Works well 🙂

[David]

Awesome – hadn’t tried it before so glad to hear that.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts