Template Shop Page (WordPress Theme)
Panduan lengkap Woo Template Shop Page: kolom produk, elemen grid, sidebar, page header, dan style product box di tema WordPress TokoPressID.
Section Woo Template - Shop Page mengatur tampilan halaman Shop (katalog produk): jumlah kolom, elemen yang tampil di product grid, pagination, sampai style product box. Pengaturannya dibagi dua tab: Settings (layout dan elemen) dan Style (warna).
Kalau yang ingin Anda ubah adalah layout “per halaman” (misalnya mematikan header/breadcrumb khusus di halaman Shop), edit halaman Shop di Pages lalu gunakan metabox Page Layout dan Page Header Text.
Tutorial ini berlaku untuk semua tema WordPress by TokoPressID yang mendukung WooCommerce, termasuk LarisManis, Adora, Salvia, LarisGram, LarisDigital, dan tema TokoPressID lainnya dengan struktur Theme Settings yang sama.
Cara membuka pengaturan
- Buka TokoPressID → Theme Settings → Theme Settings: WooCommerce.
- Klik Woo Template - Shop Page.
- Gunakan tab Settings atau Style.
Tab Settings
Katalog dan pagination
| Label di tema | Jenis | Fungsi |
|---|---|---|
| DISABLE result count | Checkbox | Sembunyikan teks “Showing X-Y of Z results” |
| DISABLE catalog ordering | Checkbox | Sembunyikan dropdown urutan (sort by) |
| Number of products per page | Angka | Jumlah produk per halaman katalog |
Kolom produk per baris
| Label di tema | Perangkat | Fungsi |
|---|---|---|
| Number of products per row | Semua (tema mobile) | Kolom grid di mobile theme |
| Number of products per row (desktop) | Desktop | Kolom di layar lebar |
| Number of products per row (tablet) | Tablet | Kolom di layar menengah |
| Number of products per row (mobile) | Mobile | Kolom di layar kecil |
Pilihan umum: 1 sampai 6 kolom per baris.
Shop/Product Grid Elements
| Label di tema | Jenis | Fungsi |
|---|---|---|
| Show product price | Radio | Tampilkan harga di product box |
| DISABLE product sale flash | Checkbox | Sembunyikan badge sale di grid |
| DISABLE product title | Checkbox | Sembunyikan judul produk |
| DISABLE product rating | Checkbox | Sembunyikan rating bintang |
| DISABLE Add-To-Cart button | Checkbox | Sembunyikan tombol beli di grid |
| Button Type | Radio | Tipe tombol di katalog |
| Button Text: Simple Product | Teks | Label tombol produk simple |
| Button Text: Variable Product | Teks | Label tombol produk variabel |
| Button Text: OutOfStock Product | Teks | Label saat stok habis |
| Button Text: Detail | Teks | Label tombol detail (jika tipe Detail) |
Tombol Add to Cart di product box memakai Secondary Color dari Global Colors.
Sidebar Layout
| Label di tema | Jenis | Fungsi |
|---|---|---|
| Sidebar Layout | Select | No Sidebar, Right Sidebar, Left Sidebar |
| Sidebar Width | Select | Lebar sidebar (3/12 sampai 6/12 Grid) |
| Content Width | Select | Lebar konten saat tanpa sidebar (6/12 sampai 12/12 Grid) |
Tautan Setup Sidebar Widgets membuka panel Widgets di Customizer.
Page Header Text
| Label di tema | Jenis | Fungsi |
|---|---|---|
| Use shop title for header title | Checkbox | Judul header mengikuti judul halaman Shop |
Header teks hanya relevan jika Header Text tidak disembunyikan secara global.
Tab Style
| Label di tema | Fungsi |
|---|---|
| Product Box Background | Warna latar kotak produk (mode terang) |
| [Dark] Product Box Background | Warna latar di dark mode |
| Product Title Color / [Dark] | Warna judul produk |
| Product Price Color / [Dark] | Warna teks harga |
| Product Price Background Color / [Dark] | Latar harga (gaya alternatif) |
| Product Box Text Alignment | Perataan teks (kiri, tengah, kanan) |
| Product Box Button Alignment | Perataan tombol di product box |
Layout per halaman lewat metabox
Selain pengaturan global di sini, Anda bisa mengatur layout khusus halaman Shop:
- Buka Pages → Shop (atau halaman yang ditetapkan sebagai Shop di WooCommerce → Settings → Products).
- Di metabox LarisTurbo by TokoPressID, buka Page Layout.
- Centang Customize page layout for this page lalu atur sidebar, breadcrumb, header, footer.
Catatan: opsi sidebar di metabox Page Layout untuk halaman Shop dinonaktifkan oleh tema (layout Shop diatur di Theme Settings).
Langkah setup disarankan
- Set Number of products per page (misalnya 12 atau 24).
- Atur kolom desktop/tablet/mobile sesuai desain.
- Aktifkan elemen grid yang diperlukan (harga, rating, tombol).
- Pilih Sidebar Layout atau No Sidebar untuk katalog lebar penuh.
- Sesuaikan warna di tab Style.
- Simpan dan uji di perangkat berbeda.