Cara menambahkan bidang khusus ke produk di WooCommerce

Programming

Oleh Vinci terakhir diubah pada 11 Juli 2022.

WooCommerce adalah yang terbaik di antara perangkat lunak e-commerce teratas yang gratis. Ini didasarkan pada platform WordPress. Sangat mudah untuk menyiapkan keranjang belanja dengan platform WooCommerce.

Di artikel sebelumnya, kami melihat beberapa kode berbasis WooCommerce untuk alat berikut.

Pameran produk WooCommerce menampilkan informasi yang memenuhi kebutuhan pelanggan. Terkadang detail awal tidak dapat menyampaikan semuanya dan memungkinkan klien untuk mengidentifikasi takdirnya.

Ini adalah sesuatu yang memerlukan penambahan informasi tambahan menggunakan integrasi konteks kustom. Plugin WooCommerce mendukung penambahan bidang khusus ke produk melalui antarmuka admin.

Kami akan melihat opsi tersebut dan cara menggunakannya di bawah ini.

Mengapa admin toko WooCommerce membutuhkan bidang khusus

Sebelum menambahkan bidang khusus ke suatu produk, pelajari mengapa toko WooCommerce Anda membutuhkannya.

Karena beberapa toko memiliki galeri produk normal dengan data normal seperti judul, gambar dan harga. Dalam hal ini, bidang khusus tidak diperlukan.

Daftar berikut menunjukkan manfaat dari fitur bidang khusus ini di toko WooCommerce.

  • Untuk menambahkan metadata produk untuk menampilkan informasi tambahan tentang produk.
  • Sehingga pelanggan dapat memberikan rincian lebih lanjut tentang produk yang akan dibeli.
  • Untuk menambahkan bidang interaktif yang mudah digunakan untuk menghemat upaya penyesuaian.
  • Untuk menambahkan promosi, penawaran, diskon, dan semuanya.
  • Untuk mendukung pengguna akhir untuk menentukan tanggal, waktu dan tempat pengiriman.
  • Untuk menerapkan pajak dan pengiriman dengan mengaktifkan sakelar khusus.

Jenis pembuatan bidang khusus yang didukung oleh plugin WooCommerce

Plugin WooCommerce yang ada dapat menambahkan dua jenis bidang khusus untuk produk.

  1. Bidang Data – Bidang menerima informasi untuk ditampilkan di antarmuka pengguna.
  2. Bidang tambahan – bidang yang mengumpulkan data dari pengguna di etalase.

1. Bidang data – bidang menerima informasi untuk ditampilkan di antarmuka pengguna

Ini adalah bidang khusus untuk menampilkan lebih banyak informasi selain dari judul biasa, harga, dan semuanya. Ini membantu untuk menampilkan metadata produk tentang fitur, versi, peringkat, dan semuanya.

Misalnya monitor, untuk menampilkan informasi tambahan seperti:

Merek jantung
Model Dell 20H
Ukuran layar 23
Kemungkinan HDMI, anti-silau

2. Bidang tambahan – bidang yang mengumpulkan data dari pengguna di etalase

Jenis bidang khusus ini adalah tentang membuat opsi untuk interaksi pelanggan. Ini memungkinkan lebih banyak spesifikasi atau penyesuaian ditambahkan ke produk yang diinginkan.

Untuk menambahkan informasi yang dipersonalisasi oleh pelanggan saat membeli produk. Contoh,

  • Bidang pilihan ganda untuk memilih ukuran atau warna kaos.
  • Bidang teks untuk mengumpulkan nama merek yang akan diukir pada pena yang dibeli.

Metode menambahkan bidang tampilan khusus di WooCommerce

  1. Menggunakan plugin WooCommerce
  2. Tambahkan kode untuk menampilkan bidang khusus untuk produk.

Metode 1: Menggunakan plugin

Kami telah menggunakan tiga plugin untuk mendukung penambahan bidang khusus ke produk di toko WooCommerce. Mereka memiliki fitur-fitur canggih dan juga mudah diatur.

  1. Bidang produk lanjutan untuk WooCommerce
  2. Plugin produk untuk WooCommerce
  3. Bidang khusus lanjutan

1. Bidang produk lanjutan untuk WooCommerce

Plugin ini digunakan untuk menambahkan bidang tambahan ke halaman produk WooCommerce. Ini membantu untuk menyematkan bidang produk tambahan sehingga pelanggan dapat mempersonalisasi pesanan.

Lihat detail dan prasyarat plugin di bawah.

resep 4,5 atau lebih tinggi
Fasilitas aktif 20000+
versi PHP 5.6 atau lebih tinggi
pembaruan terbaru 2 minggu yang lalu

Kemungkinan

  • Bidang produk khusus yang dipilih pada halaman produk dapat dipindahkan ke halaman keranjang dan checkout. Secara umum, aliran stabil sampai pesanan diterima.
  • Pembuat konteks produk yang lancar di bagian belakang dengan pengalaman yang mulus.
  • Ini memiliki opsi untuk menambahkan beberapa harga untuk memanipulasi harga dasar produk selama pemilihan.
  • Ini mendukung semua bidang interaktif yang mungkin dengan opsi sembunyikan.
  • Ini memungkinkan produk dan antarmuka pemetaan bidang khusus untuk kontrol visibilitas.
  • Kustomisasi angka pajak WooCommerce dimungkinkan.
  • Multibahasa dalam tema siap terjemahan.

Langkah-langkah untuk menggunakan

Unduh plugin ini dari repositori resmi WordPress. Kemudian instal dan aktifkan untuk toko WooCommerce Anda. Jika Anda baru menggunakan WordPress, berikut cara menyiapkan plugin.

  1. Masuk ke Product -> Add New melalui menu admin WooCommerce.
  2. Klik pada Bidang Kustom di bawah panel Data Produk.
  3. Konfigurasikan pengaturan “Tata letak grup bidang”. Ini untuk memposisikan label atau catatan lapangan jika ada. Juga, ini membantu untuk menandai bidang sebagai wajib.
  4. Pilih “Tambahkan Bidang Pertama” atau “Tambah Bidang” dan tentukan jenis bidang, label, dan semuanya.
  5. Tambahkan aturan bersyarat untuk menambahkan dependensi antar bidang yang akan ditampilkan.

Ini adalah antarmuka admin WooCommerce untuk menambahkan bidang khusus untuk produk. saya tambahkan Ukuran Opsi untuk produk sebagai grup rasio.

Pengaturan konteks produk lanjutan

Bidang khusus yang ditambahkan ke frontend produk ini menunjukkannya sebagai opsi radio.

Output bidang produk tingkat lanjut

2. Plugin produk untuk WooCommerce

Plugin ini dengan jelas menyatakan tujuan dengan namanya. Ya, menambahkan bidang tambahan lebih bagi pelanggan untuk berinteraksi dengan toko untuk mempersonalisasi pembelian.

Pembuat formulir kustom yang mudah memungkinkan Anda membuat grup bidang untuk halaman toko WooCommerce. Lihatlah rilis dan detail lainnya di bawah ini.

versi WordPress 4.0 atau lebih tinggi
Fasilitas aktif 30000+
versi PHP 5.6 atau lebih tinggi
Pembaruan terbaru di 3 minggu yang lalu

Unduh plugin ini dari repositori WordPress yang ditautkan. Plugin ini menyediakan antarmuka seret dan lepas untuk membangun grup bidang khusus untuk produk.

Kemungkinan

  • Kemampuan untuk mempersonalisasi pesanan pembelian
  • Menyimpan data pelanggan pribadi melalui bidang khusus yang ditambahkan untuk produk di backend.
  • Ini membantu pembangun untuk merancang sekelompok bidang khusus.
  • Ini memungkinkan lebih banyak jenis bidang seperti bidang teks, nomor dan email, bidang kombo, dan semuanya.
  • Dalam versi dasar, dimungkinkan untuk menambahkan tag

    Dan menyediakan untuk menampilkan meta produk di ujung depan.

Langkah-langkah untuk menggunakan

Ada beberapa langkah untuk menambahkan dan menampilkan bidang khusus pada halaman produk tema WooCommerce.

  1. Terpercaya dan profesional Produk-> Plugin Produk Kustom Melalui menu admin WordPress.
  2. Tambahkan formulir baru dari grup Bidang Kustom Produk dan publikasikan.
  3. Terpercaya dan profesional Produk dan buat panel produk baru atau edit.
  4. Pilih “Opsi Produk Kustom” Dari Data produk kelompok
  5. Periksa formulir untuk menambahkan pemetaan antara bidang dan produk khusus.

Untuk menambahkan bidang khusus dan memetakannya ke produk, lihat dua gambar di bawah.

Pengaturan plugin produk

Memetakan plugin produk

Kemudian, toko WooCommerce akan menampilkan bidang khusus pada halaman produk tunggal.

Keluaran plugin produk

3. Bidang khusus lanjutan

Mendukung kontrol penuh halaman edit WordPress dan data formulir kustom.

versi WordPress 4.7 atau lebih tinggi
Fasilitas aktif 2+ juta
versi PHP 5.6 atau lebih tinggi
pembaruan terbaru 6 hari yang lalu

Plugin sederhana dan intuitif memiliki fungsi yang kuat dan lebih dari 30 jenis latar belakang

Kemungkinan

  • Ini menyediakan fungsi yang kuat untuk menyesuaikan dan menambahkan bidang khusus untuk produk
  • Antarmuka pengguna yang bagus dan sederhana untuk menambahkan grup bidang khusus sesuai kebutuhan.
  • Mendukung lebih dari 30 jenis bidang untuk memisahkan lebih banyak data dari bidang produk khusus standar.

Langkah-langkah penyesuaian

Sebelum membaca langkah-langkah di bawah ini, silahkan download atau install plugin ini untuk mengaktifkan plugin ini.

  1. Tambahkan dan sesuaikan grup bidang.
  2. Tambahkan bidang formulir ke grup.
  3. Tambahkan data untuk bidang khusus pada halaman produk.
  4. Tampilkan informasi produk di bagian depan

Langkah 1: Tambahkan dan sesuaikan grup bidang

Terpercaya dan profesional Bidang khusus Tambahkan grup bidang baru melalui menu admin dan tentukan lokasi antarmuka pengguna dan pengaturan lainnya.

Ini membantu untuk mengatur mode dan gaya untuk menambahkan dan menampilkan bidang khusus pada halaman produk. Mengelola posisi relatif dan penyelarasan bidang di antarmuka pengguna.

Bidang juga dapat digambar untuk posting, produk, halaman, dan lainnya.

Langkah 2: Tambahkan bidang formulir ke grup

Antarmuka Tambah Bidang memungkinkan Anda memasukkan data berikut. Untuk bidang kombo, itu akan meminta Anda untuk memasukkan beberapa opsi di bidang yang dimuat.

  • Label, nama, jenis
  • Catatan lapangan atau teks bantu.
  • Apakah bidang tersebut diperlukan atau tidak.
  • Tempat dan nilai default.
  • Konten yang akan ditambahkan atau ditambahkan.
  • Batasan karakter, aturan.
  • Kelas penutup bidang atau pengidentifikasi.

Langkah 3: Tambahkan data untuk bidang khusus berdasarkan produk

Jika grup bidang khusus dipetakan ke lokasi halaman produk, halaman Tambah/Edit akan menampilkannya.

Tambahkan data untuk bidang khusus yang akan ditampilkan pada produk WooCommerce di toko.

##Gambar

Langkah 4: Tampilkan informasi produk di frontend

Kemudian tampilkan data bidang khusus pada halaman produk tunggal di ujung depan.

Dalam plugin ini, kita perlu menambahkan kode pendek sederhana untuk menampilkan bidang khusus pada halaman produk.

partikel untuk objek langsung [acf field=”<field-id or slug>”] Kode pendek digunakan untuk menampilkan grup bidang khusus.

Ada beberapa fungsi di WordPress untuk menampilkan bidang produk WooCommerce.

<php
the_field("<field-id or slug>");
?>

Atau

<php
$customFieldGroup = get_field("<field-id or slug>");
echo $customFieldGroup;
?>

Metode 2: Tambahkan bidang khusus melalui aplikasi

Jadi, kami melihat cara menambahkan bidang produk khusus di platform WooCommerce menggunakan plugin. Jika Anda ingin menerapkan hal yang sama tanpa menggunakan plugin, ini sangat sederhana dengan beberapa langkah.

Langkah-langkah ini akan menampilkan bidang khusus pada halaman produk WooCommerce. Setelah mengumpulkan input pengguna di halaman produk, kode kustom menampilkannya di halaman keranjang.

Langkah-langkah untuk menerapkan metode ini dengan menambahkan kode kustom tercantum di bawah ini.

  1. Tambahkan bidang khusus di panel data produk di admin WooCommerce.
  2. Simpan data bidang khusus yang ditambahkan dalam metadata keranjang.
  3. Menampilkan kolom input pada halaman produk.
  4. Posting jumlah di halaman keranjang dan checkout.

Tambahkan kode khusus ini di file function.php dari tema WordPress yang aktif.

1. Tambahkan bidang khusus di panel informasi produk

Buat kode untuk menampilkan bidang khusus di panel data produk WooCommerce. Kait woocommerce_product_options_general_product_data digunakan untuk memanggil kode ini.

/* Add product meta field for the WooCommerce admin */
function woocommerce_custom_select_dropdown(){
    $select = woocommerce_wp_select(array(
        'id' => '_select_color',
        'label' =>__('Select color', 'woocommerce'),
        'options' => array(
            'Black' => __('Black','woocommerce'),
            'Blue' => __('Blue','wooocommerce'),
            'Pink'=> __('Pink','woocommerce')
        ),
        
    ));
}
add_action('woocommerce_product_options_general_product_data', 'woocommerce_custom_select_dropdown');

Contoh ini menambahkan dropdown sebagai bidang khusus untuk produk. Oleh karena itu, ia menggunakan fungsi woocommerce_wp_select untuk mengatur parameter berikut.

  • PENGENAL
  • Label
  • Keterangan
  • desc_tip
  • Pilihan

Ada fungsi serupa untuk menambahkan jenis bidang formulir lainnya. Sebagai contoh,

  • woocommerce_wp_textarea_input
  • kotak centang woocommerce_wp_
  • woocommerce_wp_hidden_input

2. Simpan input pengguna di bidang khusus di metadata keranjang.

Kemudian, kait tindakan lain ditambahkan untuk menyimpan nilai bidang khusus di meta produk. Ini disebut di toko detail produk. Tindakan ini memanggil woocommerce_process_product_meta dan mengaitkan pengontrol.

/* Save custom field data for the product */
function woocommerce_product_custom_fields_save($post_id)
{
    $woocommerce_select_color_field = $_POST['_select_color'];
    if (!empty($woocommerce_select_color_field)) {
        update_post_meta($post_id, '_select_color', esc_attr($woocommerce_select_color_field));
    }
}
add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');

3. Menampilkan kolom input pada halaman produk

Di bagian ini, jika meta produk tidak kosong, ia menyiapkan bidang HTML tambahan.

Pertama, admin memilih dan menyimpan opsi warna produk. Kode ini kemudian menambahkan bidang tarik-turun pada halaman produk tunggal.

Meta membaca produk saat ini dengan mengacu pada objek pos global. Kemudian, meta mengambil produk dengan id bidang khusus.

Pada halaman produk WooCommerce, bidang khusus ini ditambahkan sebelum tombol keranjang. Itu karena mengaitkan tindakan woocommerce_before_add_to_cart_button untuk memanggil pengontrol ini.

/* Show add-on field based on the saved custom field */
function woocommerce_display_select_option_value()
{
    global $post;
    $product = wc_get_product($post->ID);
    $select_option_title_field = $product->get_meta('_select_color');
    
    if ($select_option_title_field) {
        printf('
<div><select name="color_option" class="input-text text">
<option value="Default Color">Default Color</option>
<option value="' . $select_option_title_field . '">' . $select_option_title_field . '</option> </select></div>', esc_html($select_option_title_field));
    }
}
add_action('woocommerce_before_add_to_cart_button', 'woocommerce_display_select_option_value');

4. Tampilkan opsi yang dipilih pada keranjang belanja dan halaman checkout

Kait filter di bawah mengontrol fungsi untuk menampilkan opsi kustom yang dipilih. Halaman ini memiliki keranjang belanja dan checkout sebagai target untuk merender komponen UI.

Kode ini diaktifkan ketika informasi item keranjang belanja dimuat. Kait filter memanggil woocommerce_add_cart_item_data dan menampilkan nilai bidang khusus yang dipilih.

Menambahkan data ke larik item keranjang yang akan digunakan nanti di UI halaman checkout.

/*  Display selected option in the cart */
function woocommerce_add_custom_field_item_data($cart_item_data, $product_id)
{
    if (! empty($_POST['color_option'])) {
        $cart_item_data['select_field'] = $_POST['color_option'];
    }
    return $cart_item_data;
}
add_filter('woocommerce_add_cart_item_data', 'woocommerce_add_custom_field_item_data', 10, 2);

Ini untuk mem-parsing array item keranjang dan menampilkan nilai bidang khusus pada halaman checkout.

Ini menggunakan kait woocommerce_cart_item_name untuk membuat perubahan ini di antarmuka checkout.

/*  Display selected option in the checkout */
function woocommerce_cart_display($name, $cart_item, $cart_item_key)
{
    if (isset($cart_item['select_field'])) {
        $name .= sprintf('<p>%s</p>', esc_html($cart_item['select_field']));
    }
    return $name;
}
add_filter('woocommerce_cart_item_name', 'woocommerce_cart_display', 10, 3);

Hasil

Jadi, kami telah melihat kedua cara untuk menambahkan bidang khusus ke produk. Untuk mengaktifkan bidang khusus produk WooCommerce dengan atau tanpa plugin.

Saya harap artikel ini memberikan beberapa pengetahuan dasar di bidang ini. Juga, ini dapat membantu Anda memahami dan mengulangi proses menyesuaikan toko Anda.

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.