Người Viết : ViKiMi Editor

Thực hiện tuỳ chỉnh Product Tabs tại Trang sản Phẩm WooCommerce, hiệu quả tối ưu
Chúng ta thấy rằng đã có nhiều cách tuỳ chỉnh với Tabs của sản phẩm. Chúng ta có thêm sử dụng các Plugin hoặc tương tự chúng ta có thể sử dụng những mã Code cơ bản. Tuy nhiên, việc chúng ta thực hiện các phương pháp đã làm có thể khiến cho hiệu quả đạt được không cao. Nguyên nhân, có thể do không thể tối ưu hoá Code khiến Website không đạt hiệu suất như ý.
Vậy chúng ta còn có thể áp dụng cách nào để xử lý tuỳ chỉnh cho Tabs của sản phẩm. Chúng ta có thể sử dụng một cách cơ bản dưới đây, cách này cho phép có thể tạo tuỳ chỉnh ưng ý mà cũng có thể mở rộng ra nhiều cách khác nhau.
Công việc của chúng ta cũng không phức tạp, chỉ với vài bước đơn giản.
Những bước này là cách cơ bản nhất có thể áp dụng tạo ra các tiện ích mở rộng tốt hơn.
Cách để có thể tạo ra các tiện ích tối đa cho Website.
CHÚNG TA THỰC HIỆN CÁC BƯỚC SAU.
BƯỚC 1 : THỰC HIỆN THÊM TAB GIAO DIỆN GIÚP INPUT CÁC THÔNG TIN CHO PRODUCT TABS
Tại Product Data Section, thêm mới một Tab với giao diện nhập liệu các thông tin cho Custom Product tabs.
Tác dụng để có thể nhập các thông tin dữ liệu sẽ hiển thị tại Custom Product Tabs. ( Chúng ta cũng biết rằng Custom Product Tabs sẽ được thêm vào Trang sản Phẩm )
Chúng ta cần thêm đoạn Code này tới Function.php
add_filter( 'woocommerce_product_data_tabs', 'shop_add_product_data_tab' ); function shop_add_product_data_tab( $tabs ) { $tabs['shop'] = array( 'label' => __( 'Shop custom tab', 'your-text-domain' ), 'target' => 'shop_product_data_panel', 'priority' => 100, ); return $tabs; }
Tiếp theo, chúng ta cần tạo giao diện sẽ hiển thị cho Tab. Giao diện nhập liệu này sẽ bao gồm :
+ Tiêu đề của Custom Product Tabs (Tab tuỳ chỉnh)
+ ID của một trang thông tin sẽ được chọn.
Trang thông tin này được tạo ra & sẽ hiển thị toàn bộ nội dung của nó tại Custom Product Tabs.
Chúng ta có thể hiểu rằng Trang thông tin này chính là trang nội dung mà chúng ta muốn giới thiệu nhiều hơn về Sản Phẩm, chính vì vậy nó sẽ được hiển thị tại Custom Product Tabs. Điều này nhằm giới thiệu nhiều hơn về Sản Phẩm tới khách hàng.
Nội dung Code cần thiết :
add_action( 'woocommerce_product_data_panels', 'shop_add_product_data_panels' );
function shop_add_product_data_panels() {
echo '<div id="shop_product_data_panel" class="panel woocommerce_options_panel hidden">';
woocommerce_wp_text_input(
array(
'id' => 'shop_tab_title',
'value' => get_post_meta( get_the_ID(), 'shop_tab_title', true ),
'label' => __( 'Tab title', 'your-text-domain' ),
'description' => __( 'Set a title for the tab in the front end.', 'your-text-domain' ),
)
);
woocommerce_wp_select(
array(
'id' => 'shop_tab_content',
'value' => get_post_meta( get_the_ID(), 'shop_tab_content', true ),
'label' => __( 'Tab content', 'your-text-domain' ),
'description' => __( 'Select a page to display its content in the custom tab.', 'your-text-domain' ),
'options' => wp_list_pluck( get_pages(), 'post_title', 'ID' ),
)
);
echo '</div>';
}
BƯỚC 2 : THỰC HIỆN LƯU DỮ LIỆU ĐƯỢC INPUT
Chúng ta đã tạo ra Tab mới tại Product Data Section, và để có thể lưu các thông tin nhập liệu tại đây cần sử dụng đoạn mã Code sau.
Thêm đoạn Code sau vào function.php
add_action( 'woocommerce_process_product_meta', 'shop_save_custom_tab_data' );
function shop_save_custom_tab_data( $post_id ) {
$shop_tab_title = $_POST['shop_tab_title'];
$shop_tab_content = $_POST['shop_tab_content'];
if ( ! empty( $shop_tab_title ) ) {
update_post_meta( $post_id, 'shop_tab_title', esc_html( $shop_tab_title ) );
}
if ( ! empty( $shop_tab_content ) ) {
update_post_meta( $post_id, 'shop_tab_content', absint( $shop_tab_content ) );
}
}

BƯỚC 3 : TẠO CUSTOM PRODUCT DATA TABS VÀ HIỂN THỊ NỘI DUNG ĐÃ NHẬP LIỆU TỚI CUSTOM PRODUCT DATA TABS
Tiêp theo, chúng ta cần tạo Custom Product Tabs. Tại Custom product tabs, chúng ta sẽ hiển nội dung đã nhập liệu tới nó.
Như vậy, chúng ta sẽ tạo thành công Custom Product Tabs cho phép hiển thị nội dung mà chúng ta mong muốn một cách linh động.
Đoạn Code chúng ta cần thêm tới function.php
add_filter( 'woocommerce_product_tabs', 'shop_new_wc_product_tab' );
function shop_new_wc_product_tab( $tabs ) {
global $product;
$title = get_post_meta( $product->get_ID(), 'shop_tab_title', true );
if ( empty( $title ) ) {
return $tabs;
}
$tabs['desc_tab'] = array(
'title' => $title,
'priority' => 50,
'callback' => 'shop_new_wc_product_tab_content',
);
return $tabs;
}
+ Nếu không thiết lập Title (Title không được input) thì Custom Product data Tabs sẽ không hiển thị.
+ Callback function mà chúng ta sử dụng là ‘shop_new_wc_product_tab_content’ ; Callback function sẽ giúp chúng ta hiển thị những gì cần thiết.
function shop_new_wc_product_tab_content() {
global $product;
$page = get_post_meta( $product->get_ID(), 'shop_tab_content', true );
$content = apply_filters( 'the_content', get_post_field( 'post_content', $page ) );
echo $content;
}
+ Tại đây, sẽ lấy nội dung Trang thông tin mà chúng ta tạo ra để hiển thị nhiều hơn về sản phẩm. Trang thông tin này được chọn tại Tab giúp nhập liệu.
+ Nội dung của Trang thông tin sẽ hiển thị tại Custom Product Tabs
Đây là cách linh động mà chúng ta có thể làm.
LƯU Ý : Chúng ta có thể thêm những Code tuỳ chỉnh này của chúng ta vào Child Theme để đảm bảo việc cập nhật Theme sẽ không ảnh hưởng tới tình trạng hoạt động của Website.
Việc tuỳ chỉnh Product Tabs lần này sẽ giúp chúng ta thao tác trên từng Sản Phẩm của Shop.
Vì mỗi lần bạn cập nhập Theme thì bạn có thể yên tâm rằng Code của bạn không bị xoá.