fbpx

Cara Mengganti Dropdown Variasi Produk di WooCommerce Menjadi Warna dan Label

Updated on 27 Januari 2023

|

55 Dilihat
 Variation Swatches WooCommerce

Apakah Anda ingin opsi variasi produk di WooCommerce menjadi pilihan visual warna atau label seperti yang ada di marketplace?

Secara default, WooCommerce akan menampilkan pilihan dropdown pada jenis variasi produk di halaman produk. Pilihan variasi dropdown ini digunakan pelanggan untuk memilih jenis produk yang akan dibeli.

Dengan menggunakan plugin Swatches, Anda bisa mengganti kolom dropdown dengan menggunakan pilihan visual yang lebih menarik seperti warna atau gambar. Pilihan variasi yang ditampilkan secara visual akan mempermudah pelanggan mendapatkan gambaran semua variasi yang dimiliki produk.

Selain warna, Anda juga dapat merubah opsi dropdown menjadi tampilan label. Pilihan label bisa digunakan untuk merepresentasikan produk yang memiliki variasi ukuran seperti Small, Medium, atau Large.

Pada tutorial kali ini, kita akan mempraktikkan cara mengkonversi pilihan dropdown menjadi tampilan visual dengan menggunaan plugin Variation Swatches. Yuk simak tutorial lengkapnya!

Mengganti Dropdown Variasi Produk

Install Plugin Variation Swatches

Install plugin Variation Swatches
Install plugin Variation Swatches

Untuk menginstall plugin Variation Swatches di WooCommerce, ikuti langkah-langkah berikut:

  1. Dari halaman admin, navigasi ke menu Plugins > Add New.
  2. Pada kolom pencarian ketikan “swatches”.
  3. Klik Install Now kemudian aktifkan plugin Variation Swatches for WooCommerce by CartFlows.

Menentukan Type Attribute

Langkah pertama adalah menentukan jenis tampilan yang akan diterapakan pada masing-masing attribute. Anda bisa membuat attribute memiliki tampilan pilihan bedasarkan warna, label, atau gambar.

Untuk mengedit attribute di WooCommerce, ikuti langkah-langkah berikut:

  1. Dari halaman admin, navigasi ke menu Products > Attributes.
  2. Pilih Attribute yang ingin diganti, kemudian klik Edit.
Edit attribute Warna di woocommerce
Edit attribute Warna
  1. Pilih Color pada opsi Type.
  2. Klik Update untuk menyimpan perubahan.
Pilih jenis tampilan attribute di woocommerce
Pilih jenis tampilan attribute

Mengatur Warna Pada Setiap Variasi

Pada bagian ini, kita akan menentukan nilai dari setiap variasi pada attribute warna yang nantinya akan ditampilkan sebagai pilihan.

Untuk mengatur nilai warna pada variasi produk, ikuti langkah-langkah berikut:

  1. Dari halaman admin, navigasi ke menu Products > Attributes
  2. Klik Configure terms pada pilihan attribute yang diinginkan.
  1. Pilih variasi, kemudian klik Edit untuk menambahkan opsi warna.
Edit nilai variasi warna di woocommerce
Edit nilai variasi warna
  1. Pada opsi Color pilih warna yang sesuai dengan variasi.
  2. Klik Update untuk menyimpan perubahan.
Pilih nilai warna di woocommerce
Pilih nilai warna yang digunakan

Tampilan Halaman Variasi Produk

Setelah mengikuti langkah-langkah sebelumnya, maka tampilan halaman produk Anda akan menjadi seperti di bawah ini. Opsi Pilihan variasi produk di WooCommerce akan berubah dari dropdown menjadi label dan Warna.

Tampilan halaman variasi produk di woocommerce
Tampilan halaman variasi produk di WooCommerce

Setting Plugin Variation Swatches WooCommerce

Pengaturan General

Untuk pengaturan umum plugin Variation Swatches, ikuti langkah-langkah berikut:

  1. Dari halaman admin, navigasi ke menu WooCommerce > Variation Swaches.
  2. Klik tab Settings, kemudian klik General Settings.
  3. Saat mengganti nilai, pengaturan otomatis akan tersimpan.

Opsi pengaturan dapat dilihat sebagai berikut:

  • Enable for Product page: Aktifkan pilihan variasi swatches di halaman produk.
  • Enable for Shop page: Aktifkan pilihan variasi di halaman produk archive atau daftar produk.
  • Auto convert dropdown to label: Konversi otomatis semua pilihan variasi produk ke type label.

Pengaturan Desain Variasi

Pada bagian ini, Anda dapat mengatur desain pilihan variasi yang ditampilkan seperti lebar dan tinggi label, ukuran font dll.

Untuk pengaturan desain pilihan variasi di plugin Variation Swatches, ikuti langkah-langkah berikut:

  1. Dari halaman admin, navigasi ke menu WooCommerce > Variation Swaches.
  2. Klik tab Settings, kemudian klik Global Styling untuk pengaturan desain umum atau klik Shop Page Styling untuk pengaturan khusus di halaman archive.
  3. Saat mengganti nilai, pengaturan otomatis akan tersimpan.

Menampilkan Judul Pada Pilihan Variasi Produk

Secara default plugin Variation Swaches WooCommerce tidak menampilkan label keterangan variasi, untuk menampilkan opsi label, ikuti langkah-langkah berikut:

  1. Dari halaman admin, navigasi ke menu WooCommerce > Variation Swaches.
  2. Klik tab Settings, kemudian klik General Settings.
  3. Scrool pada bagian Label.
  4. Pilih Stacked atau Inline pada opsi Label position.
  5. Saat mengganti nilai, pengaturan otomatis akan tersimpan.
Menampilkan opsi label di Variation Swaches WooCommerce
Menampilkan opsi label di Variation Swaches WooCommerce
Tampilan label di halaman produk WooCommerce
Tampilan label di halaman produk WooCommerce

Alternative Plugin Variation Swatches for WooCommerce

Beberapa alternative plugin Variation Swatches for WooCommerce sebagai berikut:

Penutup

Dengan menggunakan plugin Variation Swaches WooCommerce, Anda dapat mengganti pilihan variasi produk di WooCommerce menjadi lebih menarik dan digunakan oleh pelanggan. Selain di halaman produk, Anda juga dapat menampilkan pilihan variasi langsung di halaman archive atau halaman shop.

Demikian tutorial Mengganti dropdown variasi produk di WooCommerce menjadi pilihan warna dan label. Jika Anda memiliki pertanyaan yang terkait tentang tutorial ini, silakan tuliskan pesan di kolom komentar.

Rekomendasi Tema Toko Online Premium WordPress

Buat toko online WordPress menjadi lebih mudah dan cepat dengan menggunakan Tema toko online premium Indonesia. Tema-tema ini menyediakan fasilitas import demo yang memudahkan Anda mendapatkan website yang siap pakai.

Tampilan website cepatlakoo

CepatLakoo

Rp. 399.000

Tampilan website larismanis

LarisManis

Rp. 399.000

Template toko online saudagarwp

Saudagar WP

Rp. 340.000


Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *