Bagaimana cara menambahkan bidang kustom dan metadata ke halaman produk WooCommerce?

Saat membangun toko WooCommerce yang profesional, field (kolom) halaman produk default seringkali tidak dapat memenuhi semua kebutuhan bisnis. Misalnya, Anda mungkin perlu menambahkan informasi seperti “model” atau “jangka garansi” untuk produk elektronik, atau “komposisi bahan” atau “petunjuk pencucian” untuk produk pakaian. Pada saat itulah, menambahkan field dan metadata (data tambahan) khusus untuk produk menjadi sangat penting. Hal ini tidak hanya dapat memperkaya informasi produk dan meningkatkan pengalaman pengguna, tetapi juga menyediakan dasar data untuk pencarian, penyaringan, serta pengembangan fitur lanjutan di kemudian hari.

Artikel ini akan menjelaskan secara rinci beberapa metode utama untuk mengimplementasikan bidang kustom produk (custom product fields) di WooCommerce, mulai dari penambahan kode dasar hingga penggunaan plugin tingkat lanjut, serta menyediakan contoh kode yang lengkap dan dapat dijalankan.

Menggunakan hook aksi bawaan WooCommerce untuk menambahkan field

WooCommerce menyediakan berbagai Action Hooks yang memungkinkan pengembang untuk menambahkan konten di posisi tertentu pada panel data produk. Ini merupakan metode yang paling langsung dan memiliki tingkat invasi terhadap sistem asli yang paling rendah.

推荐阅读 Menganalisis secara mendalam bidang kustom WordPress: dari dasar-dasar hingga praktik aplikasi tingkat lanjut.。

Hook yang paling sering digunakan adalah… woocommerce_product_options_general_product_dataFungsi tersebut adalah untuk menambahkan bidang (field) ke dalam bagian “Data Produk Biasa” (Regular Product Data).

UltaHost – Hosting untuk WordPress

Jaminan pengembalian uang dalam 30 hari, bandwidth dan basis data yang tidak terbatas, perlindungan DDoS gratis, diskon 50% untuk pembelian selama 3 tahun (dari harga normal: 50%).

halaman akses

Menambahkan field ke panel data produk biasa

Kode di bawah ini menunjukkan cara menambahkan kotak masukan teks (text input box) dan kotak pilihan drop-down (drop-down selection box) ke panel data umum untuk “produk sederhana” (simple product) dan “produk variabel” (variable product).

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 dari bidang kustom

Hanya menampilkan field di bagian belakang (backend) saja tidak cukup; nilai yang dimasukkan oleh pengguna harus disimpan ke dalam metadata produk. Untuk melakukan ini, diperlukan… woocommerce_process_product_meta Ini adalah “hook” untuk penyimpanan data.

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 bidang kustom pada halaman produk frontend

Tujuan akhirnya adalah menampilkan nilai dari field-field yang telah disimpan di halaman produk frontend. Kita dapat mencapainya dengan… woocommerce_product_additional_information 或 woocommerce_single_product_summary Tunggu fungsi penambahan “hook” tersebut, lalu keluarkan data tersebut setelah deskripsi produk atau di dalam halaman tag (tag page).

Tampilkan di halaman tag “Informasi Tambahan”

Kode berikut akan menambahkan field kustom ke halaman tag “Informasi Tambahan” (Additional Information) yang bawaan oleh WooCommerce.

推荐阅读 Analisis Mendalam tentang WooCommerce: Panduan Lengkap untuk Membangun Situs E-commerce Berkinerja 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 tingkat lanjut untuk konfigurasi visualisasi

Bagi pengguna yang tidak terbiasa dengan kode, atau yang memerlukan jenis field yang kompleks (seperti gambar, pilihan hubungan, pengulang, dll.), menggunakan plugin merupakan pilihan yang lebih efisien.Advanced Custom Fields Inilah standar industri di bidang ini.

Buat grup field (kumpulan kolom) dan kaitkannya dengan produk.

Setelah menginstal dan mengaktifkan plugin ACF (Advanced Custom Fields), Anda dapat dengan mudah membuat grup field di panel administrasi WordPress. Misalnya, buatlah sebuah grup field bernama “Spesifikasi Produk” yang mencakup field “Model” (jenis field teks) dan “Masa Garansi” (jenis field pilihan). Selanjutnya, aturlah agar grup field tersebut ditampilkan hanya ketika jenis artikel (article type) sesuai dengan “Produk”.

ACF akan secara otomatis menangani proses rendering (pemformatan tampilan) field di backend, penyimpanan data, serta pengambilan nilai dari frontend, tanpa perlu menulis kode apa pun untuk antarmuka pengelolaan (management interface).

hosting.com hosting bersama

Kinerja tinggi, dilengkapi dengan CPU AMD EPYC, penyimpanan SSD NVMe, dan LiteSpeed, dukungan internal ahli 24 jam sehari, langkah-langkah keamanan canggih termasuk SSL, brute force, malware, dan perlindungan DDoS, menghemat hingga 731 TB/bulan.

halaman akses

Mengakses field ACF (Access Control Field) dalam template frontend

Saat ditampilkan di frontend, gunakan fitur yang disediakan oleh ACF (Active Campaign Framework). get_field() Fungsi digunakan untuk mengambil 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>Masa garansi:</strong>'`. esc_html($warranty_period)`.'</p>';
    }
}

Menambahkan field kustom pada tingkat variasi untuk produk yang dapat diubah

Untuk produk yang bersifat variabel, terkadang diperlukan untuk mengatur bidang kustom yang terpisah untuk setiap varian (misalnya, ukuran atau warna yang berbeda). Hal ini memerlukan penggunaan “hook” (fungsi khusus) yang terkait dengan masing-masing varian. woocommerce_product_after_variable_attributes。

Menambahkan field 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 dari field variabel

Penyimpanan data pada field variabel memerlukan penggunaan “hook” khusus. woocommerce_save_product_variation。

推荐阅读 Panduan Lengkap untuk Membuat Situs Web Profesional: Mengembangkan Tema WordPress Anda dari Nol。

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

Menyimpulkan.

Menambahkan field khusus (custom fields) untuk produk di WooCommerce merupakan dasar dari penyesuaian mendalam terhadap fungsi toko (store customization). Dengan menggunakan hook aksi (action hooks) yang tersedia, pengembang dapat mengontrol dengan tepat posisi, jenis, dan logika pemrosesan data field tersebut, sehingga integrasi dapat dilakukan dengan cara yang sederhana dan efisien. Untuk proyek yang memerlukan penyebaran yang cepat atau melibatkan jenis field yang kompleks, bantuan alat atau pendekatan tertentu dapat sangat membantu. Advanced Custom Fields Plugin jenis ini dapat sangat meningkatkan efisiensi pengembangan. Baik untuk produk sederhana maupun produk yang bersifat dinamis (dapat berubah), memahami metode-metode ini akan memungkinkan Anda untuk secara fleksibel memperluas struktur data produk, sehingga dapat memenuhi berbagai kebutuhan bisnis e-commerce dan meningkatkan profesionalitas serta pengalaman pengguna situs web.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah data dari bidang kustom (custom fields) akan ikut diekspor/impor bersama produk?

Ya, tetapi diperlukan pemrosesan tambahan. Saat menggunakan alat impor/ekspor CSV bawaan dari WooCommerce, bidang kustom yang ditambahkan melalui kode umumnya tidak akan tercantum dalam kolom ekspor. Anda perlu menambahkan judul kolom yang sesuai secara manual ke dalam file CSV tersebut. _product_model), atau gunakan opsi “Ekspor semua metadata” saat melakukan ekspor. Proses ekspor/impor untuk field ACF umumnya mendapatkan dukungan yang lebih baik dari plugin ACF itu sendiri atau plugin ekspor/impor terkait (seperti WP All Import).

Hosting bersama InterServer.

Hosting bersama seharga $2,50 USD per bulan, diskon $0,1 USD untuk bulan pertama dengan kode promo tryinterserver, serta 461 skrip aplikasi cloud yang dapat diinstal dengan sekali klik.

halaman akses

Bisakah kita membuat filter produk berdasarkan field kustom?

Bisa, tetapi hal ini melampaui sekadar menambahkan field baru secara sederhana. Anda perlu mengindeks nilai dari field-field kustom tersebut ke dalam sistem taksonomi produk (product taxonomy) di WooCommerce, atau menggunakan plugin penyaringan pihak ketiga (seperti WooCommerce Product Filters) untuk mengenali metadata kustom tersebut. Cara yang lebih maju adalah dengan menulis kode kustom (query) untuk melakukan proses pengambilan data yang diinginkan. pre_get_posts 或 woocommerce_product_query Modifikasi dilakukan pada siklus utama dalam kode program, untuk menyaring produk yang memiliki metadata tertentu.

Apa perbedaan mendasar antara field yang ditambahkan melalui kode dan field yang ditambahkan menggunakan plugin ACF (Advanced Custom Fields)?

Perbedaan utamanya terletak pada cara pengelolaan dan penyimpanan data. Dengan menambahkan data secara manual melalui kode, Anda dapat mengontrol langsung tampilan HTML dari setiap field, proses validasi, serta logika penyimpanannya, sekaligus memanfaatkan fitur-fitur yang tersedia di WordPress. update_post_meta 和 get_post_meta Fungsi tersebut digunakan untuk melakukan akses dan penyimpanan data. Sedangkan plugin ACF (Active Campaign Filter) membangun lapisan manajemen yang lengkap di atasnya, menyediakan antarmuka yang user-friendly untuk mendefinisikan grup field dan aturan, serta menyimpan data dengan cara yang lebih terstruktur (mungkin dalam satu array saja). get_field() Fungsi-fungsi tersebut mengembalikan nilai yang telah diformat. ACF mempermudah prosesnya, namun pendekatannya terhadap penulisan kode lebih ringan dan lebih mudah dikendalikan.

Setelah menambahkan field tersebut, bagaimana cara menampilkannya di halaman arsip produk (halaman toko)?

Untuk menampilkan field kustom di halaman arsip produk (seperti halaman utama toko atau halaman kategori), biasanya diperlukan modifikasi pada template untuk setiap item produk yang ditampilkan. Cara yang paling aman adalah dengan menyalin file template dari WooCommerce. templates/content-product.php Pergilah ke path yang sesuai dengan sub-topik Anda untuk melakukan penggantian (overwriting), lalu panggil fungsi yang diperlukan di posisi yang tepat (misalnya, setelah informasi harga). get_post_meta() Gunakan untuk menghasilkan nilai dari field tersebut. Juga dapat digunakan. woocommerce_after_shop_loop_item_title Jenis kait ini digunakan untuk memasukkan konten, namun perlu diperhatikan bahwa tata letaknya dapat bervariasi tergantung pada tema yang digunakan.