Lewati ke konten
TokoPressID Documentation
Esc
↑↓navigate↵open⌘Jpreview
Di halaman ini

Cara Mengatur Sticky Mobile CTA di WooCommerce (LarisTurbo)

Panduan lengkap Sticky Mobile Call-To-Action Button For WooCommerce: bar tombol tetap di mobile, Add to Cart, WhatsApp, marketplace, breakpoint, dan popup variasi.

Sticky Mobile Call-To-Action Button For WooCommerce menampilkan tombol CTA yang selalu terlihat di halaman produk (mobile) untuk membantu konversi: bisa berfungsi sebagai Add to Cart, WhatsApp Contact, atau Shop Marketplace. Jadi pengunjung tidak perlu scroll balik ke tombol utama yang kadang tenggelam di layout tema.

Bar bisa berisi Add to Cart, tombol WhatsApp (kalau fitur WhatsApp Buy Button aktif), dan ikon Shop Marketplace (kalau fitur marketplace aktif dan produk punya URL). Untuk produk variabel atau kondisi tertentu, klik Add to Cart bisa membuka popup pemilihan variasi dulu, bukan langsung menambah ke Cart.

Tutorial ini membahas aktivasi, opsi per jenis tombol, breakpoint mobile, cara menghindari tombol ganda, dan cara verifikasi di layar kecil.

Yang akan tampil di toko

Di halaman produk tunggal pada lebar layar di bawah breakpoint mobile:

  • Bar sticky di footer berisi satu atau kombinasi: tombol Add to Cart, WhatsApp, ikon marketplace
  • Pada produk variable atau grouped (dan beberapa kondisi plugin ongkir), Add to Cart membuka popup dengan form variasi/kuantitas
  • Di layar lebar (desktop), bar disembunyikan otomatis kecuali tema Anda ditandai sebagai tema mobile penuh

Prasyarat

  • Plugin LarisTurbo For WooCommerce by TokoPressID terpasang dan lisensi aktif
  • WooCommerce aktif
  • Untuk tombol WhatsApp di sticky bar: fitur WhatsApp Buy Buttons (submenu For WhatsApp) aktif di halaman produk
  • Untuk ikon marketplace di sticky bar: fitur Shop Marketplace Buttons aktif dan produk punya URL marketplace

Cara membuka pengaturan

  1. Login ke WordPress Admin.
  2. Buka LarisTurbo → For WooCommerce.
  3. Di daftar fitur, cari Sticky Mobile Call-To-Action Button For WooCommerce, lalu klik Settings.

Opsi yang tersedia

Aktivasi dan breakpoint

Label di plugin Jenis Fungsi
Enable (MOBILE) Sticky Call To Action Button Checkbox Menyalakan bar sticky mobile
Responsive Mobile Breakpoint Angka (px) Lebar layar maksimum sticky tampil (default 767). Hanya muncul jika tema bukan tema mobile khusus LarisTurbo

Di bawah breakpoint, CSS menyembunyikan .lt-wc-button-sticky pada layar lebih lebar.

Sticky Add-To-Cart Button

Label di plugin Jenis Fungsi
Add-To-Cart Button Radio Kapan tombol ATC sticky ditampilkan (lihat tabel di bawah)
Custom Button Text Teks Label tombol kustom. Kosong = teks dari pengaturan tema produk, lalu fallback Add to cart
Hide Product Page Add-To-Cart Button When Sticky Button is Active Checkbox Menyembunyikan form Add to Cart di halaman produk saat sticky ATC aktif (hindari duplikat)

Add-To-Cart Button, pilihan (pada tema TokoPressID ada opsi Default):

Nilai Label Perilaku
default Default - Use Single Product Settings Mengikuti pengaturan tombol produk di tema (hanya tema TokoPressID)
yes Yes - Always Show Sticky Add-To-Cart Button Selalu tampilkan jika produk in stock dan bisa dibeli
no No - Never Show Sticky Add-To-Cart Button Sembunyikan tombol ATC di sticky bar

Tombol ATC sticky hanya aktif jika produk in stock dan purchasable (kecuali tipe grouped/external yang diperlakukan khusus).

WhatsApp Button

Muncul hanya jika WhatsApp Buy Buttons untuk halaman produk sudah diaktifkan. Jika belum, Anda melihat pesan Please enable the WhatsApp Buy Buttons feature on the Single Product Page first dengan tombol Setup Now.

Label di plugin Jenis Fungsi
Sticky WhatsApp Button Radio Default / Yes / No (sama pola dengan ATC pada tema TokoPressID)
Button Type Radio Icon Only (default) atau Icon + Text
Custom Button Text Teks Label kustom tombol WhatsApp
Hide Product Page WhatsApp Button When Sticky WhatsApp Button is Active Checkbox Sembunyikan tombol WhatsApp di halaman produk saat sticky aktif

Sticky Shop Marketplace Buttons

Muncul hanya jika Shop Marketplace Buttons sudah diaktifkan. Jika belum, pesan Please enable the Shop Marketplace Buttons feature first dengan Setup Now.

Label di plugin Jenis Fungsi
Show Sticky Shop Marketplace Buttons, if any Checkbox Menampilkan ikon marketplace di sticky bar jika produk punya URL valid
Hide Product Page Shop Marketplace Buttons When Sticky Shop Marketplace Buttons is Active Checkbox Sembunyikan tombol marketplace di halaman produk saat ikon sticky aktif

Ikon marketplace di sticky bar hanya menampilkan gambar ikon (tanpa label panjang), dengan link dan opsi tab baru mengikuti pengaturan marketplace global.

Perilaku popup variasi

Secara default, mode variabel adalah popup (laristurbo_wc_button_sticky_variable_mode filter default: popup):

  • Produk variable dan grouped: klik sticky Add to Cart membuka popup berisi judul produk, harga, dan form woocommerce_template_single_add_to_cart
  • Jika plugin Indo Ongkir multi-origin aktif, popup juga dipaksa aktif agar pembeli bisa memilih variasi/asal pengiriman

Popup tidak dipakai untuk produk simple biasa (langsung add to cart).

Langkah konfigurasi umum

1. Aktifkan sticky bar

  1. Centang Enable (MOBILE) Sticky Call To Action Button.
  2. (Opsional) Ubah Responsive Mobile Breakpoint dari default 767 px.
  3. Simpan.

2. Atur Add to Cart

  1. Set Add-To-Cart Button → Yes - Always Show Sticky Add-To-Cart Button (atau Default jika memakai tema TokoPressID).
  2. (Opsional) Isi Custom Button Text, misalnya Beli Sekarang.
  3. Centang Hide Product Page Add-To-Cart Button When Sticky Button is Active jika ingin menghindari dua tombol ATC.
  4. Simpan.

3. (Opsional) Tambah WhatsApp dan marketplace

  1. Aktifkan WhatsApp Buy Buttons di LarisTurbo → For WhatsApp jika perlu tombol chat.
  2. Kembali ke Settings sticky, atur Sticky WhatsApp Button dan Button Type.
  3. Aktifkan Shop Marketplace Buttons dan isi URL produk, lalu centang Show Sticky Shop Marketplace Buttons, if any di sini.
  4. Simpan.

4. Uji di mobile

  1. Buka halaman produk di browser, persempit jendela di bawah 767 px atau gunakan mode responsif devtools.
  2. Scroll ke bawah: bar sticky harus tetap di footer.
  3. Pada produk variabel, klik Add to Cart sticky dan pastikan popup variasi muncul.

Verifikasi

  • Bar hanya terlihat pada lebar layar ≤ breakpoint (default 767 px)
  • Produk in stock: tombol Add to Cart sticky muncul dengan teks yang Anda set
  • Produk variabel: popup berisi pilihan variasi dan bisa menambah ke keranjang
  • WhatsApp/marketplace hanya muncul jika fitur induk aktif dan produk memenuhi syarat
  • Centang opsi Hide Product Page … When Sticky … is Active: tombol duplikat di body produk hilang, tetapi form tetap ada di dalam popup sticky bila diperlukan

Troubleshooting

Gejala Kemungkinan penyebab Solusi
Sticky tidak muncul sama sekali Fitur belum aktif Centang Enable (MOBILE) Sticky Call To Action Button.
Sticky tidak muncul di desktop Perilaku normal Sticky hanya untuk mobile; persempit layar atau turunkan breakpoint
Tidak ada tombol ATC Produk out of stock Pastikan stok tersedia dan produk purchasable
Tidak ada tombol ATC Opsi No Ubah Add-To-Cart Button ke Yes atau Default
WhatsApp tidak ada di sticky Fitur WhatsApp belum aktif Aktifkan WhatsApp Buy Buttons lewat Setup Now
Marketplace tidak ada di sticky Fitur/marketplace URL kosong Aktifkan Shop Marketplace Buttons, isi URL produk, centang Show Sticky Shop Marketplace Buttons, if any.
Dua tombol ATC (sticky + halaman) Optimasi belum aktif Centang Hide Product Page Add-To-Cart Button When Sticky Button is Active
Klik ATC tidak langsung add (variabel) Mode popup Normal untuk variable/grouped; pilih variasi di popup
Form ATC hilang total di halaman Hide + sticky mati Pastikan sticky ATC aktif untuk produk tersebut, atau matikan opsi hide

Ringkasan

  • Sticky bar mobile muncul di bawah breakpoint (default 767 px) pada halaman produk
  • Kombinasi Add to Cart, WhatsApp, dan ikon marketplace, masing-masing bergantung fitur induk
  • Produk variabel memakai popup; opsi hide mencegah tombol ganda di halaman produk
  • Breakpoint dan teks tombol bisa disesuaikan di Settings fitur ini

Terakhir diperbarui 23 Juli 2026