Tùy biến WooCommerce tab trong trang chi tiết sản phẩm

Dưới đây là các đoạn code chèn trong file function.php để đổi tên,xóa hoặc thêm các tab trong trang chi tiết sản phẩm của WooCommerce. Lưu ý: bạn chỉ nên thêm code trong file function.php của child theme thay vì sửa trên theme cha.

Xóa tab

Có 3 tab mặc định trong sản phẩm WooComerce: Tab mô tả, tab đánh giá và tab tùy biến. Bạn hãy sử dụng doạn code sau để xóa các tab cụ thể nhé

/**
 * 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 tab

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

}

Thay đổi thứ tự tab

Ví dụ thay vì mặc định tab mô tả đầu tiên thì bạn lại muốn tab đánh giá đứng đầu tiên, bạn có thể sử dụng css với thuộc tính order theo ID hoặc class của tab. Hoặc đơn giản hơn bạn dùng đoạn code dưới đây.

/**
 * 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 dưới đây là ví dụ về tùy chỉnh tab mô tả.

/**
 * 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 (ngoài 3 tab mặc định)

Đây là đoạn code mà mình đặc biệt yêu thích, vì 3 tab mặc định của WooCommerce là không đủ, nhiều web mình sẽ cần thêm các tab như: tab chế độ bảo hành, tab chính sách vận chuyển…

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

Tab thông tin bổ sung

Xin lưu ý rằng tab Thông tin bổ sung của sẽ 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 (không được sử dụng cho biến thể cho các sản phẩm khác nhau).

Nếu bạn cố gắng áp dụng thay đổi cho tab đó và nếu sản phẩm không có trọng lượng, kích thước hoặc thuộc tính, bạn sẽ nhận được thông báo lỗi tương tự như:

Warning: call_user_func() expects parameter 1 to be a valid callback, no array or string given in /mysite/wp-content/plugins/woocommerce/templates/single-product/tabs/tabs.php on line 35

Trong trường hợp đó, bạn phải sử dụng thẻ điều kiện WooC Commerce:

  • has_attributes()
  • has_dimensions()
  • has_weight()
/**
 * Check if product has attributes, dimensions or weight to override the call_user_func() expects parameter 1 to be a valid callback error when changing the additional tab
 */
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' );	// Rename the additional information tab
    }
 
    return $tabs;
 
}

Bên trên là các đoạn code hữu ích để tùy chỉnh các tab sản phẩm trong woocommerce. Bài viết được dịch từ bài: https://docs.woocommerce.com/document/editing-product-data-tabs/

5 1 vote
Article Rating
Subscribe
Notify of
guest
0 Bình luận
Inline Feedbacks
View all comments
.
.
.