Cara Membangun Toko dengan WooCommerce Builder untuk Elementor

Anda sedang mencari pembuat WooCommerce untuk Elementor sehingga Anda dapat membuat dan menyesuaikan toko Anda menggunakan pembuat visual Elementor yang kuat.

Dengan ShopReady, Anda dapat membuat dan menyesuaikan seluruh toko WooCommerce Anda dengan Elementor – bahkan jika Anda hanya menggunakan Elementor versi gratis!

Jika Anda ingin mempelajari lebih lanjut tentang ShopReady, Anda dapat melihat ulasan lengkap ShopReady kami.

Namun, dalam artikel ini, kami lebih fokus pada cara menggunakan ShopReady sebagai pembangun WooCommerce untuk Elementor.

Di bawah ini, kami akan menunjukkan kepada Anda langkah demi langkah bagaimana Anda dapat menggunakan ShopReady untuk membangun dan menyesuaikan toko Anda, termasuk menambahkan fitur lanjutan seperti wishlist, tampilan cepat produk, checkout yang dioptimalkan, dan banyak lagi.

Anda dapat membuat toko yang terlihat seperti ini:

Dan Anda akan dapat menyesuaikan semuanya menggunakan Elementor, termasuk produk, keranjang, dan halaman checkout Anda ( ditambah banyak lagi ):

Cara Menggunakan ShopReady sebagai WooCommerce Builder untuk Elementor

Tanpa basa-basi lagi, mari langsung ke tutorial langkah demi langkah kami.

Sekali lagi, jika Anda ingin mempelajari lebih lanjut tentang banyak fitur di ShopReady sebelum masuk ke tutorial, Anda dapat membaca ulasan lengkap ShopReady kami.

Dan kapan pun Anda memilih untuk mencobanya, Anda bisa mendapatkan diskon 30% dengan menggunakan kode kupon eksklusif WPMayor30 saat checkout.

1. Buat Toko WooCommerce Dasar Anda dan Instal Elementor

Jika Anda belum melakukannya, langkah pertama Anda adalah menyiapkan toko WooCommerce dasar Anda.

Anda ingin memilih hosting WooCommerce berkualitas, menginstal WooCommerce, melalui panduan penyiapan, menambahkan beberapa produk, dan sebagainya.

Jika Anda memerlukan bantuan di sini, Anda dapat melihat panduan kami untuk menyiapkan toko WooCommerce.

Jangan khawatir tentang memilih tema WooCommerce atau menyesuaikan desain, karena itulah gunanya Elementor dan ShopReady. Fokus saja pada pengaturan hal-hal di backend sehingga Anda memiliki toko yang berfungsi, meskipun mendasar.

Setelah Anda selesai melakukannya, Anda juga ingin menginstal plugin Elementor.

Dengan ShopReady, Anda bebas menggunakan Elementor versi gratis saja.

Atau, jika Anda sudah memiliki Elementor Pro, Anda juga dapat menginstalnya – ShopReady berfungsi baik dengan kedua versi.

2. Instal ShopReady dan Aktifkan Semuanya

Setelah menyiapkan toko WooCommerce dasar dan menginstal Elementor, Anda siap menginstal pembuat ShopReady WooCommerce untuk Elementor.

Ada versi gratis ShopReady yang tersedia di WordPress.org, serta versi premium yang menambahkan lebih banyak fitur mulai dari $75.

Untuk tutorial ini, kami telah menginstal versi Pro. Namun, langkah-langkah dasar yang sama juga akan berlaku untuk versi gratis, jadi Anda harus dapat mengikuti bahkan jika Anda menggunakan versi gratis ( Anda mungkin tidak memiliki akses ke beberapa fitur yang lebih canggih dan Anda tidak akan bisa custom template sebanyak-banyaknya ).

Setelah Anda mengaktifkan plugin, Anda akan mendapatkan menu ShopReady baru di dasbor WordPress Anda.

Jika Anda masuk ke menu utama ShopReady , Anda akan mendapatkan antarmuka dengan area berbeda tempat Anda dapat mengaktifkan berbagai widget, modul, dan template.

Untuk saat ini, saya sarankan untuk mengaktifkan semua widget dan modul sehingga Anda memiliki akses ke semua fitur saat membuat toko.

Setelah Anda membangun toko Anda, Anda selalu dapat kembali dan menonaktifkan elemen apa pun yang tidak Anda gunakan untuk menjaga semuanya tetap ringan dan mempercepat toko Anda.

Ini sangat penting untuk mengaktifkan modul Demo Importer , karena ini akan memungkinkan Anda mengakses template toko buatan ShopReady ( meskipun Anda selalu dapat menyesuaikan semuanya dari awal ).

Setelah Anda mengaktifkan modul Demo Importer , itu akan meminta Anda untuk menginstal plugin Demo Importer pendamping, yang harus Anda lakukan.

Setelah Anda melakukannya, buka area Unyson baru di dasbor WordPress Anda dan aktifkan ekstensi Konten Cadangan & Demo sehingga Anda dapat mengimpor template ShopReady.

Catatan – jika Anda ingin mendesain template dari awal menggunakan Elementor, Anda dapat melewati proses ini.

3. Impor Template untuk Bertindak sebagai Basis Toko Anda

Sekarang, Anda dapat menuju ke Tools → Demo Content Install untuk menginstal salah satu situs demo ShopReady yang telah dibuat sebelumnya.

Sekali lagi, Anda juga bebas untuk melewati ini dan cukup mendesain template toko Anda dari awal, yang akan kami bahas di bagian selanjutnya.

Setelah Anda mengimpor demo, Anda dapat menyesuaikan sepenuhnya semuanya menggunakan Elementor.

Lihat-lihat opsi demo yang berbeda dan kemudian klik tombol Instal untuk demo yang ingin Anda gunakan sebagai basis toko Anda.

Untuk tutorial ini, kami akan menggunakan Demo V1 :

Dan begitu saja, toko Anda akan terlihat persis seperti demo:

4. Sesuaikan Template Toko Anda Dengan Elementor

Sekarang, Anda siap untuk mulai menggunakan pembuat WooCommerce untuk Elementor untuk menyesuaikan konten toko Anda.

Untuk mengakses semua templat toko Anda yang berbeda, buka area ShopReady di dasbor WordPress Anda, lalu pilih tab Templat .

Di sini, Anda akan melihat daftar semua templat berbeda yang terkait dengan toko Anda. Berikut adalah beberapa template yang paling penting untuk dipertimbangkan:

• Produk – template untuk satu halaman produk.
• Shop – template untuk halaman toko utama.
• Arsip Toko – template untuk halaman yang mencantumkan semua produk Anda.
• Cart / Empty Cart – template untuk berbagai tahap keranjang belanja Anda.
• Checkout – template untuk halaman checkout Anda.
• Akun Saya – template untuk halaman akun frontend pembelanja.

Namun, hal yang menyenangkan tentang ShopReady adalah ia juga memberi Anda kendali atas banyak templat lain, seperti tampilan cepat produk, daftar keinginan, dan banyak lagi.

Untuk mengedit template apa pun dan meluncurkan Elementor, Anda hanya perlu memilih template yang relevan lalu klik ikon Pensil .

Anda juga dapat membuat template baru dan menggunakan beberapa template di berbagai bagian toko Anda:

ShopReady sekarang akan meluncurkan antarmuka Elementor.

Untuk mengontrol desain, Anda dapat menggunakan antarmuka Elementor biasa dan semua opsi desainnya.

Perbedaan utamanya adalah ShopReady juga akan memberi Anda banyak widget umum dan widget WooCommerce khusus yang dapat Anda gunakan dalam desain Anda. Anda dapat menemukannya di berbagai area Shop Ready pada antarmuka Elementor:

Setiap widget juga akan memiliki pengaturan uniknya sendiri.

Misalnya, widget Thumbnail With Zoom memungkinkan Anda menampilkan gambar produk dengan tata letak dan pengaturan yang berbeda:

Setelah selesai, pastikan untuk menyimpan perubahan Anda.

Kemudian, Anda dapat mengulangi proses yang sama untuk mengedit semua template toko Anda. Tautan Dasbor biru di sisi kanan halaman memudahkan untuk kembali ke antarmuka template ShopReady.

Template yang berbeda mungkin menyertakan widget khusus mereka sendiri. Misalnya, saat Anda membuat template halaman pembayaran, Anda akan mendapatkan widget khusus untuk membantu Anda melakukannya:

5. Sesuaikan Pengaturan Situs

Selain membiarkan Anda menyesuaikan template individual dengan Elementor, ShopReady juga menambahkan beberapa opsi ke menu Pengaturan Situs Elementor. Anda dapat mengakses pengaturan situs Elementor dengan mengeklik ikon hamburger di pojok kiri atas antarmuka Elementor dan memilih Pengaturan Situs .

Di sinilah Anda dapat mengakses sejumlah pengaturan penting untuk perilaku toko Anda.

Pada awalnya, pengaturan dibagi menjadi dua area – ShopReady dan ShopReady General & PopUp.

Jika Anda mengeklik area tersebut, Anda akan mendapatkan sejumlah opsi tambahan. Misalnya, Anda dapat mengontrol perilaku keranjang mini di seluruh situs yang dapat Anda tambahkan dengan ShopReady:

Kami merekomendasikan untuk menjelajahi semua opsi ini karena di sinilah Anda dapat menemukan banyak fitur keren untuk toko Anda.

Anda juga dapat mengontrol header dan footer dengan membuka ShopReady → Header Footer di dasbor WordPress Anda.

Mulai Menggunakan Pembuat WooCommerce untuk Elementor Hari Ini

Pengguna menyukai Elementor karena visualnya yang kuat, antarmuka pembuat seret dan lepas.

Dengan ShopReady, Anda dapat memanfaatkan kekuatan pembuat itu untuk sepenuhnya merancang dan menyesuaikan toko WooCommerce Anda, bahkan jika Anda hanya menggunakan Elementor versi gratis.

Jika Anda siap untuk memulai, gunakan tombol di bawah untuk mengunduh ShopReady, lalu ikuti tutorial ini untuk membuat toko WooCommerce Anda.

Bonus: Dapatkan diskon 30% ShopReady dengan menggunakan kode kupon eksklusif WPMayor30 saat checkout!