Cara Mengatur Custom Content Hooks di WooCommerce (LarisTurbo)

Panduan lengkap Custom Content Hooks For WooCommerce: menyisipkan banner, teks, atau shortcode di halaman shop dan produk tanpa kode PHP, khusus classic theme dengan template WooCommerce standar.

Custom Content Hooks For WooCommerce membantu Anda menyisipkan konten kustom (teks, gambar, banner, shortcode) ke berbagai area halaman Shop dan Single Product WooCommerce lewat UI yang ramah pengguna—tanpa perlu menulis kode PHP.

Contoh penggunaan: banner promo di atas halaman shop, blok kebijakan pengiriman sebelum tombol Add to cart, atau pesan garansi setelah ringkasan produk. Konten dikelola dari editor di admin LarisTurbo dan dipasang pada hook WooCommerce yang sudah ditentukan.

Penting: fitur ini tidak tersedia untuk block theme. Jika situs memakai block theme (misalnya Twenty Twenty-Four dengan full site editing), halaman Settings akan menampilkan pesan bahwa Anda perlu memakai Site Editor untuk membuat konten serupa. Fitur ini juga hanya bekerja jika tema memakai template WooCommerce standar (bukan layout yang sepenuhnya mengganti hook WooCommerce).

Tutorial ini menjelaskan aktivasi, pola pengaturan per posisi hook, dan cara memverifikasi konten di frontend. Daftar lengkap posisi hook ada di tutorial lanjutan.

Yang akan tampil di toko

Setelah Anda mengisi Custom Content di salah satu posisi dan menyimpan:

• Blok HTML muncul di posisi hook yang dipilih (shop atau halaman produk).
• Konten dibungkus elemen dengan class lt-wc-custom-hook (dan class posisi, misalnya lt-wc-hook-shop_top).
• Jika diisi, Background Color dan Text Color diterapkan pada blok tersebut.
• Shortcode WordPress/WooCommerce dalam konten diproses otomatis (jika teks mengandung [...]).

Posisi kosong tidak menampilkan apa pun.

Prasyarat

• Plugin LarisTurbo For WooCommerce by TokoPressID terpasang dan lisensi aktif
• WooCommerce aktif
• Tema classic (bukan block theme) dengan template WooCommerce standar
• Untuk posisi khusus tema TokoPressID (Before Image, After Image): tema TokoPressID/LarisTurbo

Cara membuka pengaturan

1. Login ke WordPress Admin.
2. Buka LarisTurbo → For WooCommerce.
3. Di daftar fitur, cari Custom Content Hooks For WooCommerce, lalu klik Settings.

Jika situs memakai block theme, Anda hanya melihat pesan Custom Content Hooks yang mengarahkan ke Site Editor, tanpa opsi enable.

Pada classic theme, centang Enable Custom Content Hooks untuk menampilkan daftar posisi hook.

Opsi yang tersedia

Aktivasi

Deskripsi di checkbox: This feature works only when your theme using standard WooCommerce templates.

Per posisi hook

Setiap posisi hook memiliki satu heading (judul posisi + info hook teknis) dan tiga field pengaturan:

Posisi hook yang tersedia (label heading di plugin):

Detail hook teknis (woocommerce_before_single_product, priority, dll.) dibahas di Memilih Posisi Hook Konten Kustom.

Block theme

Jika tema block terdeteksi, halaman settings menampilkan pesan:

Sorry, this feature is not available for Block Theme, please use your Site Editor directly to add custom content to your WooCommerce pages.

Tidak ada checkbox enable dalam kondisi ini.

Langkah-langkah setup

1. Aktifkan fitur

1. Buka Settings Custom Content Hooks For WooCommerce.
2. Pastikan tema Anda bukan block theme.
3. Centang Enable Custom Content Hooks.
4. Simpan pengaturan.

2. Tambahkan konten di satu posisi

Contoh: banner promo di atas halaman shop.

1. Gulir ke heading Shop Page - Top.
2. Isi Custom Content, misalnya:

   <p><strong>Gratis ongkir</strong> untuk order di atas Rp 200.000 minggu ini!</p>

3. (Opsional) Atur Background Color dan Text Color.
4. Simpan.

3. Verifikasi di frontend

1. Buka halaman Shop dalam tab incognito.
2. Konten harus muncul di bagian atas daftar produk (posisi Shop Page - Top).
3. Untuk posisi produk, buka satu halaman produk dan cek area yang sesuai (misalnya sebelum tombol Add to cart untuk Single Product Page - Before Add to Cart).

4. Shortcode (opsional)

Jika Custom Content berisi shortcode (misalnya [products limit="4"]), plugin memproses shortcode saat halaman dirender. Pastikan shortcode valid dan plugin penyedia shortcode aktif.

Troubleshooting

Halaman Settings hanya menampilkan pesan block theme

• Situs memakai block theme. Gunakan Appearance → Editor (Site Editor) untuk membuat konten di template WooCommerce, atau ganti ke classic theme yang mendukung hook WooCommerce.

Enable dicentang tapi konten tidak muncul

• Pastikan Custom Content untuk posisi tersebut tidak kosong.
• Tema mungkin tidak memanggil hook WooCommerce standar (builder/page builder yang mengganti template produk/shop).
• Coba posisi lain (misalnya Single Product Page - Top) untuk mengisolasi masalah tema.
• Kosongkan cache plugin/page cache, lalu reload halaman.

Konten muncul di posisi yang salah

• Beberapa tema mengubah urutan hook internal. Lihat tutorial Memilih Posisi Hook Konten Kustom untuk memetakan hook dan priority.
• Tema TokoPressID punya posisi Before Image / After Image yang tidak ada di tema lain.

Warna latar/teks tidak berlaku

• Background Color dan Text Color opsional; kosongkan lalu isi ulang jika picker tidak menyimpan.
• CSS tema dengan !important bisa menimpa warna plugin.

Shortcode tampil sebagai teks mentah

• Pastikan format shortcode benar ([nama_shortcode]).
• Plugin yang menyediakan shortcode harus aktif.

Ringkasan

Alur yang paling sering dipakai: pastikan classic theme → aktifkan Enable Custom Content Hooks → isi Custom Content di posisi yang diinginkan → atur warna opsional → simpan → cek di shop atau halaman produk. Block theme tidak didukung; gunakan Site Editor sebagai alternatif.