Di era digital yang kian maju, memiliki toko online bukan lagi sekadar pilihan, melainkan sebuah keharusan bagi banyak bisnis. Kemampuan untuk menjual produk atau jasa Anda kepada audiens global, beroperasi 24/7, dan mencapai jangkauan pasar yang lebih luas adalah keuntungan tak ternilai. Namun, membangun toko online yang menarik, fungsional, dan mudah digunakan bisa terasa menakutkan, terutama bagi pemula.

Di sinilah kombinasi WordPress, Divi, dan WooCommerce menjadi solusi yang sangat kuat dan mudah dijangkau. WooCommerce adalah plugin e-commerce terpopuler di dunia untuk WordPress, menawarkan fungsionalitas toko online yang lengkap. Sementara itu, Divi (sebagai tema sekaligus page builder visual) menyediakan kontrol desain yang tak tertandingi, memungkinkan Anda menyesuaikan setiap aspek visual toko online Anda tanpa menyentuh kode.

Artikel ini akan menjadi panduan lengkap Anda untuk membangun toko online yang menarik dan profesional menggunakan sinergi Divi dan WooCommerce, mulai dari instalasi hingga peluncuran toko pertama Anda. Mari kita mulai perjalanan e-commerce Anda!

Tahap 1: Pondasi Toko Online Anda (Persiapan Awal)

Sebelum kita menyelami detail Divi dan WooCommerce, pastikan Anda memiliki fondasi yang kuat:

1. Nama Domain: Pilih nama domain yang relevan dengan bisnis Anda, mudah diingat, dan mencerminkan produk yang Anda jual (misalnya, namatokokamu.com).
2. Hosting Web: Pilih penyedia hosting yang andal, cepat, dan dioptimalkan untuk WordPress dan WooCommerce. Pertimbangkan hosting yang menawarkan sertifikat SSL gratis (HTTPS), karena ini penting untuk keamanan transaksi dan SEO. Beberapa rekomendasi: Hostinger, Bluehost, SiteGround, Cloudways.
3. Instalasi WordPress: Setelah memiliki hosting, instal WordPress Anda. Sebagian besar penyedia hosting menawarkan instalasi sekali klik yang sangat mudah.

Tahap 2: Instalasi dan Aktivasi Divi & WooCommerce

Setelah WordPress siap, saatnya menambahkan kekuatan Divi dan fungsionalitas WooCommerce.

1. Instalasi Tema Divi:

   • Beli Divi: Dapatkan keanggotaan dari Elegant Themes (elegantthemes.com).
   • Unduh Divi: Unduh file .zip tema Divi dari area anggota Elegant Themes.
   • Instal & Aktifkan Tema: Di dasbor WordPress Anda, navigasi ke Tampilan > Tema > Tambah Baru > Unggah Tema. Pilih file .zip Divi dan klik “Pasang Sekarang”, lalu “Aktifkan”.
   • Aktivasi Lisensi Divi: Masuk ke Divi > Opsi Tema > Updates dan masukkan username serta API Key dari akun Elegant Themes Anda. Ini memastikan Anda mendapatkan pembaruan tema dan akses ke fitur premium.

2. Instalasi & Konfigurasi Awal WooCommerce:

   • Instal Plugin: Di dasbor WordPress, navigasi ke Plugin > Tambah Baru. Cari “WooCommerce” dan klik “Pasang Sekarang”, lalu “Aktifkan”.
   • Wizard Penyiapan WooCommerce: Setelah aktivasi, WooCommerce akan menampilkan setup wizard. Ikuti langkah-langkah ini:
     • Detail Toko: Masukkan alamat toko Anda.
     • Industri: Pilih industri yang sesuai dengan produk Anda.
     • Jenis Produk: Pilih jenis produk yang akan Anda jual (fisik, digital, langganan, dll.).
     • Detail Bisnis: Berapa banyak produk yang akan Anda tampilkan dan apakah Anda sudah menjual di tempat lain.
     • Tema: Anda bisa melewati langkah pemilihan tema karena kita akan menggunakan Divi.
     • Fitur Tambahan (Opsional): WooCommerce mungkin merekomendasikan plugin tambahan seperti MailPoet atau Google Analytics. Anda bisa menginstal atau melewatinya.
   • Selesaikan Penyiapan: Setelah wizard selesai, Anda akan diarahkan ke dasbor WooCommerce.

Tahap 3: Menyesuaikan Toko Anda dengan Divi Theme Builder

Inilah bagian di mana Divi benar-benar bersinar dalam desain toko online Anda. Divi Theme Builder memungkinkan Anda mengontrol tata letak setiap halaman WooCommerce, bukan hanya halaman konten biasa.

1. Mengakses Divi Theme Builder:

   • Di dasbor WordPress, navigasi ke Divi > Theme Builder.
   • Anda akan melihat template kosong untuk berbagai bagian situs Anda.

2. Membuat Template Halaman Produk Tunggal (Single Product Page):

   • Ini adalah tampilan detail produk Anda. Klik “Add New Template”.
   • Pilih “All Products” (atau “Specific Product” jika Anda ingin template khusus untuk produk tertentu). Klik “Create Template”.
   • Klik “Add Custom Body”, lalu “Build Custom Body.”
   • Anda akan masuk ke Divi Builder. Di sini, Anda dapat menggunakan modul-modul WooCommerce khusus Divi untuk membangun tata letak produk Anda:
     • Woo Product Title: Untuk judul produk.
     • Woo Product Images: Untuk galeri gambar produk.
     • Woo Product Price: Untuk harga produk.
     • Woo Add To Cart: Tombol “Tambahkan ke Keranjang”.
     • Woo Product Description: Deskripsi lengkap produk.
     • Woo Product Data: Detail produk (SKU, kategori, tag).
     • Woo Related Products: Produk terkait.
     • Woo Breadcrumbs: Navigasi lokasi produk.
   • Susun modul-modul ini sesuai keinginan Anda. Anda bisa menambahkan Bagian, Baris, dan modul Divi standar lainnya (Teks, Blurb, Testimoni) untuk membuat desain yang unik.
   • Setelah selesai, klik “Save” di Divi Builder, lalu “Save Changes” di Theme Builder.

3. Membuat Template Halaman Toko (Shop Page), Kategori Produk, dan Tag Produk:

   • Kembali ke Theme Builder, klik “Add New Template”.
   • Pilih “All Product Archives” (untuk halaman toko utama, kategori, dan tag). Anda juga bisa membuat template terpisah untuk “Product Category Pages” atau “Product Tag Pages” jika ingin desain yang berbeda.
   • Klik “Add Custom Body”, lalu “Build Custom Body.”
   • Di sini, Anda akan menggunakan modul “Shop” Divi. Modul “Shop” akan secara otomatis menampilkan produk Anda dalam tata letak kisi atau daftar. Anda dapat menyesuaikan jumlah kolom, jumlah produk per halaman, dan elemen lain dari modul ini.
   • Tambahkan judul, teks pengantar, atau elemen lain di sekitar modul “Shop” untuk membuat halaman arsip produk Anda menarik.
   • Simpan perubahan Anda.

4. Menyesuaikan Halaman Keranjang (Cart), Checkout, dan Akun Saya (My Account):

   • Di Divi Theme Builder, Anda juga dapat membuat template kustom untuk halaman-halaman penting WooCommerce ini.
   • Add New Template, lalu pilih “Cart Page”, “Checkout Page”, atau “My Account Page”.
   • Saat membangun custom body, gunakan modul “Woo Notices”, “Woo Cart”, “Woo Checkout”, dan “Woo Account” yang disediakan Divi. Ini akan memastikan fungsionalitas inti WooCommerce tetap berjalan sementara Anda mengontrol tampilannya.

Tahap 4: Mengelola Produk di WooCommerce

Setelah desain tata letak dasar Anda siap, saatnya menambahkan produk Anda!

1. Menambah Produk Baru:
   • Di dasbor WordPress Anda, navigasi ke Produk > Tambah Baru.
   • Nama Produk: Judul produk Anda.
   • Deskripsi Produk (Panjang): Gunakan editor WordPress (bukan Divi Builder untuk area ini) untuk deskripsi produk yang detail.
   • Data Produk: Di bagian ini (biasanya di bawah deskripsi panjang), Anda akan menemukan pengaturan penting:
     • General: Harga reguler, harga obral.
     • Inventory: SKU, status stok, kelola stok.
     • Shipping: Berat, dimensi, kelas pengiriman.
     • Linked Products: Upsell dan Cross-sell.
     • Attributes: Variasi produk (ukuran, warna, bahan).
     • Advanced: Catatan pembelian, urutan menu.
   • Deskripsi Singkat Produk: Ringkasan produk yang sering muncul di samping gambar produk.
   • Gambar Produk: Gambar utama produk Anda.
   • Galeri Produk: Gambar tambahan untuk produk.
   • Kategori Produk & Tag Produk: Atur produk Anda ke dalam kategori dan tag yang relevan agar mudah ditemukan pelanggan.
2. Variasi Produk (Jika Ada):
   • Jika produk Anda memiliki variasi (misalnya, kaos dengan ukuran S, M, L dan warna merah, biru), Anda perlu membuat atribut dan variasi di tab “Attributes” dan “Variations” di bagian “Data Produk”.

Tahap 5: Mengatur Pembayaran dan Pengiriman

Ini adalah dua komponen krusial agar toko online Anda dapat berfungsi.

1. Pengaturan Pembayaran:

   • Navigasi ke WooCommerce > Pengaturan > Pembayaran.
   • Metode Pembayaran: WooCommerce sudah memiliki beberapa metode bawaan seperti Direct Bank Transfer, Check Payments, dan Cash on Delivery.
   • Integrasi Payment Gateway: Untuk menerima pembayaran online melalui kartu kredit/debit atau metode lain, Anda perlu menginstal plugin payment gateway tambahan (misalnya, Midtrans untuk Indonesia, Stripe, PayPal). Ikuti instruksi plugin payment gateway yang Anda pilih untuk mengkonfigurasinya.

2. Pengaturan Pengiriman:

   • Navigasi ke WooCommerce > Pengaturan > Pengiriman.
   • Zona Pengiriman: Buat zona pengiriman berdasarkan wilayah geografis Anda.
   • Metode Pengiriman: Untuk setiap zona, tambahkan metode pengiriman seperti Flat Rate (biaya tetap), Free Shipping (gratis), atau Local Pickup.
   • Plugin Pengiriman (Opsional): Untuk integrasi yang lebih canggih dengan kurir lokal atau perhitungan biaya pengiriman otomatis, Anda mungkin memerlukan plugin pengiriman tambahan (misalnya, RajaOngkir untuk Indonesia).

Tahap 6: Pengujian dan Peluncuran

Sebelum meluncurkan toko Anda ke publik, pengujian menyeluruh sangatlah penting.

1. Uji Proses Pembelian Lengkap:
   • Lakukan pembelian dari awal hingga akhir sebagai pelanggan (tambahkan produk ke keranjang, lanjutkan ke checkout, lakukan pembayaran dengan metode yang berbeda).
   • Pastikan email konfirmasi pesanan terkirim.
   • Periksa status pesanan di dasbor WooCommerce Anda.
2. Uji Responsivitas:
   • Pastikan toko Anda terlihat dan berfungsi dengan baik di berbagai perangkat (desktop, tablet, smartphone).
3. Optimasi Kecepatan:
   • Gunakan plugin caching (misalnya, WP Super Cache, LiteSpeed Cache) dan aktifkan opsi performance di Divi (Divi > Opsi Tema > Performance).
   • Optimalkan gambar Anda.
4. SEO Dasar:
   • Instal plugin SEO (Yoast SEO, Rank Math) untuk mengoptimalkan judul produk, deskripsi, dan URL.
5. Hapus Konten Sampel/Placeholder:
   • Pastikan tidak ada konten demo yang tersisa.
6. Backup Website:
   • Lakukan backup lengkap website Anda menggunakan plugin backup (UpdraftPlus) atau layanan hosting Anda.
7. Peluncuran:
   • Jika Anda menggunakan plugin “Coming Soon” atau “Maintenance Mode”, nonaktifkan.
   • Beri tahu dunia bahwa toko Anda sudah buka!

Kesimpulan

Membangun toko online yang menarik dan fungsional dengan Divi dan WooCommerce adalah sebuah proses yang memberdayakan. Dengan kombinasi fleksibilitas desain Divi dan fungsionalitas e-commerce yang lengkap dari WooCommerce, Anda memiliki semua alat yang dibutuhkan untuk menciptakan pengalaman belanja online yang luar biasa bagi pelanggan Anda.

Ingatlah bahwa pembangunan website adalah perjalanan berkelanjutan. Setelah peluncuran, terus pantau kinerja toko Anda, perbarui konten produk, dan cari cara untuk meningkatkan pengalaman pengguna. Selamat membangun kerajaan e-commerce Anda!