Contoh warna untuk produk WooCommerce dengan plugin gratis

Diterbitkan: 2021-05-28

Mengaktifkan carikan warna dan lebih banyak opsi produk untuk produk WooCommerce dapat meningkatkan penjualan Anda. Solusi paling populer adalah produk WooCommerce dengan variasi. Hari ini, saya akan menunjukkan kepada Anda cara mengubah warna produk dengan carikan untuk produk sederhana dan variabel dan menambahkan bidang khusus menggunakan plugin WooCommerce gratis!

Tidak memberikan opsi produk dapat membuat pelanggan Anda enggan membeli. Di sisi lain, seperti yang Anda ketahui, produk variabel tidak selalu merupakan pilihan terbaik .

Izinkan saya menunjukkan kepada Anda cara memperkaya produk WooCommerce dengan carikan warna , lebih banyak opsi produk, dan bidang khusus. Yang penting, saya akan menggunakan plugin pembangun produk gratis untuk WooCommerce. Mari kita mulai!

Daftar isi

  • Produk Variabel di WooCommerce
  • Swatch warna WooCommerce dengan plugin gratis!
  • Swatch warna WooCommerce - panduan langkah demi langkah
  • Ringkasan dan lainnya tentang bidang khusus

Produk Variabel di WooCommerce

Secara default, Anda dapat menggunakan beberapa jenis produk WooCommerce , termasuk produk sederhana dan variabel.

Produk sederhana WooCommerce mudah diatur, tetapi jika Anda ingin menambahkan opsi warna, itu mungkin tidak cukup. Saat Anda perlu menambahkan carikan warna, produk variabel WooCommerce mungkin merupakan pilihan yang lebih baik.

Produk variabel: variasi

Pelanggan Anda akan melihat produk WooCommerce dengan 3 opsi.

Varian di halaman produk

Baca lebih lanjut tentang cara menambahkan produk WooCommerce dengan variasi .

Saya pikir Anda mungkin ingin menambahkan contoh warna lebih menarik!

Swatch warna WooCommerce dengan plugin gratis!

Anda dapat dengan mudah menambahkan contoh warna sebanyak yang Anda suka.

Bidang Produk Fleksibel - bidang setelah perubahan CSS
Swatch variasi produk WooCommerce ditambahkan dengan Flexible Product Fields

Memvisualisasikan opsi yang dipilih klien akan memberikan efek yang lebih baik daripada teks itu sendiri. Aturan ini bahkan lebih penting jika menyangkut warna produk. Memasukkan carikan warna untuk produk WooCommerce akan meminimalkan ketidakpuasan dengan pemilihan warna yang salah dan membuat situs web terlihat lebih bagus.

Radio dengan bidang warna memungkinkan Anda menambahkan carikan warna ke produk WooCommerce Anda.

Unduh versi GRATIS Bidang Produk Fleksibel dan tambahkan Radio baru dengan bidang warna.

Bidang Produk Fleksibel untuk WooCommerce

Ubah warna WooCommerce menambahkan bidang Radio dengan warna. Swatch WooCommerce dibuat sederhana dengan Bidang Produk Fleksibel.

Unduh atau Kunjungi WordPress.org
10.000+ Instalasi Aktif
Terakhir Diperbarui: 13-03-2023
Bekerja dengan WooCommerce 7.1 - 7.5.x

Lihat juga videonya, yang akan menunjukkan kepada Anda apa yang dapat dilakukan plugin ini dalam versi gratis:

Swatch warna WooCommerce - panduan langkah demi langkah

Menambahkan bidang seperti itu cukup sederhana dan berkat CSS dimungkinkan untuk menyesuaikannya, misalnya mengubah bentuk atau ukurannya. Ikuti langkah-langkah di bawah ini:

Pertama, buka dasbor WordPress → Produk → Bidang Produk .

Tambahkan contoh warna
Bidang Produk Fleksibel di Menu WordPress

Kemudian, tambahkan Grup baru atau pilih Grup yang sudah ada. Jika Grup adalah yang baru - beri nama (mis. "Pilihan warna") dan tambahkan ke produk/kategori atau tag.

Radio dengan warna
Buat grup bidang baru

Selanjutnya, tambahkan bidang baru. Buka kategori Bidang Opsi dan pilih Radio dengan warna dari daftar opsi.

Menambahkan carikan warna ke halaman produk WooCommerce
Pilih Radio dengan gambar

Terakhir, masukkan label bidang, yang juga akan menjadi nama bidang Anda. Katakanlah, "Warna produk".

Label untuk bidang carikan warna
Beri label pada bidang baru Anda

Kustomisasi bidang produk

Sekarang mari kita lihat opsi plugin tambahan:

    1. Baca juga Dokumentasi kami jika Anda memerlukan informasi lebih lanjut tentang setiap bidang yang akan Anda lihat saat ini:

      Swatch variasi produk WooCommerce
      Swatch Warna: jenis bidang yang berbeda
    2. Isi kolom dengan informasi yang ingin Anda tampilkan di halaman produk WooCommerce Anda.

      Ubah warna WooCommerce menambahkan Radio dengan jenis bidang warna
      Konfigurasi Swatch Warna
    3. Buka tab Tingkat Lanjut . Di sini Anda dapat mengubah Lebar item tunggal dalam px:

      Swatch variasi produk WooCommerce - tab Lanjutan
      Radio dengan jenis bidang warna halaman produk WooCommerce
    4. Anda juga dapat menetapkan harga (tetap atau persentase) atau menggunakan opsi lain (misalnya logika bersyarat ) jika diperlukan. Sebagai contoh, mari tambahkan kelas CSS misalnya "custom-color-swatches" untuk menyesuaikan gaya bidang.

      Harga untuk swatch warna
      Menetapkan harga untuk Swatch Warna. Anda dapat memilih dari jenis harga tetap atau persen untuk setiap opsi.

Menyesuaikan swatch warna WooCommerce dengan CSS

Itu tidak wajib tetapi dimungkinkan untuk menempelkan kode CSS pada halaman untuk menyesuaikan bidang warna. Namun, tentu saja, Anda dapat menggunakan kelas CSS yang ditetapkan pada langkah ke-4 misalnya custom-color-swatches .

Menyembunyikan keterangan di bawah gambar

/* Contoh warna untuk produk WooCommerce - tidak ada keterangan di bawah gambar */
div.fpf-gambar-radio hal. input swatch warna-kustom + rentang label {
tampilan: tidak ada;
}

Mengubah ukuran gambar menjadi 50 px dan ukuran bingkai menjadi 10 px

/* Contoh warna untuk produk WooCommerce - gambar 50 px dan batas 10 px */
div.fpf-gambar-radio hal. input -swatch warna-kustom + label {
lebar: kalk( 50px + 2* 10px );
}
div.fpf-gambar-radio hal. input -swatch warna-kustom + label img {
lebar: kalk( 50px + 2* 10px );
tinggi: kalk( 50px + 2* 10px );
batas: 10px padat transparan;
}

Ubah warna batas (saat dipilih) ke #d3d3d3

/* Swatch warna untuk produk WooCommerce - warna border (dipilih) #d3d3d3 */
div.fpf-gambar-radio hal. input swatch warna-kustom : diperiksa + label img {
warna batas: #d3d3d3 ;
}

Ubah bentuk gambar menjadi lingkaran

/* Contoh warna untuk produk WooCommerce - gambar berbentuk lingkaran */
div.fpf-gambar-radio hal. input -swatch warna-kustom + label img {
radius batas: 50%;
}
Apakah Anda memerlukan panduan lebih lanjut tentang kelas CSS? Anda mungkin menemukan artikel kami tentang Penyesuaian Bidang Kustom dengan CSS berguna.

Contoh WooCommerce di halaman produk

Mari kita lihat sekarang efek akhir dan opsi carikan warna di halaman produk WooCommerce!

Bidang Produk Fleksibel - bidang setelah perubahan CSS
Swatch variasi produk WooCommerce ditambahkan dengan Flexible Product Fields

Ringkasan dan lainnya tentang bidang khusus

Swatch warna untuk produk WooCommerce adalah elemen penting yang menarik perhatian pelanggan.

Tentu saja, solusi ini akan berfungsi untuk berbagai toko karena cukup mudah untuk beradaptasi dengan situs web tertentu. Selain itu, dimungkinkan untuk menyisipkan pola atau gambar (menunjukkan misalnya tekstur produk) sebagai pengganti warna.

Anda dapat mencapai efek yang Anda cari berkat Radio dengan jenis bidang warna , yang dapat Anda tambahkan dan sesuaikan dengan mudah saat menggunakan plugin Bidang Produk Fleksibel.

Selain itu, Anda dapat menemukan lebih banyak jenis kolom di plugin versi gratis, misalnya:

      • bidang teks - Email dan URL
      • bidang opsi - Multi-kotak centang dan Radio dengan warna
      • bidang pemilih - Waktu dan Warna
      • dan bidang lain untuk memformat halaman produk - Paragraf atau HTML untuk menyisipkan teks dan Gambar