Xin chào mọi người, bài viết này mình sẽ chia sẻ tới các bạn cách thêm các thuộc tính Custom Fields sản phẩm trong trang chi tiết sản phẩm của WooCommerce . WooCommerce luôn mà một phần không thể thiếu trong các website dạng thương mại điện tử trên nền tảng WordPress. Để sản phẩm có được các thông tin được rõ ràng hơn thì chúng ta nên custom lại một số thuộc tính phù hợp với sản phẩm nhé. Để không phát sinh lỗi thì chúng ta nên sử dụng lại các Filter và các Hook của WooCommerce nhé.
Bước 1 : Để có được các thuộc tính trên các bạn chèn code sau vào file functions.php nhé:
//Add thuộc tính trên trang quản trị
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_add_fields');
function woocommerce_product_add_fields() { global $woocommerce; echo '<div class="options_group show_if_simple show_if_external show_if_variable">'; // Custom Product Text Field woocommerce_wp_select( array( 'id' => '_enable', 'type' => 'select', 'label' => __( 'Thông Tin Sản Phẩm :', 'woocommerce' ), 'description' => __( 'Chọn để bật hoặc tắt', 'woocommerce' ), 'options' => array( '1' => __( 'Tắt Thông Tin Sản Phẩm', 'woocommerce' ), '2' => __( 'Bật Thông Tin Sản Phẩm', 'woocommerce' ), ), 'desc_tip' => 'true', 'description' => 'Chọn để bật hoặc tắt' ) ); woocommerce_wp_select( array( 'id' => '_hang_san_xuat', 'type' => 'select', 'label' => __( 'Hãng sản xuất:', 'woocommerce' ), 'options' => array( '1' => __( 'Chọn Hãng Sản Xuất', 'woocommerce' ), 'An Cường' => __( 'An Cường', 'woocommerce' ), 'Wilson' => __( 'Wilson', 'woocommerce' ), 'Hornitex' => __( 'Hornitex', 'woocommerce' ), 'Morser' => __( 'Morser', 'woocommerce' ), 'Thaixin' => __( 'Thaixin', 'woocommerce' ), 'Thaistar' => __( 'Thaistar', 'woocommerce' ), 'Smartchoice' => __( 'Smartchoice', 'woocommerce' ), 'Smartwood' => __( 'Smartwood', 'woocommerce' ), 'Pergo' => __( 'Pergo', 'woocommerce' ), 'LeoWood' => __( 'LeoWood', 'woocommerce' ), 'Indofloor' => __( 'Indofloor', 'woocommerce' ), 'AlsaFloor' => __( 'AlsaFloor', 'woocommerce' ), 'Dongwha' => __( 'Dongwha', 'woocommerce' ), 'Kronospan' => __( 'Kronospan', 'woocommerce' ), ), 'desc_tip' => 'true', 'description' => 'Không chọn lấy mặc định' ) ); woocommerce_wp_text_input( array( 'id' => '_xuat_xu', 'label' => __('Xuất xứ:', 'woocommerce'), 'placeholder' => __('Việt Nam', 'woocommerce') ) ); woocommerce_wp_text_input( array( 'id' => '_ma_sp', 'label' => __('Mã sản phẩm:', 'woocommerce'), 'placeholder' => __('AC 888', 'woocommerce') ) ); woocommerce_wp_text_input( array( 'id' => '_kich_thuoc', 'label' => __('Kích thước:', 'woocommerce'), 'placeholder' => __('1200 x 190mm', 'woocommerce') ) ); woocommerce_wp_text_input( array( 'id' => '_do_day', 'label' => __('Độ dày:', 'woocommerce'), 'placeholder' => __('8mm, 10mm, 12mm', 'woocommerce') ) ); woocommerce_wp_text_input( array( 'id' => '_hesomaimonbemat', 'label' => __('Hệ số mài mòn bề mặt:', 'woocommerce'), 'placeholder' => __('AC4', 'woocommerce') ) ); woocommerce_wp_select( array( 'id' => '_bao_hanh', 'type' => 'select', 'label' => __( 'Bảo Hành:', 'woocommerce' ), 'options' => array( '1' => __( 'Chọn Năm Bảo Hành', 'woocommerce' ), '5 Năm' => __( '5 Năm', 'woocommerce' ), '10 Năm' => __( '10 Năm', 'woocommerce' ), '15 Năm' => __( '15 Năm', 'woocommerce' ), '20 Năm' => __( '20 Năm', 'woocommerce' ), ), 'desc_tip' => 'true', 'description' => 'Không chọn lấy mặc định' ) ); echo '</div>';
}
Trong đó các thuộc tính :
woocommerce_wp_select để tạo field có giá trị là lựa chọn
woocommerce_wp_text_input để tạo filed có giá trị nhập
desc_tip để hiển thị các tips hỗ trợ hiển thị mô tả trường mặc định. Thuộc tính này hoạt động cho mọi loại trường.
Bước 2 : Để lưu các giá trị nhập vào các trường ở code bên trên chúng tôi sử dụng hook woocommerce_process_product_meta
// lưu các trường thuộc tính
add_action('woocommerce_process_product_meta', 'woocommerce_product_fields_save');
function woocommerce_product_fields_save($post_id) { // Save field $woocommerce_product_field_enable = $_POST['_enable']; if (!empty($woocommerce_product_field_enable)) update_post_meta($post_id, '_enable', esc_attr($woocommerce_product_field_enable)); // Save field $woocommerce_product_field_hang_san_xuat = $_POST['_hang_san_xuat']; if (!empty($woocommerce_product_field_hang_san_xuat)) update_post_meta($post_id, '_hang_san_xuat', esc_attr($woocommerce_product_field_hang_san_xuat)); // Save field $woocommerce_product_field_xuat_xu = $_POST['_xuat_xu']; if (!empty($woocommerce_product_field_xuat_xu)) update_post_meta($post_id, '_xuat_xu', esc_attr($woocommerce_product_field_xuat_xu)); // Save field $woocommerce_product_field_ma_sp = $_POST['_ma_sp']; if (!empty($woocommerce_product_field_ma_sp)) update_post_meta($post_id, '_ma_sp', esc_attr($woocommerce_product_field_ma_sp)); // Save field $woocommerce_product_field_kich_thuoc = $_POST['_kich_thuoc']; if (!empty($woocommerce_product_field_kich_thuoc)) update_post_meta($post_id, '_kich_thuoc', esc_attr($woocommerce_product_field_kich_thuoc)); // Save field $woocommerce_product_field_do_day = $_POST['_do_day']; if (!empty($woocommerce_product_field_do_day)) update_post_meta($post_id, '_do_day', esc_attr($woocommerce_product_field_do_day)); // Save field $woocommerce_product_field_hesomaimonbemat = $_POST['_hesomaimonbemat']; if (!empty($woocommerce_product_field_hesomaimonbemat)) update_post_meta($post_id, '_hesomaimonbemat', esc_attr($woocommerce_product_field_hesomaimonbemat)); // Save field $woocommerce_product_field_bao_hanh = $_POST['_bao_hanh']; if (!empty($woocommerce_product_field_bao_hanh)) update_post_meta($post_id, '_bao_hanh', esc_attr($woocommerce_product_field_bao_hanh));
Sau khi lưu xong thì chúng ta cần hiển thị các trường thuộc tính lên, chúng ta sử dụng hook woocommerce_single_product_summary code đầy đủ cho hiển thị ra trang chi tiết sản phẩm
// Hiển thị thuộc tính sản phẩm
add_action('woocommerce_single_product_summary', 'display_front_end');
function display_front_end() { // Show on $woocommerce_enable = get_post_meta( get_the_ID(), '_enable', true ); if ( $woocommerce_enable == 2 ) { echo '<div class="wph_thetips" ><table><tbody>'; $woocommerce_hang_san_xuat = get_post_meta( get_the_ID(), '_hang_san_xuat', true ); if ( empty( $woocommerce_hang_san_xuat == 1) ) { echo '<tr><td>Hãng Sản Xuất :</td><td>'.$woocommerce_hang_san_xuat.'</td></tr>'; } $woocommerce_xuat_xu = get_post_meta( get_the_ID(), '_xuat_xu', true ); if ( ! empty( $woocommerce_xuat_xu ) ) { echo '<tr><td>Xuất Xứ :</td><td>'.$woocommerce_xuat_xu.'</td></tr>'; } $woocommerce_ma_sp = get_post_meta( get_the_ID(), '_ma_sp', true ); if ( ! empty( $woocommerce_ma_sp ) ) { echo '<tr><td>Mã Sản Phẩm :</td><td>'.$woocommerce_ma_sp.'</td></tr>'; } $woocommerce_kich_thuoc = get_post_meta( get_the_ID(), '_kich_thuoc', true ); if ( ! empty( $woocommerce_kich_thuoc ) ) { echo '<tr><td>Kích Thước :</td><td>'.$woocommerce_kich_thuoc.'</td></tr>'; } $woocommerce_do_day = get_post_meta( get_the_ID(), '_do_day', true ); if ( ! empty( $woocommerce_do_day ) ) { echo '<tr><td>Độ Dày :</td><td>'.$woocommerce_do_day.'</td></tr>'; } $woocommerce_hesomaimonbemat = get_post_meta( get_the_ID(), '_hesomaimonbemat', true ); if ( ! empty( $woocommerce_hesomaimonbemat ) ) { echo '<tr><td>Hệ Số Mài Mòn Bề Mặt :</td><td>'.$woocommerce_hesomaimonbemat.'</td></tr>'; } $woocommerce_bao_hanh = get_post_meta( get_the_ID(), '_bao_hanh', true ); if ( empty( $woocommerce_bao_hanh == 1 ) ) { echo '<tr><td>Bảo Hành :</td><td>'.$woocommerce_bao_hanh.'</td></tr>'; } echo '</tbody></table></div>'; }
}
Như vậy các trường thuộc tính đã được hiển thị.
Chúc các bạn thành công
