WooCommerce được cho là một trong những cách phổ biến nhất để bán sản phẩm sử dụng WordPress. Nếu bạn đang muốn tìm kiếm một cửa hàng trực tuyến dễ cài đặt và quản lý, WooCommerce là một tùy chọn tuyệt vời, cả miễn phí và nguồn mở. Ngoài ra, WooCommerce đã phát triển thành một giải pháp thương mại điện tử rất mạnh cho các trang web dựa trên WordPress.
Khi chúng tôi hoặc khách hàng của chúng tôi muốn mở rộng tính năng vượt ra ngoài những thứ có sẵn của WooCommerce
Cụ thể bạn có một sản phẩm đơn giản mà bạn muốn bán nhưng bạn muốn bao gồm thêm một chút thông tin về sản phẩm sẽ hiển thị ở mặt trước của trang chi tiết sản phẩm hay trang cửa hàng.
Chúng tôi sẽ sử dụng chính những những custom field và hook của WooCommerce để tạo thêm tính năng này.
Thêm Custom Field
Như hình ảnh các bạn thấy ở trên chúng tôi thêm custom field vào trang Chỉnh sửa sản phẩm. Để thêm các trường này, các bạn cần chỉnh sửa file functions.php của theme đang sử dụng.
Đầu tiên là hook “woocommerce_product_options_general_product_data” , hook này để thêm custom field vào trang chỉnh sửa sản phẩm. Copy đoạn mã sau và dán và file functions.php.
1 2 | // Add field in to the admin page produc add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_add_fields'); |
Để tạo các custom field cho sản phẩm, chúng tôi sử dụng các field có sẵn của Woocommerce. Copy đoạn mã sau và dán tiếp vào file functions.php.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | // Add field in to the admin page produc 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>'; } |
Lưu Thông Tin
Trong đoạn mã trên, woocommerce_wp_select để tạo trường có giá trị là lựa chọn, woocommerce_wp_text_input để tạo trường có giá trị nhập, desc_tip để hiển thị các bong bóng nhỏ xinh đó ở bên phải của trường thay vì 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.
Để 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”. Copy đoạn mã sau và dán nó vào file function.php.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | // Save field 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)); } |
Hiển thị trên Front-End
Bây giờ chúng tôi đã có giá trị nhập vào và lưu chúng trên cơ sở dữ liệu và muốn nó hiển thị ra trang chi tiết sản phẩm như hình dưới đây.
Chúng tôi sử dụng hook woocommerce_single_product_summary code đầy đủ cho hiển thị ra trang chi tiết sản phẩm. Copy đoạn này và dán tiếp vào file function.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | // Display 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>'; } } |
Trong bài viết này chúng tôi đã hướng dẫn các bạn làm thế nào để thêm custom filed vào trang chỉnh sửa sản phẩm và hiển thị chúng ra ngoài front-end trang chi tiết sản phẩm.
Bài tiếp theo tôi sẽ hướng dẫn các bạn hiển thị nó ra ngoài trang shop, category.
Chúng tôi hy vọng bạn thấy hướng dẫn này hữu ích. Nếu vậy, hãy xem xét chia sẻ nó với người khác!
Copyright protected by Digiprove © 2022![[Hướng dẫn] Auto title, alt text, caption & description cho hình ảnh upload](https://huanvm.com/wp-content/uploads/2022/08/huanvmdotcom-alt-image.jpg "[Hướng dẫn] Auto title, alt text, caption & description cho hình ảnh upload 7")
ad cho mình hỏi, mình muốn thêm trường kiểu tích box (tích chọn nhiều thông số) thì câu lệnh như thế nào ạ?