Woocommerce - Custom product tabs

Nếu muốn Thêm một tab mới, thay đổi vị trí các tab, xoá bỏ tab hoặc đổi tên tab mô tả chi tiết, thông tin bổ sung, đánh giá hoặc bất kỳ custom tab nào khác thì hãy sử dụng đoạn code dưới đây.

Thêm đoạn code sau vào file function của theme/child theme đang kích hoạt

Add a custom tab, custom product tabs, Customize a tab, Re-ordering Tabs, Removing Tabs, Renaming Tabs

Sắp xếp lại tabs

add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {

    $tabs['reviews']['priority'] = 5;           // Reviews first
    $tabs['description']['priority'] = 10;          // Description second
    $tabs['additional_information']['priority'] = 15;   // Additional information third

    return $tabs;
}

add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );

function woo_reorder_tabs( $tabs ) {

$tabs['reviews']['priority'] = 5; // Reviews first

$tabs['description']['priority'] = 10; // Description second

$tabs['additional_information']['priority'] = 15; // Additional information third

return $tabs;

}

Trong đó, 5 – 10 – 15 lần lượt là 3 vị trí từ trái qua phải, từ trên xuống dưới. Nếu muốn có thể thay đổi tuỳ ý.

Xóa các tabs

// Remove product data tabs
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
 
function woo_remove_product_tabs( $tabs ) {
 
    unset( $tabs['description'] );          // Remove the description tab
    unset( $tabs['reviews'] );          // Remove the reviews tab
    unset( $tabs['additional_information'] );   // Remove the additional information tab
 
    return $tabs;
}

// Remove product data tabs

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {

unset( $tabs['description'] ); // Remove the description tab

unset( $tabs['reviews'] ); // Remove the reviews tab

unset( $tabs['additional_information'] ); // Remove the additional information tab

return $tabs;

}

Đổi tên tabs

// Rename product data tabs
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
 
    $tabs['description']['title'] = __( 'More Information' );       // Rename the description tab
    $tabs['reviews']['title'] = __( 'Ratings' );                // Rename the reviews tab
    $tabs['additional_information']['title'] = __( 'Product Data' );    // Rename the additional information tab
 
    return $tabs;
 
}

// Rename product data tabs

add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );

function woo_rename_tabs( $tabs ) {

$tabs['description']['title'] = __( 'More Information' ); // Rename the description tab

$tabs['reviews']['title'] = __( 'Ratings' ); // Rename the reviews tab

$tabs['additional_information']['title'] = __( 'Product Data' ); // Rename the additional information tab

return $tabs;

}

Tùy chỉnh một 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>';
}

// 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>';

}

Thêm một tab tùy chỉnh

// Add a custom product data tab
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
     
    // Adds the new tab
     
    $tabs['test_tab'] = array(
        'title'     => __( 'New Product Tab', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'woo_new_product_tab_content'
    );
 
    return $tabs;
 
}
function woo_new_product_tab_content() {
 
    // The new tab content
 
    echo '<h2>New Product Tab</h2>';
    echo '<p>Here\'s your new product tab.</p>';
     
}

// Add a custom product data tab

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );

function woo_new_product_tab( $tabs ) {

// Adds the new tab

$tabs['test_tab'] = array(

'title' => __( 'New Product Tab', 'woocommerce' ),

'priority' => 50,

'callback' => 'woo_new_product_tab_content'

);

return $tabs;

}

function woo_new_product_tab_content() {

// The new tab content

echo '<h2>New Product Tab</h2>';

echo '<p>Here\'s your new product tab.</p>';

}

Đổi tên tabs thông tin bổ sung

Tabs “Additional Information” chỉ hiển thị nếu sản phẩm có trọng lượng, kích thước hoặc thuộc tính.

// Rename the additional information tabs
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
 
function woo_rename_tabs( $tabs ) {
 
    global $product;
     
    if( $product->has_attributes() || $product->has_dimensions() || $product->has_weight() ) { // Check if product has attributes, dimensions or weight
        $tabs['additional_information']['title'] = __( 'Product Data' );    
    }
  
    return $tabs;
  
}

// Rename the additional information tabs

add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );

function woo_rename_tabs( $tabs ) {

global $product;

if( $product->has_attributes() || $product->has_dimensions() || $product->has_weight() ) { // Check if product has attributes, dimensions or weight

$tabs['additional_information']['title'] = __( 'Product Data' );

}

return $tabs;

}

Chúc bạn thành công!

Chia sẻ code, Hướng dẫn

Woocommerce – Custom product tabs

Sắp xếp lại tabs

Xóa các tabs

Đổi tên tabs

Tùy chỉnh một tab

Thêm một tab tùy chỉnh

Đổi tên tabs thông tin bổ sung

1 thoughts on “Woocommerce – Custom product tabs”

Trả lời Hủy

Main Headline

Smaller Headline

ĐĂNG KÝ NHẬN TƯ VẤN