Cara Mengatur WhatsApp Buy Button di WooCommerce (LarisTurbo)
Panduan lengkap WhatsApp Buy Button For WooCommerce: tombol chat di halaman produk dan shop, teks sapaan produk, posisi, gaya tombol, dan verifikasi di frontend.
WhatsApp Buy Button For WooCommerce menambahkan tombol chat WhatsApp di halaman single product dan/atau Shop (katalog produk), sehingga calon pembeli bisa langsung menghubungi CS untuk tanya stok, harga, atau detail produk—tanpa harus checkout dulu.
Tombol ini memakai nomor dan rotator dari WhatsApp Integration, tetapi pesan sapaannya bisa disesuaikan khusus per produk dengan placeholder seperti %product_title% dan %product_price%.
Tutorial ini menjelaskan cara mengaktifkan tombol di halaman produk dan shop, memahami setiap opsi di layar Settings, serta memverifikasi tombol muncul di toko. Nama field mengikuti teks asli di plugin.
Yang akan Anda lihat di toko
Setelah dikonfigurasi, pengunjung melihat tombol WhatsApp (ikon hijau + teks, atau ikon saja di shop) di posisi yang Anda pilih — biasanya di dekat tombol Add to Cart. Saat diklik:
- Tanpa rotator: langsung membuka WhatsApp dengan pesan sapaan produk.
- Dengan rotator aktif: melalui layar loading rotator, lalu membuka WhatsApp dengan pesan yang sudah terisi detail produk.
Prasyarat
- Plugin LarisTurbo For WooCommerce by TokoPressID terpasang dan lisensi aktif
- WooCommerce aktif
- WhatsApp Integration sudah dikonfigurasi (Main WhatsApp Number terisi). Lihat Panduan Dasar WhatsApp Integration
Cara membuka pengaturan
- Login ke WordPress Admin.
- Buka LarisTurbo → For WhatsApp.
- Buka WhatsApp Buy Button For WooCommerce, lalu klik Settings.
Di bagian atas halaman, field WhatsApp Number menampilkan daftar nomor yang terdaftar di WhatsApp Integration. Jika kosong, klik tombol Setup WhatsApp number untuk mengisi nomor terlebih dahulu.
Opsi yang tersedia
Fitur ini tidak punya satu checkbox Enable global. Anda mengaktifkan tombol secara terpisah untuk halaman produk dan halaman shop.
Pengaturan umum
| Label di plugin | Jenis | Fungsi |
|---|---|---|
| WhatsApp Number | Pesan info | Menampilkan nomor CS terdaftar + link Setup WhatsApp number |
| WhatsApp Message / Greeting Text | Textarea | Template pesan saat tombol diklik dari halaman produk |
Placeholder untuk WhatsApp Message / Greeting Text:
| Placeholder | Isi |
|---|---|
%site_name% |
Nama situs |
%site_url% |
URL beranda |
%current_url% |
URL halaman saat ini |
%product_title% |
Nama produk |
%product_price% |
Harga produk |
%product_id% |
ID produk |
%product_sku% |
SKU produk |
%product_url% |
URL halaman produk |
%product_categories% |
Kategori produk |
%product_tags% |
Tag produk |
Default untuk toko Indonesia (jika field dikosongkan):
Halo %site_name%, saya ingin bertanya mengenai produk %product_title%. Mohon informasi lebih lanjut. Terima kasih.
Halaman produk tunggal (Single Product Page)
| Label di plugin | Jenis | Fungsi |
|---|---|---|
| ENABLE WhatsApp Buy Button on the Single Product Page | Checkbox | Menyalakan tombol di halaman detail produk |
| Position | Radio | Posisi tombol di halaman produk |
| Button Text | Teks | Label tombol (default: Chat WhatsApp) |
| Button Style | Radio/Select | Gaya visual tombol |
| Custom Color | Color picker | Warna kustom (jika style mendukung) |
| Alignment | Ikon | Perataan tombol (kiri/tengah/kanan/justify) |
| Font Size (px) | Angka | Ukuran font tombol |
| Padding (px) | Padding | Jarak dalam tombol |
| Margin (px) | Margin | Jarak luar tombol |
Pilihan Position di halaman produk:
| Opsi | Kapan tampil |
|---|---|
| After Add to Cart Section | Setelah area Add to Cart (selalu tampil meski tombol ATC disembunyikan) |
| Before Add to Cart Section | Sebelum area Add to Cart |
| After Add to Cart Button | Tepat setelah tombol Add to Cart (tersembunyi jika ATC disembunyikan) |
| Before Add to Cart Button | Tepat sebelum tombol Add to Cart |
| Manual Placement | Hanya via shortcode [laristurbo_wc_whatsapp_button] atau block |
Shortcode manual:
[laristurbo_wc_whatsapp_button]— di dalam product loop[laristurbo_wc_whatsapp_button product_id="xx"]— di mana saja dengan ID produk tertentu
Halaman shop (Shop Page)
| Label di plugin | Jenis | Fungsi |
|---|---|---|
| ENABLE WhatsApp Buy Button on the Shop Page | Checkbox | Menyalakan tombol di grid/katalog produk |
| Position | Radio | Posisi tombol di kartu produk shop |
| Button Type | Radio | Icon + Text atau Icon Only |
| Button Text | Teks | Label tombol (default: Chat WhatsApp) |
| Button Style | Radio/Select | Gaya visual tombol |
| Custom Color | Color picker | Warna kustom |
| Alignment | Ikon | Perataan tombol |
| Font Size (px) | Angka | Ukuran font |
| Padding (px) | Padding | Jarak dalam |
| Margin (px) | Margin | Jarak luar |
Pilihan Position di halaman shop:
| Opsi | Kapan tampil |
|---|---|
| After Add to Cart Section | Setelah area Add to Cart di kartu produk |
| Before Add to Cart Section | Sebelum area Add to Cart |
| Manual Placement | Via shortcode [laristurbo_wc_whatsapp_button_shop] atau block |
Shortcode manual shop:
[laristurbo_wc_whatsapp_button_shop]— di dalam product loop[laristurbo_wc_whatsapp_button_shop product_id="xx"]— di mana saja
Integrasi (Integration)
| Label di plugin | Fungsi |
|---|---|
| Sticky WhatsApp Button | Menampilkan tombol WhatsApp di sticky CTA mobile. Klik Setup Now ke pengaturan Sticky Mobile CTA |
Pilihan Button Style umum:
- Green WhatsApp Button (Outline) / (Filled) — gaya hijau khas WhatsApp
- Di tema TokoPressID: opsi tambahan Primary, Secondary, Accent, Subtle (outline dan filled)
Langkah-langkah setup
1. Pastikan nomor WhatsApp sudah ada
- Buka Settings WhatsApp Buy Button For WooCommerce.
- Di bagian WhatsApp Number, pastikan nomor CS sudah terdaftar.
- Jika belum, klik Setup WhatsApp number dan isi Main WhatsApp Number.
2. Aktifkan di halaman produk
- Scroll ke bagian Single Product Page.
- Centang ENABLE WhatsApp Buy Button on the Single Product Page.
- Pilih Position (disarankan: After Add to Cart Section untuk visibilitas maksimal).
- Sesuaikan Button Text jika perlu (misalnya
Tanya via WhatsApp). - Pilih Button Style yang cocok dengan tema toko.
- Simpan.
3. Aktifkan di halaman shop (opsional)
- Scroll ke bagian Shop Page.
- Centang ENABLE WhatsApp Buy Button on the Shop Page.
- Pilih Position dan Button Type (Icon Only cocok untuk grid yang sempit).
- Simpan.
4. Sesuaikan pesan sapaan (opsional)
- Di bagian atas, edit WhatsApp Message / Greeting Text.
- Gunakan placeholder produk agar CS langsung tahu produk mana yang ditanyakan.
- Simpan.
Detail placeholder dan contoh template dibahas di tutorial lanjutan: Mengatur Pesan Template Tombol Beli WhatsApp.
5. Cek di frontend
- Buka halaman produk dalam tab incognito.
- Pastikan tombol WhatsApp muncul di posisi yang dipilih.
- Klik tombol — WhatsApp harus terbuka dengan pesan berisi nama produk.
- Ulangi di halaman shop jika tombol shop diaktifkan.
Troubleshooting
Tombol tidak muncul di halaman produk
- Pastikan ENABLE WhatsApp Buy Button on the Single Product Page dicentang.
- Jika Position = Manual Placement, tombol hanya muncul jika Anda menempatkan shortcode/block secara manual.
- Posisi After/Before Add to Cart Button tidak tampil jika tema menyembunyikan tombol Add to Cart.
Tombol tidak muncul di shop
- Pastikan ENABLE WhatsApp Buy Button on the Shop Page dicentang.
- Beberapa tema kustom mungkin tidak mendukung hook WooCommerce standar — coba Manual Placement dengan shortcode.
Pesan WhatsApp tidak menyertakan nama produk
- Periksa WhatsApp Message / Greeting Text: pastikan placeholder
%product_title%tidak salah ketik. - Field kosong memakai template default yang sudah menyertakan
%product_title%.
Warna tombol tidak berubah
- Custom Color hanya tersedia untuk style tertentu (bukan semua pilihan Button Style).
Ringkasan
Alur minimum: pastikan nomor WhatsApp terisi → centang enable di Single Product Page (dan/atau Shop Page) → atur Position dan Button Text → simpan → uji klik di frontend. Tombol memakai nomor dari WhatsApp Integration dan pesan bisa disesuaikan per produk.