Elementor dan WooCommerce bersama-sama membentuk salah satu kombinasi yang paling fleksibel untuk membangun toko online kustom di WordPress. Sementara WooCommerce menangani fungsionalitas e-commerce (produk, keranjang, checkout, pembayaran), Elementor memberi Anda kontrol visual atas bagaimana halaman toko tersebut terlihat dan berfungsi. Dalam panduan ini, kami akan membahas cara membangun halaman WooCommerce kunci dengan Elementor, termasuk halaman produk, arsip toko, dan pengalaman keranjang.
Tutorial ini mengasumsikan Anda telah menginstal WordPress, WooCommerce, dan Elementor Pro. Elementor Pro diperlukan untuk widget WooCommerce—versi gratis dari Elementor tidak menyertakannya.
Apa yang Anda Butuhkan Sebelum Memulai
| Persyaratan | Mengapa Ini Diperlukan | Di Mana Mendapatkannya |
|---|---|---|
| WordPress 6.x+ | Platform CMS inti | wordpress.org |
| WooCommerce (gratis) | Fungsionalitas e-commerce | Direktori plugin WordPress |
| Elementor Pro | Widget WooCommerce dan Pembuat Tema | PluginTheme.net |
| Tema yang kompatibel | Dasar untuk toko Anda | Panduan pemilihan tema |
| Produk contoh | Konten untuk merancang template | WooCommerce → Alat → Impor data contoh |
Memahami Pembuat WooCommerce Elementor
Elementor Pro mencakup Pembuat WooCommerce yang didedikasikan dalam sistem Pembuat Temanya. Ini memungkinkan Anda untuk membuat template kustom untuk:
- Halaman Produk Tunggal: Mengontrol tata letak halaman produk individual
- Arsip Produk: Menyesuaikan halaman toko dan halaman kategori
- Halaman Keranjang: Merancang tata letak keranjang kustom
- Halaman Checkout: Menyesuaikan tata letak formulir checkout
- Halaman Akun Saya: Mendesain ulang dasbor akun pelanggan
Setiap template menggunakan widget khusus WooCommerce yang menarik data dinamis dari produk Anda. Ini berarti Anda merancang tata letak sekali, dan itu diterapkan secara otomatis ke semua produk (atau kategori tertentu).
Membangun Halaman Produk Kustom
Langkah 1: Buat Template
- Masuk ke Templates → Theme Builder di admin WordPress Anda
- Klik "Tambah Baru" dan pilih "Produk Tunggal" sebagai jenis template
- Pilih template halaman produk yang sudah dibangun sebelumnya atau mulai dari kanvas kosong
- Editor Elementor akan terbuka dengan widget WooCommerce yang tersedia di panel
Langkah 2: Tambahkan Widget WooCommerce
Widget WooCommerce kunci untuk halaman produk:
| Widget | Apa yang Ditampilkan | Opsi Kustomisasi |
|---|---|---|
| Gambar Produk | Galeri dengan thumbnail dan lightbox | Tata letak galeri, posisi thumbnail, toggle zoom |
| Judul Produk | Nama produk (H1) | Tipografi, warna, perataan |
| Harga Produk | Harga reguler dan harga diskon | Tipografi, warna badge diskon, tata letak |
| Rating Produk | Rating bintang dari ulasan | Warna bintang, ukuran, perataan |
| Tambah ke Keranjang | Pemilih jumlah + tombol tambah ke keranjang | Gaya tombol, warna, tata letak jumlah |
| Deskripsi Singkat Produk | Ringkasan singkat produk | Tipografi, spasi |
| Meta Produk | SKU, kategori, tag | Tata letak, tipografi, pemisah |
| Tab Data Produk | Deskripsi, ulasan, tab informasi tambahan | Gaya tab, batas, spasi |
| Produk Terkait | Produk dari kategori yang sama | Kolom, jumlah, urutan |
| Upsells | Upsell yang terhubung secara manual |
Langkah 3: Praktik Terbaik Tata Letak
Halaman produk yang memiliki konversi tinggi mengikuti pola tata letak yang telah teruji:
- Di atas lipatan: Gambar produk (kiri, 50-60% lebar) + judul, harga, rating, deskripsi singkat, dan tombol tambah ke keranjang (kanan, 40-50% lebar)
- Di bawah lipatan: Tab data produk (deskripsi lengkap, spesifikasi, ulasan)
- Bagian bawah: Produk terkait dan upsell dalam grid (3-4 kolom)
- Elemen kepercayaan: Info pengiriman, kebijakan pengembalian, lencana keamanan di dekat tombol tambah ke keranjang
Pastikan tombol tambah ke keranjang terlihat tanpa menggulir di desktop dan mobile. Gunakan warna kontras untuk tombol agar menarik perhatian.
Kustomisasi Halaman Toko (Arsip Produk)
Langkah 1: Buat Template Arsip
- Masuk ke Templates → Theme Builder → Product Archive
- Tambahkan template baru dan pilih "Product Archive" sebagai tipe
- Tetapkan kondisi tampilan (semua arsip, kategori tertentu, atau halaman tag)
Langkah 2: Konfigurasi Grid Produk
Widget Archive Products menampilkan daftar produk Anda dengan opsi-opsi berikut:
- Kolom: 2-6 kolom (3-4 kolom bekerja dengan baik untuk sebagian besar toko)
- Produk per halaman: 12-24 adalah standar untuk pengalaman pengguna
- Pagination: Halaman bernomor, tombol "muat lebih banyak", atau gulir tak terbatas
- Dropdown penyortiran: Izinkan pelanggan untuk menyortir berdasarkan harga, popularitas, atau rating
- Lencana diskon: Sesuaikan posisi, warna, dan teks lencana diskon
Untuk toko dengan banyak produk, tambahkan penyaringan kategori di atas grid. Anda dapat menggunakan widget Menu Elementor atau plugin penyaring produk seperti JetWooBuilder untuk opsi penyaringan yang lebih canggih.
Merancang Halaman Keranjang
Elementor Pro memungkinkan Anda untuk menyesuaikan tata letak halaman keranjang. Halaman keranjang yang baik harus:
- Menampilkan gambar produk, nama, harga, dan jumlah dalam tabel yang bersih
- Menampilkan total yang sedang berjalan dengan jelas
- Menyertakan tombol "Lanjutkan Belanja" yang kembali ke halaman toko
- Menampilkan kalkulator pengiriman sehingga pelanggan dapat memperkirakan biaya pengiriman
- Menampilkan produk cross-sell di bawah tabel keranjang
Widget Keranjang Elementor menggantikan tata letak keranjang WooCommerce default dengan editor visual di mana Anda dapat menata setiap elemen—batas tabel, warna tombol, tipografi, dan spasi.
Kustomisasi Halaman Checkout
Halaman checkout berdampak langsung pada tingkat konversi Anda. Widget Checkout Elementor Pro memberikan kontrol atas:
- Tata letak formulir: Formulir penagihan/pengiriman satu kolom atau dua kolom
- Posisi ringkasan pesanan: Berdampingan dengan formulir atau di atas/bawah
- Gaya tombol: Warna, ukuran, dan teks tombol tempat pesanan
- Bagian pembayaran: Tata letak tombol radio atau tab untuk metode pembayaran
- Lencana kepercayaan: Tambahkan ikon keamanan dan teks jaminan di dekat formulir pembayaran
Untuk tips optimasi konversi checkout, lihat panduan optimasi checkout WooCommerce kami.
Pertimbangan Kinerja
Elementor menambahkan CSS dan JavaScript ke halaman Anda. Untuk toko WooCommerce, kinerja terkait langsung dengan konversi. Simpan tips ini dalam pikiran:
- Gunakan wadah Flexbox daripada bagian/kolom untuk mengurangi elemen DOM
- Optimalkan gambar produk: Gunakan format WebP, dimensi yang tepat, dan pemuatan malas. Lihat panduan optimasi gambar kami
- Batasi jumlah widget: Setiap widget menambah markup; gunakan hanya yang Anda butuhkan
- Aktifkan fitur kinerja Elementor: Peningkatan Pemuatan Aset, Peningkatan Pemuatan CSS
- Gunakan plugin caching: WP Rocket bekerja dengan baik dengan pengaturan Elementor WooCommerce
Addon Penting untuk Elementor WooCommerce
Addon Elementor ini memperluas kemampuan pembangunan WooCommerce:
| Addon | Fitur Utama WooCommerce |
|---|---|
| JetWooBuilder | Jaringan produk lanjutan, template arsip kustom, tata letak produk tunggal dengan logika bersyarat |
| Essential Addons Pro | Jaringan produk, karusel produk, checkout WooCommerce |
| Happy Elementor Addons | Jaringan kategori produk, keranjang mini, karusel produk |
Pertanyaan yang Sering Diajukan
Apakah saya perlu Elementor Pro untuk WooCommerce, atau apakah versi gratisnya sudah cukup?
Elementor Pro diperlukan untuk widget khusus WooCommerce (Gambar Produk, Tambah ke Keranjang, Tab Data Produk, Keranjang, Checkout, dll.). Versi gratis Elementor tidak menyertakan widget ini. Anda dapat menggunakan versi gratis untuk mendesain halaman biasa, tetapi template WooCommerce kustom memerlukan Elementor Pro.
Bisakah saya menggunakan Elementor untuk halaman checkout?
Ya. Elementor Pro menyertakan widget Checkout yang menggantikan tata letak checkout WooCommerce default. Anda dapat menyesuaikan kolom formulir, ringkasan pesanan, bagian pembayaran, dan tata letak secara keseluruhan. Namun, berhati-hatilah dengan kustomisasi berat yang mungkin merusak integrasi gateway pembayaran—selalu uji alur pembelian penuh setelah melakukan perubahan.
Bagaimana cara membuat tata letak halaman produk yang berbeda untuk kategori yang berbeda?
Di Theme Builder Elementor, Anda dapat menetapkan kondisi tampilan untuk setiap template. Buat satu template halaman produk untuk pakaian (dengan pemilih ukuran/warna), satu lagi untuk produk digital (tanpa informasi pengiriman), dan seterusnya. Setiap template hanya berlaku untuk produk dalam kategori yang ditentukan.
Apakah Elementor memperlambat WooCommerce?
Elementor menambah overhead CSS dan JavaScript ke halaman mana pun. Di halaman produk dengan banyak widget, ini dapat meningkatkan waktu muat sebesar 0,5-1,5 detik dibandingkan dengan template WooCommerce default. Menggunakan fitur kinerja bawaan Elementor, mengoptimalkan gambar, dan menggunakan plugin caching membantu mengurangi dampak ini. Untuk toko yang sangat memperhatikan kinerja, pertimbangkan tema yang lebih ringan seperti GeneratePress.
Bisakah saya menggunakan template WooCommerce Elementor dengan tema apa pun?
Kebanyakan template WooCommerce Elementor bekerja dengan tema apa pun yang mendukung WooCommerce. Namun, beberapa tema mungkin memiliki gaya halaman produk mereka sendiri yang bertentangan dengan template Elementor. Tema seperti Astra, GeneratePress, dan OceanWP dirancang untuk bekerja dengan mulus dengan Elementor dan memberikan kanvas terbersih untuk template kustom.
Dapatkan Elementor Pro untuk Membangun Toko WooCommerce
Akses semua widget WooCommerce, Theme Builder, dan 100+ template Pro. Buat halaman produk kustom, arsip toko, dan tata letak checkout secara visual.
Jelajahi Elementor Pro →
