Built Web

Web Development

Customize Button Add to Cart

Pengaturan Tombol Produk & Add to Cart (Tokoo Product Button)

Tema ToKoo memberikan kontrol penuh atas tampilan tombol pembelian produk pada kartu produk (product card) di halaman katalog (Shop, Kategori, atau Beranda). Anda dapat mengubah tombol belanja standar menjadi ikon minimalis, bulat, atau tombol dengan teks lengkap sesuai dengan gaya estetika toko online Anda.

Cara Mengakses Pengaturan Tombol Produk

Pengaturan ini dikelola secara visual melalui Block Editor pada template kartu produk Anda:

  1. Buka menu Appearance > Editor (Tampilan > Editor).
  2. Pilih bagian template kartu produk Anda (biasanya berada di dalam Template Parts > Product Card atau langsung pada blok Query Loop halaman Toko).
  3. Klik tombol keranjang belanja pada salah satu kartu produk.
  4. Pastikan Sidebar Kanan aktif pada tab Block untuk melihat panel pengaturan Tokoo Product Button.

Panduan Detail Panel Pengaturan (Berdasarkan Tampilan Editor)

Berikut adalah fungsi dari masing-masing opsi pengaturan tombol produk yang dapat Anda sesuaikan di sidebar kanan:

customize-button-add-to-cart

1. Width Settings (Pengaturan Lebar)

Mengatur lebar tombol secara relatif terhadap ruang kartu produk.

  • Pilihan: 25%, 50%, 75%, atau 100%.
  • Rekomendasi: Gunakan 100% jika Anda ingin tombol lebar penuh yang memenuhi bagian bawah kartu produk, atau gunakan persentase lebih kecil jika ingin meletakkannya di sudut secara minimalis.

2. Show Cart Icon (Tampilkan Ikon Keranjang)

  • Fungsi: Mengaktifkan atau menonaktifkan ikon keranjang belanja (🛒) di dalam tombol.
  • Tips: Matikan opsi ini jika Anda hanya ingin menampilkan teks seperti “Beli” atau “Add to Cart” tanpa ikon.

3. Icon Only (Hanya Ikon)

  • Fungsi: Menyembunyikan teks tombol dan hanya menampilkan ikon saja (seperti ikon lingkaran hitam bulat pada contoh gambar).
  • Catatan Aksesibilitas: Sistem ToKoo secara cerdas tetap mempertahankan aria-label (teks alternatif di latar belakang kode) agar website Anda tetap ramah bagi pengguna tunanetra yang menggunakan alat pembaca layar (screen reader).

4. Custom Button Size (Ukuran Tombol Kustom)

  • Fungsi: Mengaktifkan pengaturan ukuran tombol secara manual dalam satuan piksel (px).
  • Button Size (PX): Geser slider atau masukkan angka secara langsung (misalnya 36 px) untuk menentukan tinggi dan lebar tombol ikon Anda agar presisi.

5. Show Quick View (Tampilkan Quick View)

  • Fungsi: Menampilkan tombol pintas Quick View (ikon mata merah pada contoh gambar) tepat di bawah atau di dekat tombol Add to Cart.
  • Tips: Aktifkan fitur ini untuk memberikan opsi kepada pelanggan agar bisa melihat detail singkat produk secara cepat tanpa perlu berpindah halaman.

Catatan: Pada tema terbaru tokoo sudah ditambahkan block khusus quick view yang bisa diedit secara terpisah dan dapat ditempatkan sesuai selera/style desain anda.

6. Round Button (Tombol Bulat)

  • Fungsi: Mengubah bentuk sudut tombol menjadi bulat sempurna (border-radius penuh).
  • Rekomendasi: Sangat cocok dikombinasikan dengan opsi Icon Only dan ukuran kustom 36px – 40px untuk memberikan kesan toko online modern, minimalis, dan kekinian (seperti gaya tata letak aplikasi seluler).

Tips Desain Tombol untuk Konversi Tinggi

  • Gunakan Warna Kontras: Pastikan warna latar belakang tombol belanja Anda (misalnya hitam atau warna aksen brand Anda) kontras dengan warna latar belakang kartu produk (putih/abu-abu terang) agar mata pengunjung langsung tertuju pada tombol aksi beli tersebut.
  • Ramah Seluler (Mobile-Friendly): Jika menggunakan gaya tombol bulat (Round Button), pastikan ukurannya tidak kurang dari 36px agar pengunjung yang menggunakan smartphone dapat mengetuk tombol tersebut dengan mudah tanpa salah klik.