Built Web

Web Development

Tokoo

Dokumentasi Tema WooCommerce “ToKoo”

Selamat datang di pusat dokumentasi resmi ToKoo! Panduan ini dirancang untuk membantu Anda membangun, mengelola, dan mengoptimalkan toko online Anda menggunakan ToKoo — Tema Premium berbasis Full Site Editing (FSE) dan Gutenberg yang dirancang khusus untuk WooCommerce berkecepatan tinggi.

DAFTAR ISI DOKUMENTASI

  1. Halaman 1: Pengenalan & Fitur Utama
  2. Halaman 2: Panduan Instalasi & Persiapan
  3. Halaman 3: Pengaturan Awal Toko (Initial Setup)
  4. Halaman 4: Panduan Fitur Unggulan (Custom Blocks & Editor Helper)

1. PENGENALAN & FITUR UTAMA

ToKoo adalah tema WordPress modern generasi baru yang memanfaatkan teknologi Full Site Editing (FSE) secara penuh. Dibangun di atas editor blok bawaan WordPress (Gutenberg), ToKoo menghilangkan kebutuhan akan page builder pihak ketiga yang berat, menghasilkan performa pemuatan halaman yang sangat instan (ultra-fast loading) dan skor SEO yang optimal.

Fitur Unggulan ToKoo:

  • FSE (Full Site Editing) Ready: Kontrol penuh 100% atas seluruh bagian situs (Header, Footer, Single Product, Shop Page, Archive) langsung dari editor visual WordPress tanpa menyentuh baris kode (coding).
  • 14+ Custom Blocks Eksklusif: Blok fungsional siap pakai untuk meningkatkan penjualan, seperti Mega Menu, Flash Sale Tracker, Quick View, Buy Now Button, Dark Mode Switcher, Hallo Slide, dan masih banyak lagi.
  • Editor Helper & Efek Visual: Integrasi pustaka Swiper untuk slider responsif, AOS (Animate On Scroll) untuk efek animasi halus, serta kustomisasi tombol produk yang fleksibel.
  • Smart Header (Anti-Layout Shift): Header melayang pintar yang dioptimalkan untuk performa Core Web Vitals (bebas pergeseran tata letak/CLS saat di-scroll).
  • Desain Mobile-First & Aksesibilitas: Dioptimalkan secara sempurna untuk pengguna HP, kontrol penuh atas warna ikon menu hamburger, serta dukungan penuh untuk bahasa Arab/RTL.

2. PANDUAN INSTALASI & PERSIAPAN

Untuk memastikan tema ToKoo berjalan dengan lancar dan semua fitur kustomisasi berfungsi maksimal, ikuti urutan langkah pemasangan di bawah ini secara tepat.

Syarat Minimum Server:

  • WordPress: Versi 6.6 atau yang lebih baru.
  • PHP: Versi 7.4 atau yang lebih baru (Sangat direkomendasikan PHP 8.1+).

Langkah-langkah Instalasi:

Langkah 1: Pasang Plugin Pendukung Utama (Prasyarat)

Sebelum mengaktifkan tema, Anda harus menginstal dua plugin wajib berikut melalui menu Plugins > Add New di dasbor WordPress Anda:

  1. GenerateBlocks (Versi Gratis): Digunakan sebagai fondasi layout blok pada template tema.
  2. WooCommerce: Plugin utama untuk mengaktifkan fitur toko online (keranjang, pembayaran, dan manajemen produk).

Langkah 2: Mengunggah & Mengaktifkan Tema ToKoo

Setelah kedua plugin di atas aktif, saatnya memasang tema ToKoo:

  1. Masuk ke Appearance > Themes (Tampilan > Tema).
  2. Klik Add New Theme > Upload Theme.
  3. Pilih file .zip tema ToKoo yang sudah Anda unduh dari member area, lalu klik Install Now.
  4. Setelah proses unggah selesai, klik Activate.

Langkah 3: Aktivasi Lisensi ToKoo

Sistem lisensi otomatis diperlukan untuk menerima pembaruan (update) tema secara berkala dan mengakses layanan bantuan dukungan pelanggan:

  1. Setelah aktivasi tema, Anda akan melihat notifikasi atau menu baru bernama ToKoo License (License) di sidebar dasbor Anda.
  2. Masukkan kode lisensi (License Key) Anda pada kolom yang disediakan.
  3. Klik Activate License. Jika berhasil, status lisensi akan berubah menjadi aktif dan Anda siap mendesain!
Lihat panduan install dan aktivasi lisensi

3. PENGATURAN AWAL TOKO (INITIAL SETUP)

Karena ToKoo merupakan tema berbasis FSE, struktur beranda dan tata letak toko Anda dikelola melalui Site Editor. Berikut adalah langkah pertama yang harus dilakukan setelah instalasi selesai agar tampilan web Anda rapi:

A. Mengatur Halaman Toko (Shop Page) & Beranda

  1. Buka menu WooCommerce > Settings untuk menyelesaikan pengaturan mata uang, pengiriman, dan pembayaran Anda.
  2. Pastikan halaman-halaman wajib WooCommerce (Cart, Checkout, My Account, Shop) sudah terpasang otomatis. Jika belum, Anda bisa membuatnya lewat menu WooCommerce > Status > Tools > Create default WooCommerce pages.
  3. Untuk mengatur halaman beranda toko Anda agar langsung menampilkan template bawaan demo:
    • Buka menu Settings > Reading (Pengaturan > Membaca).
    • Pada opsi Your homepage displays, pilih Your latest posts, agar halaman utama (Homepage) menggunakan template khusus dari ToKoo.

B. Memahami Area Desain FSE (Full Site Editing)

Untuk mulai mendesain tata letak global situs Anda, buka menu Appearance > Editor. Di sana Anda akan melihat opsi:

  • Templates: Untuk mengedit halaman secara utuh (misalnya tata letak Single Product WooCommerce, Shop Page, atau halaman 404).
  • Template Parts: Untuk mengedit komponen kecil yang digunakan berulang kali di berbagai halaman (seperti Header, Footer, Sidebar, atau Related Inline).

4. PANDUAN FITUR UNGGULAN (CUSTOM BLOCKS)

ToKoo dibekali dengan 14+ Custom Block yang dirancang khusus untuk mempermudah operasional toko online Anda tanpa perlu menginstal belasan plugin tambahan lainnya yang bisa memperlambat website.

Berikut adalah beberapa blok unggulan ToKoo yang wajib Anda gunakan:

WooCommerce Integrated Blocks

  • Mega Menu Block: Membantu Anda menyusun menu navigasi kategori produk yang besar, lengkap dengan gambar promo dan diskon langsung di dalam menu drop-down.
  • Flash Sale (Countdown Timer): Blok penghitung mundur otomatis untuk memicu efek kelangkaan (urgency) pada produk diskon Anda. Anda dapat menentukan tanggal berakhir langsung dari editor visual.
  • Quick View Button: Memungkinkan pembeli melihat detail singkat produk dan menambahkannya ke keranjang lewat jendela pop-up cepat tanpa harus meninggalkan halaman katalog utama.
  • Buy Now Button: Tombol instan yang memangkas alur checkout biasa, mengarahkan pembeli langsung ke halaman pembayaran (Checkout Page) untuk meningkatkan konversi.
  • Search Hallo (Product/Artikel Search): Kolom pencarian interaktif yang cerdas untuk memudahkan pengunjung mencari produk atau artikel secara instan dan cepat.

Editor Helper & Utilities

  • Hallo Slide (Swiper Integration): Blok khusus untuk membuat slider spanduk promo yang responsif, mendukung geser sentuh (touch swipe) di smartphone, navigasi panah, dan pemutaran otomatis (autoplay) yang bisa diatur dari block editor langsung.
  • Dark Mode Switcher: Tombol pengubah tema gelap/terang instan yang ramah pengguna. Sistem ToKoo sudah mendukung pengaturan warna khusus untuk mode gelap secara global.
  • AOS Animation (Animate on Scroll): Pengaturan animasi untuk setiap blok visual agar konten Anda muncul secara dinamis saat halaman digulir ke bawah (konfigurasi tipe animasi, delay, dan durasi berada di sidebar kanan blok).