Integrasi Elementor dengan WooCommerce untuk Toko Online

Elementor + WooCommerce: Kombinasi Powerful

WooCommerce adalah plugin e-commerce terpopuler untuk WordPress, dan Elementor memungkinkan kamu mendesain tampilan toko online dengan bebas tanpa batasan tema default WooCommerce.

Setup Awal

1. Install dan aktifkan WooCommerce
2. Install dan aktifkan Elementor (minimal versi terbaru)
3. Untuk kontrol penuh, install Elementor Pro yang menyertakan WooCommerce Builder

Widget WooCommerce di Elementor Pro

• Products: Tampilkan produk dengan filter kategori, tag, featured
• Product Images: Galeri gambar produk dengan zoom
• Add to Cart: Tombol beli yang bisa dikustomisasi
• Product Price: Harga dengan format mata uang
• Product Rating: Bintang rating
• Checkout: Halaman checkout yang bisa didesain ulang
• Cart: Widget keranjang belanja

Membuat Halaman Produk Custom

1. Buka Elementor → Theme Builder → Single Product
2. Klik Add New → desain template halaman produk
3. Gunakan WooCommerce widget untuk menampilkan data produk secara dinamis
4. Publish → atur kondisi: tampil untuk semua produk atau produk tertentu

Menampilkan Produk di Halaman Biasa

1. Edit halaman dengan Elementor
2. Drag widget Products ke canvas
3. Filter: tampilkan produk featured, kategori tertentu, atau produk terbaru
4. Pilih layout: Grid, List, atau Carousel

Optimasi Toko untuk Konversi

• Tambahkan badge “Best Seller” atau “Diskon” menggunakan Sale Badge widget
• Pasang Quick View agar pengunjung bisa lihat detail produk tanpa pindah halaman
• Integrasikan AJAX Filter untuk filter produk tanpa reload halaman