• Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
Friday, 2 May, 2025
Chia sẻ thủ thuật IT, tải phần mềm miễn phí
No Result
View All Result
  • Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
  • Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
No Result
View All Result
Chia sẻ thủ thuật IT, tải phần mềm miễn phí
No Result
View All Result
Home Hướng dẫn

[Hướng dẫn] Thêm Custom Fields vào Simple Products cho WooCommerce

Harris by Harris
28/12/2022
in Hướng dẫn, Tài liệu
Reading Time: 7 mins read
2
huanvmdotcom add custom field for woocommerce
50
SHARES
157
VIEWS
Share to FacebookShare to TwitterPin on Pinterest

Mục lục bài viết

  1. Thêm Custom Field
  2. Lưu Thông Tin
  3. Hiển thị trên Front-End

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.

huanvmdotcom add custom field for woocommerce

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.

huanvmdotcom add custom field for woocommerce 2

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!

Digiprove sealCopyright protected by Digiprove © 2022
5/5 - (1 vote)
Chào ! Bạn thấy nội dung này thế nào?
Hữu ích 343Tạm được 358
Tags: custom field
Previous Post

[Thủ thuật] Ngăn WordPress scaled (thu nhỏ) kích thước hình ảnh

Next Post

[Hướng dẫn] Auto title, alt text, caption & description cho hình ảnh upload

Harris

Harris

Thích du lịch, khám phá và thích vọc vạch

Next Post
[Hướng dẫn] Auto title, alt text, caption & description cho hình ảnh upload

[Hướng dẫn] Auto title, alt text, caption & description cho hình ảnh upload

Đăng ký
Đăng nhập bằng
Tôi đồng ý tạo tài khoản
Khi bạn đăng nhập lần đầu tiên thông qua nút Đăng nhập xã hội, chúng tôi thu thập thông tin hồ sơ công khai tài khoản của bạn do nhà cung cấp tài khoản mạng xã hội chia sẻ, dựa trên cài đặt quyền riêng tư của bạn. Chúng tôi cũng lưu địa chỉ email của bạn để tự động tạo tài khoản cho bạn trên trang web của chúng tôi. Khi tài khoản của bạn được tạo, bạn sẽ đăng nhập vào tài khoản này.
Không đồng ýĐồng ý
Nhận thông báo cho
guest
Đăng nhập bằng
Tôi đồng ý tạo tài khoản
Khi bạn đăng nhập lần đầu tiên thông qua nút Đăng nhập xã hội, chúng tôi thu thập thông tin hồ sơ công khai tài khoản của bạn do nhà cung cấp tài khoản mạng xã hội chia sẻ, dựa trên cài đặt quyền riêng tư của bạn. Chúng tôi cũng lưu địa chỉ email của bạn để tự động tạo tài khoản cho bạn trên trang web của chúng tôi. Khi tài khoản của bạn được tạo, bạn sẽ đăng nhập vào tài khoản này.
Không đồng ýĐồng ý
guest
2 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận
Dũng Tạ Ngọc
Dũng Tạ Ngọc
16/03/2023 08:32

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 ạ?

0
Phản hồi
Xem phản hồi (1)
wpdiscuz   wpDiscuz

KHUYÊN DÙNG

Auto Draft

10+ Tính Năng Tìm Kiếm Của Google Mà Bạn Có Thể Không Biết

05/03/2022
82
[Hướng dẫn] Thêm Custom Fields vào Simple Products cho WooCommerce

[Hướng dẫn] Thêm Custom Fields vào Simple Products cho WooCommerce

28/12/2022
157

ĐANG THỊNH HÀNH

Download Wondershare Filmora X 10.7.8.12 (Full + Repack)

Download Wondershare Filmora X 10.7.8.12 (Full + Repack)

14/08/2023
12.9k
Steinberg – Cubase Pro 12.0.0.205 x64

Steinberg – Cubase Pro 12.0.0.205 x64

24/03/2022
3.2k
Download Cubase 10 Pro All in One – Hướng dẫn cài đặt chi tiết

Download Cubase 10 Pro All in One – Hướng dẫn cài đặt chi tiết

15/09/2023
3.5k
Chia sẻ code nút liên hệ hiển thị bên trái

Chia sẻ code nút liên hệ hiển thị bên trái

30/08/2023
47
Mẫu contact form 7 đơn giản và đẹp

Mẫu contact form 7 đơn giản và đẹp

26/05/2023
575

GIỚI THIỆU

Chia sẻ thủ thuật IT, tải phần mềm miễn phí

Xin chào! Mình là Mạnh Huấn, website này mình xây dựng nhằm mục đích chia sẻ miễn phí các kiến thức, thủ thuật máy tính, làm web WordPress, SEO, MMO, các phần mềm hay... mà mình biết cho tất cả mọi người. Cảm ơn các bạn đã ghé qua, nếu thấy bài viết hay, hãy chia sẻ để ủng hộ tinh thần cho mình nhé!

Theo dõi mình tại đây:

BÀI VIẾT GẦN ĐÂY

Hướng dẫn cài đặt ZeroSSL trên DirectAdmin

Hướng dẫn cài đặt ZeroSSL trên DirectAdmin

12/10/2023
Set all products instock without edit manual in Woocommerce

Set all products instock without edit manual in Woocommerce

18/08/2023
Rearrange WooCommerce checkout page data fields

Rearrange WooCommerce checkout page data fields

18/08/2023

HV MEDIA ON FACEBOOK

  • Giới thiệu
  • Chính sách bảo mật
  • Bản quyền
  • Liên hệ
  • Quảng cáo
  • Gửi yêu cầu
  • Báo link hỏng

© 2020 HV Media - Chia sẻ thủ thuật IT, phần mềm by HV Media Center.

No Result
View All Result
  • Home
  • Mac OS
    • Adobe
    • Developer Tools
    • Graphics & Design
    • Internet – Security
    • Productivity
    • Utilities
    • Video – Audio
  • Windows
    • Anti Virus
    • Development
    • Graphics & Design
    • Office – Study
    • Tools
    • Utilities
    • Video – Audio
  • Điện thoại
    • Apps, Game Cho iOS
    • Phần mềm Android
  • Thủ thuật
    • Thủ thuật máy tính
    • Thủ thuật Mobile
    • Thủ thuật Facebook
  • Game hay
    • Game MacOS
    • Game Windows
  • Website
  • Hướng dẫn
  • Tài liệu

© 2020 HV Media - Chia sẻ thủ thuật IT, phần mềm by HV Media Center.

wpDiscuz
2
0
Bạn đang nghĩ gì, hãy để lại bình luận nhé !x
()
x
| Phản hồi