Cách thêm trường tùy chỉnh và siêu dữ liệu cho trang sản phẩm WooCommerce

Khi xây dựng cửa hàng WooCommerce chuyên nghiệp, các trường trang sản phẩm mặc định thường không đáp ứng được mọi nhu cầu kinh doanh. Ví dụ, bạn có thể cần thêm “Model” hoặc “Thời hạn bảo hành” cho sản phẩm điện tử, hoặc “Thành phần vải” hoặc “Hướng dẫn giặt” cho quần áo. Lúc này, việc thêm các trường tùy chỉnh và siêu dữ liệu cho sản phẩm trở nên cực kỳ quan trọng. Điều này không chỉ làm phong phú thông tin sản phẩm, nâng cao trải nghiệm người dùng, mà còn cung cấp nền tảng dữ liệu cho việc tìm kiếm, lọc và phát triển các tính năng nâng cao sau này.

Bài viết này sẽ giới thiệu chi tiết một số phương pháp cốt lõi để triển khai các trường tùy chỉnh cho sản phẩm trong WooCommerce, từ việc thêm mã cơ bản nhất đến việc sử dụng các plugin nâng cao, và cung cấp các ví dụ mã hoàn chỉnh, có thể chạy được.

Sử dụng Action Hooks tích hợp sẵn của WooCommerce để thêm trường

WooCommerce cung cấp nhiều Action Hooks phong phú, cho phép các nhà phát triển chèn nội dung vào các vị trí cụ thể trong bảng dữ liệu sản phẩm. Đây là phương pháp trực tiếp nhất và ít xâm nhập nhất vào hệ thống gốc.

Đọc thêm Phân tích chuyên sâu về trường tùy chỉnh WordPress: Từ cơ bản đến ứng dụng thực tế nâng cao。

Hook được sử dụng phổ biến nhất là woocommerce_product_options_general_product_datanó được dùng để thêm trường vào phần “Dữ liệu sản phẩm chung”.

UltaHost – Nhà cung cấp dịch vụ máy chủ WordPress chuyên nghiệp

Bảo đảm hoàn tiền trong 30 ngày, băng thông và cơ sở dữ liệu không giới hạn, bảo vệ DDoS miễn phí, mua 3 năm ưu đãi 50%

Truy cập trang

Thêm trường vào bảng dữ liệu sản phẩm chung

Đoạn mã dưới đây minh họa cách thêm một ô nhập văn bản và một hộp chọn thả xuống vào bảng dữ liệu chung cho “Sản phẩm đơn giản” và “Sản phẩm biến thể”.

add_action( 'woocommerce_product_options_general_product_data', 'add_custom_general_fields' );
function add_custom_general_fields() {
    global $post;

echo '<div class="options_group">';

// 文本字段示例：产品型号
    woocommerce_wp_text_input(
        array(
            'id'          =&gt; '_product_model',
            'label'       =&gt; __( '产品型号', 'woocommerce' ),
            'placeholder' =&gt; '例如：X-2024Pro',
            'desc_tip'    =&gt; 'true',
            'description' =&gt; __( '请输入此产品的具体型号。', 'woocommerce' ),
        )
    );

// 下拉选择框示例：保修期
    woocommerce_wp_select(
        array(
            'id'          =&gt; '_warranty_period',
            'label'       =&gt; __( '保修期', 'woocommerce' ),
            'options'     =&gt; array(
                ''        =&gt; __( '请选择...', 'woocommerce' ),
                '1year'   =&gt; __( '一年', 'woocommerce' ),
                '2years'  =&gt; __( '两年', 'woocommerce' ),
                'lifetime'=&gt; __( '终身保修', 'woocommerce' ),
            ),
            'desc_tip'    =&gt; 'true',
            'description' =&gt; __( '请选择该产品提供的保修时长。', 'woocommerce' ),
        )
    );

echo '</div>';
}

Lưu giá trị của trường tùy chỉnh

Chỉ hiển thị trường ở backend là chưa đủ, cần phải lưu giá trị người dùng nhập vào siêu dữ liệu sản phẩm. Điều này cần sử dụng đến woocommerce_process_product_meta hook lưu này.

add_action( 'woocommerce_process_product_meta', 'save_custom_general_fields' );
function save_custom_general_fields( $post_id ) {
    // 保存产品型号字段
    $product_model = isset( $_POST['_product_model'] ) ? sanitize_text_field( $_POST['_product_model'] ) : '';
    update_post_meta( $post_id, '_product_model', $product_model );

// 保存保修期字段
    $warranty_period = isset( $_POST['_warranty_period'] ) ? sanitize_text_field( $_POST['_warranty_period'] ) : '';
    update_post_meta( $post_id, '_warranty_period', $warranty_period );
}

Hiển thị trường tùy chỉnh trên trang sản phẩm frontend

Hiển thị giá trị trường đã lưu trên trang sản phẩm frontend là mục đích cuối cùng. Chúng ta có thể sử dụng các hook như woocommerce_product_additional_information 或 woocommerce_single_product_summary để xuất dữ liệu sau mô tả sản phẩm hoặc trong các tab.

Hiển thị trong tab “Thông tin bổ sung”

Đoạn mã sau sẽ thêm trường tùy chỉnh vào tab “Thông tin bổ sung” mặc định của WooCommerce.

Đọc thêm Hướng dẫn toàn diện về WooCommerce: Xây dựng website thương mại điện tử hiệu suất cao。

add_action( 'woocommerce_product_additional_information', 'display_custom_fields_on_product_page' );
function display_custom_fields_on_product_page() {
    global $product;

$product_model = get_post_meta( $product->get_id(), '_product_model', true );
    $warranty_period = get_post_meta( $product->get_id(), '_warranty_period', true );

if ( $product_model ) {
        echo '<div class="product-model"><strong>' . esc_html__( '产品型号：', 'woocommerce' ) . '</strong>' . esc_html( $mô_hình_sản_phẩm ) . '</div>';
    }

if ( $warranty_period ) {
        // 将存储的值转换为可读的标签
        $warranty_options = array(
            '1year'    =&gt; __( '一年', 'woocommerce' ),
            '2years'   =&gt; __( '两年', 'woocommerce' ),
            'lifetime' =&gt; __( '终身保修', 'woocommerce' ),
        );
        $warranty_label = isset( $warranty_options[ $warranty_period ] ) ? $warranty_options[ $warranty_period ] : $warranty_period;
        echo '<div class="warranty-period"><strong>' . esc_html__( '保修期：', 'woocommerce' ) . '</strong>' . esc_html( $nhãn_bảo_hành ) . '</div>';
    }
}

Cấu hình trực quan với plugin Advanced Custom Fields

Đối với người dùng không quen thuộc với mã code hoặc cần các loại trường phức tạp (như hình ảnh, lựa chọn quan hệ, bộ lặp, v.v.), việc sử dụng plugin là lựa chọn hiệu quả hơn.Advanced Custom Fields Là tiêu chuẩn ngành trong lĩnh vực này.

Tạo nhóm trường và liên kết với sản phẩm

Sau khi cài đặt và kích hoạt plugin ACF, bạn có thể tạo nhóm trường một cách trực quan trong khu vực quản trị WordPress. Ví dụ, tạo một nhóm trường có tên “Thông số kỹ thuật sản phẩm”, bao gồm “Model” (trường văn bản) và “Thời hạn bảo hành” (trường lựa chọn). Sau đó, trong “Quy tắc vị trí”, đặt nó hiển thị “nếu loại bài viết bằng sản phẩm”.

ACF sẽ tự động xử lý việc hiển thị trường trong khu vực quản trị, lưu trữ dữ liệu và lấy giá trị cho giao diện người dùng, mà không cần viết bất kỳ mã nào cho giao diện quản lý.

Hosting.com - lưu trữ chia sẻ

Hiệu năng cao, được trang bị CPU AMD EPYC, lưu trữ SSD NVMe và LiteSpeed, hỗ trợ chuyên gia nội bộ 24 giờ/ngày, các biện pháp bảo mật tiên tiến bao gồm SSL, chống brute force, phần mềm độc hại và bảo vệ DDoS, tiết kiệm tới 73%.

Truy cập trang

Gọi trường ACF trong mẫu giao diện người dùng

Khi hiển thị ở frontend, sử dụng get_field() hàm được cung cấp bởi ACF để lấy giá trị.

add_action( 'woocommerce_single_product_summary', 'display_acf_fields_on_product_page', 25 );
function display_acf_fields_on_product_page() {
    $product_model = get_field( 'product_model' );
    $warranty_period = get_field( 'warranty_period' );

if ( $product_model ) {
        echo '<p class="acf-product-model"><strong>Mã sản phẩm:</strong>' . esc_html( $mô_hình_sản_phẩm ) . '</p>';
    }

if ( $warranty_period ) {
        echo '<p class="acf-warranty-period"><strong>Thời hạn bảo hành:</strong>' . esc_html( Thời gian bảo hành ) . '</p>';
    }
}

Thêm trường tùy chỉnh cấp biến thể cho sản phẩm biến thể

Đối với sản phẩm biến thể, đôi khi cần thiết lập các trường tùy chỉnh độc lập cho từng biến thể (như kích thước, màu sắc khác nhau). Điều này cần sử dụng các hook liên quan đến biến thể woocommerce_product_after_variable_attributes。

Thêm trường vào bảng biến thể

add_action( 'woocommerce_product_after_variable_attributes', 'add_custom_field_to_variations', 10, 3 );
function add_custom_field_to_variations( $loop, $variation_data, $variation ) {
    // 变体专属字段：例如，每个颜色变体的 Pantone 色号
    woocommerce_wp_text_input(
        array(
            'id'          => '_pantone_code[' . $variation->ID . ']',
            'label'       => __( 'Pantone 色号', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_pantone_code', true ),
            'placeholder' => '例如：PMS 185 C',
            'wrapper_class' => 'form-row form-row-first',
        )
    );
}

Lưu giá trị trường biến thể

Việc lưu trữ trường biến thể cần sử dụng hook chuyên dụng woocommerce_save_product_variation。

Đọc thêm Hướng dẫn toàn diện xây dựng website chuyên nghiệp: Phát triển theme WordPress từ con số 0。

add_action( 'woocommerce_save_product_variation', 'save_custom_variation_field', 10, 2 );
function save_custom_variation_field( $variation_id, $loop ) {
    $pantone_code = isset( $_POST['_pantone_code'][ $variation_id ] ) ? sanitize_text_field( $_POST['_pantone_code'][ $variation_id ] ) : '';
    update_post_meta( $variation_id, '_pantone_code', $pantone_code );
}

Tóm lại

Việc thêm trường tùy chỉnh cho sản phẩm WooCommerce là nền tảng để tùy biến sâu chức năng cửa hàng. Thông qua các hook hành động gốc, nhà phát triển có thể kiểm soát chính xác vị trí, loại và logic xử lý dữ liệu của trường, đạt được tích hợp nhẹ nhàng. Đối với các dự án cần triển khai nhanh hoặc liên quan đến loại trường phức tạp, việc sử dụng Advanced Custom Fields các plugin này có thể nâng cao đáng kể hiệu quả phát triển. Dù là sản phẩm đơn giản hay sản phẩm biến thể, nắm vững các phương pháp này đều cho phép bạn linh hoạt mở rộng cấu trúc dữ liệu sản phẩm, từ đó đáp ứng nhu cầu kinh doanh thương mại điện tử đa dạng, nâng cao tính chuyên nghiệp và trải nghiệm người dùng của website.

FAQ 常见问题

Dữ liệu trường tùy chỉnh có được xuất/nhập cùng với sản phẩm không?

Có, nhưng cần xử lý bổ sung. Khi sử dụng công cụ xuất/nhập CSV gốc của WooCommerce, các trường tùy chỉnh được thêm bằng mã mặc định sẽ không được bao gồm trong cột xuất. Bạn cần tự thêm tiêu đề cột tương ứng (ví dụ: _product_model），hoặc sử dụng tùy chọn “Xuất tất cả siêu dữ liệu” khi xuất. Việc xuất/nhập trường ACF thường được hỗ trợ tốt hơn bởi chính plugin ACF hoặc các plugin liên quan như WP All Import.

Máy chủ chia sẻ của InterServer

Lưu trữ chia sẻ với mức phí $2,50 USD mỗi tháng, giảm giá $0,1 USD trong tháng đầu tiên, mã giảm giá tryinterserver, với 461 ứng dụng đám mây và cài đặt chỉ bằng một cú nhấp chuột.

Truy cập trang

Có thể tạo bộ lọc sản phẩm dựa trên trường tùy chỉnh không?

Có thể, nhưng điều này vượt ra ngoài phạm vi đơn giản là thêm trường. Bạn cần lập chỉ mục giá trị của trường tùy chỉnh vào taxonomy sản phẩm của WooCommerce, hoặc sử dụng plugin lọc bên thứ ba (như WooCommerce Product Filters) để nhận diện các siêu dữ liệu tùy chỉnh này. Cách làm nâng cao hơn là viết truy vấn tùy chỉnh, trong pre_get_posts 或 woocommerce_product_query hook để sửa đổi vòng lặp chính, nhằm lọc các sản phẩm có siêu dữ liệu cụ thể.

Sự khác biệt cơ bản giữa các trường được thêm bằng code và các trường được thêm bằng plugin ACF là gì?

Sự khác biệt cơ bản nằm ở cách quản lý và lưu trữ dữ liệu. Khi thêm thủ công bằng code, bạn trực tiếp kiểm soát đầu ra HTML, xác thực, logic lưu trữ của trường, và sử dụng các hàm của WordPress như update_post_meta 和 get_post_meta để truy cập và lưu dữ liệu. Trong khi đó, plugin ACF xây dựng một lớp quản lý hoàn chỉnh trên đó, cung cấp giao diện thân thiện để định nghĩa nhóm trường và quy tắc, đồng thời lưu trữ dữ liệu một cách có cấu trúc hơn (có thể trong cùng một mảng), thông qua các hàm như get_field() để trả về các giá trị đã được định dạng. ACF đơn giản hóa quy trình, nhưng cách làm bằng code nhẹ hơn và kiểm soát trực tiếp hơn.

Sau khi thêm trường tùy chỉnh, làm thế nào để hiển thị nó trên trang lưu trữ sản phẩm (trang cửa hàng)?

Để hiển thị trường tùy chỉnh trên trang lưu trữ sản phẩm (như trang chủ cửa hàng, trang danh mục), thường cần chỉnh sửa mẫu vòng lặp sản phẩm. Cách an toàn nhất là sao chép tệp mẫu WooCommerce templates/content-product.php vào đường dẫn tương ứng trong chủ đề con của bạn để ghi đè, sau đó gọi nó ở vị trí thích hợp (chẳng hạn như sau giá) get_post_meta() để xuất giá trị trường. Bạn cũng có thể sử dụng woocommerce_after_shop_loop_item_title Các hook này được sử dụng để chèn nội dung, nhưng cần lưu ý bố cục có thể khác nhau tùy theo chủ đề.