Bagaimana untuk menambahkan bidang khusus (custom fields) dan metadata pada halaman produk di WooCommerce?

Semasa membina kedai WooCommerce yang profesional, bidang halaman produk lalai biasanya tidak dapat memenuhi semua keperluan perniagaan. Sebagai contoh, anda mungkin memerlukan untuk menambahkan “Model” atau “Tempoh Jaminan” untuk produk elektronik, atau “Bahan Fabrik” atau “Arahan Pembersihan” untuk pakaian. Pada masa ini, menambahkan bidang khusus dan metadata untuk produk menjadi sangat penting. Ini bukan sahaja dapat memperkaya maklumat produk dan meningkatkan pengalaman pengguna, tetapi juga menyediakan asas data untuk pencarian, penapisan, dan pembangunan ciri-ciri lanjutan pada masa hadapan.

Artikel ini akan menerangkan secara terperinci beberapa kaedah utama untuk melaksanakan medan khusus (custom fields) produk dalam WooCommerce, bermula dari penambahan kod asas hingga penggunaan plugin yang lebih canggih, serta menyediakan contoh kod yang lengkap dan boleh dijalankan.

Menggunakan pengait tindakan (action hooks) yang terbina dalam WooCommerce untuk menambahkan bidang

WooCommerce menyediakan pelbagai Action Hooks, yang membenarkan pembangun untuk memasukkan kandungan pada lokasi tertentu dalam panel data produk. Ini merupakan kaedah yang paling langsung dan kurang invasif terhadap sistem asli.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Penguraian Mendalam tentang Medan Khusus WordPress: Dari Asas hingga Amalan Penggunaan Tahap Tinggi。

Hook yang paling sering digunakan adalah… woocommerce_product_options_general_product_dataIa digunakan untuk menambahkan bidang dalam bahagian “Data Produk Biasa”.

UltaHost – Penyedia Hosting untuk WordPress

Jaminan pemulangan wang dalam tempoh 30 hari, lebar jalur dan pangkalan data yang tidak terhad, perlindungan DDoS percuma, diskaun 50% untuk pembelian selama 3 tahun.

Lawati halaman

Menambahkan bidang pada panel data produk biasa

Kod di bawah menunjukkan cara untuk menambahkan kotak masukan teks dan kotak pilihan drop-down ke panel data umum untuk “Produk Ringkas” dan “Produk Berubah-ubah”.

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>';
}

Menyimpan nilai bidang khusus (custom fields)

Hanya menunjukkan medan di latar belakang adalah tidak mencukupi; nilai yang dimasukkan oleh pengguna mesti disimpan ke dalam metadata produk. Ini memerlukan penggunaan… woocommerce_process_product_meta Ini adalah butang penyimpanan (save button).

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 );
}

Menampilkan medan khusus (custom fields) pada halaman produk frontend

Tujuan akhir adalah untuk memaparkan nilai-nilai bidang yang disimpan pada halaman produk di bahagian hadapan (frontend). Kita boleh mencapai ini dengan… woocommerce_product_additional_information 或 woocommerce_single_product_summary Tunggu fungsi “hook” tersebut, kemudian keluarkan data selepas bahagian deskripsi produk atau di dalam halaman tag.

Tunjukkan dalam halaman tag “Maklumat Tambahan”

Kod berikut akan menambahkan bidang khusus (custom fields) ke halaman tag “Additional Information” yang sedia ada dalam WooCommerce.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menganalisis WooCommerce secara mendalam: panduan lengkap untuk membina laman web e-dagang berprestasi tinggi.。

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($product_model)`.'</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($warranty_label)`.'</div>';
    }
}

Menggunakan plugin bidang kustom lanjutan untuk konfigurasi visualisasi

Bagi pengguna yang tidak biasa dengan kod atau yang memerlukan jenis medan yang kompleks (seperti gambar, pemilihan hubungan, pengulang, dll.), menggunakan plugin merupakan pilihan yang lebih cekap.Advanced Custom Fields Inilah standard industri dalam bidang ini.

Create a field group and associate it with the product.

Setelah memasang dan mengaktifkan plugin ACF, anda boleh dengan mudah membuat kumpulan medan (field groups) di bahagian pentadbiran WordPress (backend). Sebagai contoh, buatlah sebuah kumpulan medan bernama “Product Specifications” yang mengandungi medan “Model” (jenis medan teks) dan “Warranty Period” (jenis medan pilihan). Kemudian, tetapkan kumpulan medan tersebut untuk dipaparkan dalam “Location Rules” (aturan penempatan) apabila jenis artikel (article type) adalah “Product”.

ACF akan menguruskan secara automatik proses rendering bidang-bidang di belakang tabir, penyimpanan data, serta pengambilan nilai-nilai dari bahagian hadapan (frontend), tanpa perlu menulis sebarang kod untuk antara muka pengurusan.

hosting.com Hosting Bersama

Prestasi tinggi, menampilkan CPU AMD EPYC, storan SSD NVMe dan LiteSpeed, dengan sokongan pakar dalaman 24/7, langkah keselamatan canggih termasuk SSL, perlindungan serangan paksa kata laluan, perisian hasad dan DDoS, menjimatkan sehingga 73%.

Lawati halaman

Mengakses bidang ACF (Access Control Field) dalam templat frontend

Ketika dipaparkan di bahagian hadapan (frontend), gunakan ciri-ciri yang disediakan oleh ACF (Active Campaign Framework). get_field() Fungsi untuk mendapatkan nilai.

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>Model Produk:</strong>'`. esc_html($product_model)`.'</p>';
    }

if ( $warranty_period ) {
        echo '<p class="acf-warranty-period"><strong>Tempoh jaminan:</strong>'`. esc_html($warranty_period)`.'</p>';
    }
}

Menambahkan bidang kustom pada peringkat variasi untuk produk yang boleh diubah

Untuk produk yang boleh disesuaikan, kadangkala perlu menetapkan bidang khusus yang boleh disesuaikan secara berasingan untuk setiap variasi (seperti saiz yang berbeza, warna, dll.). Ini memerlukan penggunaan “hook” yang berkaitan dengan variasi tersebut. woocommerce_product_after_variable_attributes。

Menambahkan bidang ke panel variasi

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',
        )
    );
}

Menyimpan nilai lajur variasi

Penyimpanan untuk bidang variatif memerlukan penggunaan fungsi khusus (hook) yang direka khusus untuk tujuan tersebut. woocommerce_save_product_variation。

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Lengkap untuk Membina Laman Web Profesional: Membangunkan Tema WordPress Anda dari Kosong。

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 );
}

RINGKASAN

Menambahkan bidang khusus (custom fields) untuk produk dalam WooCommerce merupakan asas untuk mengatur fungsi kedai dengan lebih mendalam. Melalui pengaitan tindakan (action hooks) yang disediakan oleh platform, pembangun dapat mengawal dengan tepat kedudukan, jenis bidang, dan logik pemprosesan data, sehingga membolehkan integrasi yang ringan dan efisien. Bagi projek yang memerlukan penyebaran yang cepat atau melibatkan jenis bidang yang lebih kompleks, bantuan alat tambahan dapat digunakan. Advanced Custom Fields Plugin jenis ini dapat meningkatkan kecekapan pembangunan dengan ketara. Sama ada untuk produk yang mudah atau produk yang boleh disesuaikan, menguasai kaedah-kaedah ini akan membolehkan anda mengembangkan struktur data produk dengan fleksibiliti, seterusnya memenuhi pelbagai keperluan perniagaan e-dagang dan meningkatkan profesionalisme laman web serta pengalaman pengguna.

FAQ - Soalan Lazim

Adakah data daripada bidang khusus (custom fields) akan diimport/export bersama produk?

Ya, tetapi ia memerlukan pemprosesan tambahan. Apabila menggunakan alat import/export CSV yang terbina dalam WooCommerce, bidang khusus yang ditambah melalui kod tidak akan disertakan secara laluan dalam fail export. Anda perlu menambah tajuk lajur yang sesuai secara manual ke dalam fail CSV tersebut. _product_model), atau gunakan pilihan “Eksport semua metadata” semasa proses eksport. Proses eksport/import untuk medan ACF biasanya disokong dengan lebih baik oleh plugin ACF itu sendiri atau plugin import/export yang berkaitan (seperti WP All Import).

Hosting Bersama InterServer

Hosting kongsi: 1TB/bulan pada $2.50 USD, bulan pertama pada $0.10 USD dengan kod promo tryinterserver. 461 skrip aplikasi awan tersedia untuk pemasangan satu klik.

Lawati halaman

Bolehkah kita membuat penapis produk berdasarkan bidang khusus (custom fields)?

Boleh, tetapi ini melangkaui skop penambahan medan yang mudah sahaja. Anda perlu mengindeks nilai medan khusus tersebut ke dalam sistem taksonomi produk (product taxonomy) WooCommerce, atau menggunakan plugin penapisan pihak ketiga (seperti WooCommerce Product Filters) untuk mengenal pasti metadata khusus ini. Cara yang lebih canggih adalah dengan menulis kueri khusus (custom queries) untuk mengakses dan mengurus data tersebut. pre_get_posts 或 woocommerce_product_query Modifikasi gelung utama dalam skrip untuk menapis produk yang mempunyai metadata tertentu.

Apa perbezaan asas antara bidang yang ditambah oleh kod dan bidang yang ditambah oleh plugin ACF?

Perbezaan utamanya terletak pada cara pengurusan dan penyimpanan data. Dengan menambahkan data secara manual melalui kod, anda dapat mengawal secara langsung output HTML untuk setiap bidang (field), proses pengesahan (validation), dan logik penyimpanan data, serta memanfaatkan keupayaan yang disediakan oleh WordPress. update_post_meta 和 get_post_meta Fungsi tersebut digunakan untuk mengakses dan menyimpan data. Manakala plugin ACF membina sebuah sistem pengurusan yang lengkap di atasnya, menyediakan antara muka yang mesra pengguna untuk mendefinisikan kumpulan medan (fields) dan peraturan (rules), serta menyimpan data dalam cara yang lebih terstruktur (mungkin dalam satu array yang sama). get_field() Fungsi-fungsi tersebut mengembalikan nilai yang telah diformat. ACF memudahkan proses tersebut, namun cara penulisan kodnya lebih ringan dan lebih mudah untuk dikawal.

Selepas menambahkan bidang baru, bagaimanakah cara untuk menunjukkannya pada halaman arkib produk (halaman kedai)?

Untuk menampilkan bidang khusus (custom fields) pada halaman arkib produk (seperti laman utama kedai atau halaman kategori), biasanya perlu mengubah suai templat item produk yang berulang (repeating product items). Cara yang paling selamat adalah dengan menyalin fail templat dari WooCommerce. templates/content-product.php Pergi ke laluan yang sesuai untuk sub-topik anda dan gantilah kandungannya. Kemudian, panggil fungsi yang diperlukan di tempat yang sesuai (seperti di belakang harga). get_post_meta() Untuk mengeluarkan nilai daripada medan, anda boleh menggunakannya. woocommerce_after_shop_loop_item_title Kekunci jenis ini digunakan untuk memasukkan kandungan, namun perlu diingat bahawa susun atur (layout) mungkin berbeza bergantung pada tema yang digunakan.