[Thủ Thuật WP] Cách thêm, xóa, sửa các tab sản phẩm trong WooCommerce

Nếu bạn đang sử dụng WooCommerce, tôi chắc chắn rằng bạn đã nhận thấy rằng có ba Tab Sản phẩm WooCommerce tích hợp mặc định xuất hiện trên trang sản phẩm của bạn:

+ Mô tả (Description)

+ Thông tin bổ sung (Additional Information) 

+ Bài đánh giá (Reviews).

Các tab này trông như thế nào sẽ phụ thuộc vào theme của bạn. Nhưng bây giờ sẽ là hướng dẫn cho bạn có thể thêm, xóa hoặc tùy chỉnh các tab này một cách dễ dàng hơn.

Thêm một Tab sản phẩm trong WooCommerce

Cách mà bạn thêm một Tab tên là "Discount". Bạn chỉ cần mở file functions.php và thêm đoạn code bên dưới :

add_filter( 'woocommerce_product_tabs', 'wpb_new_product_tab' );
function wpb_new_product_tab( $tabs ) {
    // Add the new tab
    $tabs['test_tab'] = array(
        'title'       => __( 'Discount', 'text-domain' ),
        'priority'    => 50,
        'callback'    => 'wpb_new_product_tab_content'
    );
    return $tabs;
}

function wpb_new_product_tab_content() {
    // The new tab content
    echo 'Discount';
    echo 'Here\'s your new discount product tab.';          
}

Và đây là kết quả

Image

 Xóa một Tab sản phẩm trong WooCommerce

Image

Tương tự để xóa một Tab sản phẩm trong WooCommerce bạn dùng filter "woocommerce_product_tabs". Ví dụ bạn thêm đoạn code vào functions.php sẽ được kết quả như hình trên.

add_filter( 'woocommerce_product_tabs', 'wpb_rename_tabs', 98 );
function wpb_rename_tabs( $tabs ) {
    $tabs['description']['title']               = __( 'More Information', 'text-domain' );       // Rename the description tab
    $tabs['reviews']['title']                   = __( 'Ratings', 'text-domain' );               // Rename the reviews tab
    $tabs['additional_information']['title']    = __( 'Product Data', 'text-domain' );         // Rename the additional information tab
    $tabs['test_tab']['title']                  = __( 'Commission', 'text-domain' );          // Rename the discount tab
    return $tabs;
}

Tùy chỉnh Tab sản phẩm trong WooCommerce

Bạn cũng có rất nhiều cách tùy chỉnh Tab sản phẩm của mình như: 

1. Đổi tên tab với filter woocommerce_product_tabs.

Ví dụ: 

add_filter( 'woocommerce_product_tabs', 'wpb_rename_tabs', 98 );
function wpb_rename_tabs( $tabs ) {
    $tabs['description']['title']               = __( 'More Information', 'text-domain' );       // Rename the description tab
    $tabs['reviews']['title']                   = __( 'Ratings', 'text-domain' );               // Rename the reviews tab
    $tabs['additional_information']['title']    = __( 'Product Data', 'text-domain' );         // Rename the additional information tab
    $tabs['test_tab']['title']                  = __( 'Commission', 'text-domain' );          // Rename the discount tab
    return $tabs;
}

2. Sắp xếp lại vị trí Tab với filter woocommerce_product_tabs

Ví dụ : 

add_filter( 'woocommerce_product_tabs', 'wpb_reorder_tabs', 98 );
function wpb_reorder_tabs( $tabs ) {
    $tabs['reviews']['priority']                = 5;      // Reviews first
    $tabs[test_tab]['priority']                 = 10;    // Commission second
    $tabs['description']['priority']            = 15;   // Description third
    $tabs['additional_information']['priority'] = 20;  // Additional information fourth
    return $tabs;
}

3. Hiện thị Tab với một function riêng

Ví dụ: 

add_filter( 'woocommerce_product_tabs', 'wpb_custom_description_tab', 98 );
function wpb_custom_description_tab( $tabs ) {
    $tabs['description']['callback'] = 'wpb_custom_description_tab_content'; // Custom description callback
    return $tabs;
}

function wpb_custom_description_tab_content() {
    echo 'Product Description';
    echo 'Product description goes here...';
}

Nếu bạn không biết code có thể dùng Plugin "WPB Custom Tab Manager for WooCommerce" để tùy chỉnh.