Chỉnh sửa các tab trong woocommerce – Khi làm việc với WooCommerce, bạn có thể gặp những yêu cầu mới từ khách hàng. Hôm nay, mình có khách cần chỉnh sửa tab WooCommerce, nên viết bài này cho ai chưa biết.
Bạn chỉ cần thêm đoạn code dưới đây vào file functions.php của child theme để tránh mất tùy chỉnh khi cập nhật theme.
Hướng dẫn đổi tên tab woocommerce
Đổi tên Tab của Woocommerce một cách nhanh chóng bằng cách thay đổi như sau
/* Đổi tên Tab Woocommerce - thangoi.com */
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
$tabs['description']['title'] = __( 'Chi tiết sản phẩm' ); // Thay đổi tên tab description
$tabs['reviews']['title'] = __( 'Đánh giá của khách hàng' ); // Thay đổi tên tab reviews
$tabs['additional_information']['title'] = __( 'Sản phẩm' ); // Thay đổi tên tab additional information
return $tabs;
}Hướng dẫn tùy chỉnh nội dung hiển thị của từng tab trong woocommerce
Cách tùy chỉnh nội dung hiển thị của tab Description thành nội dung theo yêu cầu của mình
/* Thay đổi nội dung hiển thị trong Tab của Woocommerce - thangoi.com */
add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );
function woo_custom_description_tab( $tabs ) {
$tabs['description']['callback'] = 'woo_custom_description_tab_content'; // Thay đổi nội dung hiển thị trong Tab Woo
return $tabs;
}
function woo_custom_description_tab_content() {
echo '<h2>Thay đổi nội dung</h2>';
echo '<p>Đây là nơi nội dung hiển thị</p>';
}Hướng dẫn thêm 1 tab tùy chỉnh trong woocommerce
Bạn có thêm 1 Tab tùy ý điều chỉnh theo nội dung của riêng mình trong Woocommerce
/* Thêm 1 Tab riêng theo yêu cầu trong Woo - thangoi.com */
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Thêm 1 tab mới trong Woo
$tabs['test_tab'] = array(
'title' => __( 'Tên Tab mới', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
function woo_new_product_tab_content() {
// Nội dung trong Tab mới của Woo
echo '<h2>Tên Tab Mới</h2>';
echo '<p>Nội dung của Tab Mới được thêm tại đây.</p>';
}Hướng dẫn thay đổi vị trí của các tab trong woocommerce
Bạn không muốn các tab vẫn nguyên bản mà thay đổi vị trí của các Tab trong việc hiển thị thông tin trong Woo thì hãy làm theo cách này nhé.
/* Thay đổi vị trí của Tab trong Woo - thangoi.com */
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {
$tabs['reviews']['priority'] = 5; // Tab đánh giá vị trí 1
$tabs['description']['priority'] = 10; // Tab Chi tiết sản phẩm vị trí 2
$tabs['additional_information']['priority'] = 15; // Tab Thông tin sản phẩm vị trí 3
return $tabs;
}Hướng dẫn xóa tab trong woocommerce
Không muốn sử dụng các tab trong Woo, bạn có thể xóa theo ý muốn của mình.
/* Xóa Tab trong Woo - thangoi.com */
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
function woo_remove_product_tabs( $tabs ) {
unset( $tabs['description'] ); // Xóa tab mô tả
unset( $tabs['reviews'] ); // Xóa tab review
unset( $tabs['additional_information'] ); // Xóa tab additional information
return $tabs;
}Trên đây bài viết hướng dẫn tất cả tùy biến chỉnh sửa trong Tab của Woocommerece. Chúc bạn thành công!
