Mengatur Posisi Preview di Halaman Produk WooCommerce (LarisFont)
Cara memilih Font Preview Position di WooCommerce: sebelum/sesudah tab, setelah gambar produk, Custom Hooks Position, dan shortcode.
Opsi Font Preview Position menentukan di bagian mana widget preview muncul di halaman produk. Pilihan yang paling pas biasanya tergantung layout tema, terutama apakah detail produk berada di samping gambar atau di bawah gambar.
Daftar opsi lengkap ada di Panduan Dasar. Tutorial ini fokus pada skenario WooCommerce serta EDD/Storefront.
Opsi posisi WooCommerce
| Label di plugin | Hook / mekanisme | Kapan cocok |
|---|---|---|
| WooCommerce - After Product Image (woocommerce_before_single_product_summary:30) | woocommerce_before_single_product_summary priority 30 |
Default tema TokoPressID digital; preview dekat gambar |
| WooCommerce - Before Product Tabs (woocommerce_after_single_product_summary:9) | woocommerce_after_single_product_summary priority 9 |
Preview lebar penuh sebelum tab deskripsi |
| WooCommerce - After Product Tabs (woocommerce_after_single_product_summary:11) | priority 11 | Preview setelah semua tab; tidak mengganggu CTA atas |
| WooCommerce - Inside Product Tabs - Before Description (priority:5) | Tab produk baru, priority 5 | Preview sebagai tab pertama, sebelum deskripsi |
| WooCommerce - Inside Product Tabs - After Description (priority:15) | Tab produk, priority 15 | Preview setelah deskripsi dalam tab yang sama |
| WooCommerce - Inside Product Tabs - Last Tab (priority:99) | Tab terakhir | Preview terpisah di tab paling akhir |
EDD dan LarisDigital Storefront
Pada tema TokoPressID digital:
- EDD - After Product Image: jika Easy Digital Downloads aktif
- Storefront - After Product Image: jika memakai LarisDigital Storefront tanpa EDD
Keduanya memakai hook tema setara woocommerce_before_single_product_summary priority 30.
Penyesuaian tema TokoPressID
Jika tema Anda menempatkan detail produk di bawah gambar (product_details_is_below_image), plugin secara otomatis memindahkan hook Before Product Tabs dan After Product Tabs ke woocommerce_before_single_product_summary dengan prioritas 49 dan 51. Anda tidak perlu mengubah setting manual untuk kasus ini.
Langkah memilih posisi
- Buka LarisFont → Font Tester/Preview → Settings.
- Scroll ke Font Preview Position.
- Pilih opsi WooCommerce yang sesuai layout toko.
- Simpan dan cek halaman produk di frontend.
Custom Hooks Position
Jika opsi preset tidak pas dengan tema builder atau child theme:
- Pilih Custom Hooks Position.
- Isi Font Preview Hooks Name. Contoh:
woocommerce_after_single_product_summary. - Isi Font Preview Hooks Priority. Angka lebih kecil berarti dieksekusi lebih awal (default
10jika dikosongkan). - Simpan.
Gunakan hook yang tema Anda dokumentasikan. Prioritas bisa disesuaikan jika preview bertabrakan dengan elemen lain (misalnya related products di priority 20 → coba priority 8).
Alternatif: shortcode
Pilih I will use shortcode [larisfont_preview] to display font preview jika Anda ingin penempatan manual di:
- Deskripsi produk (editor blok/klasik)
- Template child theme
- Page builder
Lihat Menggunakan Shortcode [larisfont_preview].
Troubleshooting
| Masalah | Solusi |
|---|---|
| Preview tidak muncul di posisi yang dipilih | Pastikan Enable Font Preview global dan Enable font preview for this product aktif |
| Preview muncul dua kali | Jangan kombinasikan hook otomatis dengan shortcode di konten yang sama |
| Tab preview kosong | Hanya berlaku jika posisi tabs-first/second/last dipilih; judul tab mengikuti Font Preview Title Text |
| Posisi after image tidak cocok di tema non-TokoPressID | Coba Before Product Tabs atau Custom Hooks Position |
| Preview tertutup sticky add-to-cart | Pilih posisi After Product Tabs atau tab terakhir |