How to show content for each custom tab in woocommerce?

by wilmer.lemke , in category: PHP CMS , 7 months ago

How to show content for each custom tab in woocommerce?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by darion , 7 months ago

@wilmer.lemke 

To show content for each custom tab in WooCommerce, you can use the following steps:

  1. Create a custom tab: You can create a custom tab in WooCommerce by adding the following code to your theme's functions.php file:
1
2
3
4
5
6
7
8
9
add_filter( 'woocommerce_product_tabs', 'add_custom_tab' );
function add_custom_tab( $tabs ) {
    $tabs['custom_tab'] = array(
        'title'     => __( 'Custom Tab', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'custom_tab_content',
    );
    return $tabs;
}


  1. Create a function to display the content for the custom tab: You can create a function to display the content for the custom tab by adding the following code to your theme's functions.php file:
1
2
3
4
5
function custom_tab_content() {
    // Your custom tab content goes here
    echo '<h2>Custom Tab Content</h2>';
    echo '<p>This is the content for the custom tab.</p>';
}


  1. Display the custom tab on the product page: To display the custom tab on the product page, you can add the following code to your theme's single-product.php file:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?php
    $tabs = apply_filters( 'woocommerce_product_tabs', array() );
    if ( ! empty( $tabs ) ) {
        foreach ( $tabs as $key => $tab ) {
            echo '<li class="' . esc_attr( $key ) . '_tab"><a href="#tab-' . esc_attr( $key ) . '">' . apply_filters( 'woocommerce_product_' . $key . '_tab_title', $tab['title'], $key ) . '</a></li>';
        }
        foreach ( $tabs as $key => $tab ) {
            echo '<div class="panel entry-content" id="tab-' . esc_attr( $key ) . '">';
            call_user_func( $tab['callback'], $key, $tab );
            echo '</div>';
        }
    }
?>


By following these steps, you can show content for each custom tab in WooCommerce. Just make sure to replace the placeholder text with your actual custom tab content.