15 tháng 10, 2020

Chỉnh sửa tabs trang chi tiết sản phẩm custom product tabs

Giao diện trang sản phẩm của website Wordpress sử dụng plugin Woocommerce khá đầy đủ và tối ưu cho cả người dùng lẫn quản trị web. Nhưng đôi khi product tabs của woocommerce chưa "thỏa mãn" yêu cầu sử dụng của chúng ta và chúng ta muốn thay đổi chúng: đổi tên tabs thông tin sản phẩm, xóa tabs, thay đổi vị trí tabs product, thêm mới tab... Bài chia sẻ này chúng tôi nói về chỉnh sửa tabs trang chi tiết sản phẩm (custom product tabs)

Lưu ý: Bạn cần thêm mã dưới đây vào tập tin function.php của child themes, để khi update themes cha thì mã không bị xóa mất khỏi themes.

Xóa các tabs

Sử dụng đoạn mã sau để xóa các tabs cụ thể. Removing product tabs

01
02
03
04
05
06
07
08
09
10
11
// 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

Sử dụng đoạn mã sau để đổi tên các tab. Renaming product tabs

01
02
03
04
05
06
07
08
09
10
11
// 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;
 
}

Sắp xếp lại các tabs

Sử dụng đoạn mã sau để thay đổi thứ tự tab. Re-ordering product tabs

01
02
03
04
05
06
07
08
09
10
// Reorder product data 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;
}

Tùy chỉnh một tab

Đoạn mã sau sẽ thay thế tab mô tả bằng chức năng tùy chỉnh. Customize a product tabs

01
02
03
04
05
06
07
08
09
10
11
12
13
// 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

Sử dụng đoạn mã sau để thêm tabs sản phẩm toàn cầu tùy chỉnh. Add a custom product tabs

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 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.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
// 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;
  
}

0 nhận xét:

Đăng nhận xét