Cara Membangun Situs Web eCommerce dengan Elementor & WooCommerce (Panduan Memulai Cepat)

Diterbitkan: 2020-07-01

Jika Anda hanya berencana dengan bisnis online Anda, ini adalah tempat yang tepat untuk Anda. Dari memilih platform terbaik hingga meluncurkan situs web eCommerce Anda sendiri, kami telah membahas semuanya di sini.

Semua kita saksikan bagaimana orang-orang mengubah kebiasaan belanja mereka akhir-akhir ini. Bahkan dalam pandemi ini, ketika semua jenis bisnis berjuang untuk bertahan hidup, toko online memimpin.

Hari ini, kami akan memandu Anda melalui setiap langkah tentang cara membangun situs web eCommerce dengan Elementor & WooCommerce.

Tapi sebelum proses pengembangan izinkan saya menjelaskan beberapa fakta yang sebenarnya.

Rahasia di Balik Kesuksesan E-niaga

Seperti yang kami katakan sekarang orang lebih cenderung membeli dari online. Dengan kemajuan teknologi, menjadi lebih cepat dan lebih mudah untuk membeli dan menjual produk melalui situs web eCommerce.

ecommerce-sales-growth
Pertumbuhan Penjualan eCommerce

Bahkan toko fisik Anda harus memiliki platform online untuk melanjutkan pertumbuhan bisnis. Sangat penting untuk memelihara strategi online Anda untuk bertahan di dunia yang kompetitif ini. Jika tidak, Anda mungkin kehilangan banyak calon pelanggan untuk bisnis Anda.

Di sisi lain, jika Anda tidak memiliki toko fisik, Anda tetap dapat memulai bisnis online Anda dengan investasi yang lebih rendah dan menjual produk Anda kepada pelanggan Anda. Yang Anda butuhkan hanyalah situs profesional untuk menjalankan bisnis Anda.

Pada tahun 2040, diperkirakan 95% dari semua pembelian akan melalui eCommerce.

Nasdaq

Meningkatnya jumlah pembeli digital jelas menunjukkan bahwa tidak pernah ada waktu yang lebih baik untuk memulai bisnis eCommerce.

Tapi di sini muncul pertanyaan bagaimana membangun situs web eCommerce tanpa memiliki pengetahuan pengkodean. Nah, WordPress bersama dengan tool kitnya yang bermanfaat telah memecahkan masalah ini beberapa tahun yang lalu. Tapi kemudian Anda mungkin bertanya di antara semua alat itu-

Mengapa Menggunakan WooCommerce dan Elementor untuk Toko Online WordPress Anda

How to Build Shop Pages

WooCommerce adalah plugin untuk mengubah situs WordPress Anda menjadi platform bisnis eCommerce dalam sekejap mata. Tanpa coding, tanpa HTML, hanya dengan beberapa klik. Dan yang lebih menakjubkan, ia hadir dengan semua fungsi dasar toko online yang sepenuhnya GRATIS.

Belum berakhir! Anda akan mendapatkan sejumlah opsi plugin WooCommerce gratis untuk memperluas kemampuan toko Anda.

WooCommerce memberi Anda semua fleksibilitas dan berbagai fitur menarik seperti inventaris, manajemen pajak, pembayaran aman, dan integrasi pengiriman. Inilah alasan WooCommerce menjalankan lebih dari 28% dari semua toko online.

Lihat Statistik WooCommerce lainnya di sini →

Sekarang, biarkan sorotan pada Elementor– Pembuat halaman seret dan lepas ini membuat perancangan situs web semudah ABC. Cukup gerakkan kursor Anda dan siapkan situs Anda untuk ditayangkan. Tanpa memiliki pengetahuan sebelumnya atau bantuan profesional, ini adalah pilihan terbaik untuk membangun situs yang indah seperti seorang profesional.

Itu sebabnya lebih dari 5 juta orang secara aktif menggunakan Elementor Page Builder di situs WordPress mereka.

Singkatnya, tidak peduli apa yang Anda jual atau berapa banyak yang Anda jual dengan duo Elementor & WooCommerce, kemungkinan Anda tidak terbatas dan tidak terbatas.

Pengaturan Dasar dan Kustomisasi Toko E-niaga Anda

Berikut adalah prasyarat untuk membuat toko online Anda:

  • Situs WordPress
  • WooCommerce (GRATIS)
  • Elemen (Gratis)
  • HappyAddons – Addons Elementor (Gratis)

Mari kita asumsikan Anda telah memiliki domain dan paket hosting yang sesuai untuk situs web Anda. Kemudian konfigurasikan situs WordPress Anda dan instal semua plugin yang diperlukan termasuk WooCommerce, Elementor & HappyAddon.

Sementara itu, jika Anda baru pertama kali menggunakan WooCommerce, ikuti panduan langkah demi langkah yang mudah ini atau Anda dapat mengikuti panduan ini untuk mencoba WordPress di localhost.

Proses instalasi dan pengaktifan WooCommerce serupa seperti plugin WordPress lainnya. Mari tunjukkan secara detail cara mengonfigurasi pengaturan dan halaman WooCommerce dasar.

Langkah 1- Mulailah dengan Menginstal Plugin WooCommerce

Untuk menginstal dan mengaktifkan plugin WooCommerce-

  • Arahkan ke Dasbor Admin WordPress → Plugin → Tambah Baru
  • Cari 'WooCommerce'
  • Setelah itu, instal & aktifkan plugin
build an eCommerce marketplace with Dokan and Elementor

Sekarang, klik "Aktifkan sekarang" sebagai upaya berturut-turut.

WooCommerce tutorial- Activate WooCommerce plugin

Sekarang Anda akan mendapatkan wizard instalasi. Anda dapat melewati bagian ini dan melakukan semua perubahan secara manual. Tetapi lebih baik melalui proses dan membuat semua penyesuaian dasar yang sesuai. Jadi, di sini kita akan memilih "Let's Go" untuk memulai dengan wizard pengaturan.

WooCommerce setup wizard

1. Berikan Informasi Dasar

Awalnya menanyakan data awal toko Anda termasuk lokasi toko, jenis produk, mata uang yang Anda gunakan, dan jenis barang yang akan Anda jual (fisik, digital, keduanya, tatap muka), dan lain-lain.

WooCommerce tutorial- WooCommerce store setup

Anda juga dapat menentukan di sini apakah Anda ingin mengizinkan WooCommerce melacak penggunaan Anda untuk peningkatan toko Anda.

Mengisi formulir dengan benar. Kemudian klik tombol "Let's go" di bagian bawah untuk melompat ke kanan ke pengaturan berikutnya.

2. Siapkan Gateway Pembayaran WooCommerce

Di sini Anda dapat mengonfigurasi opsi pembayaran untuk toko online Anda. Pilihan langkah ini tergantung pada lokasi toko Anda dan jenis produk yang ingin Anda jual.

Jika Anda tidak menandai opsi “menjual produk secara langsung” maka Anda hanya akan mendapatkan Stripe dan Paypal.

woocommerce payment setup

Jika Anda menandai opsi 'Menjual secara langsung' dan tinggal di Kanada, Australia, AS, Jepang, Inggris, maka Anda akan melihat Square, PayPal, dan Stripe.

Karena gateway pembayaran ini tersedia di semua negara ini.

woocommerce paypal setup

Anda juga dapat memilih "Pembayaran Offline" dan memilih opsi pembayaran seperti cek, transfer bank, atau uang tunai dari menu tarik-turun.

Setelah Anda selesai dengan semua pengaturan klik tombol "Lanjutkan" lanjutkan ke langkah berikutnya.

3. Siapkan Pengiriman WooCommerce

Pada langkah ini, ini semua tentang pengiriman detail produk Anda. WooCommerce mendukung 2 zona pengiriman-

  • Zona 1 – AS dan Kanada
  • Dan zona 2 – negara-negara lain

Anda akan memiliki opsi tarif pengiriman langsung jika toko Anda berada di zona pertama. Tetapi Anda memiliki fleksibilitas untuk menetapkan tarif pengiriman tetap atau pengiriman gratis.

Dalam hal tarif pengiriman yang sebenarnya, Anda harus mengatur berat dan dimensi yang benar.

WooCommerce shipping setup

Sebelum mengklik lanjutkan, jangan lupa untuk menandai label pengiriman cetak di rumah untuk mencetak kredensial Anda.

4. Konfigurasikan Beberapa Opsi Ekstra

Di sini WooCommerce meminta Anda untuk menginstal beberapa plugin penting. Seperti pajak otomatis dengan Jetpack, MailChimp untuk pemasaran email dan plugin Facebook untuk WooCommerce.

WooCommerce recommended plugin jetpack

Pilih apa pun yang menurut Anda penting untuk situs web eCommerce Anda. Cukup pilih kotak centang untuk mendapatkan semua opsi ini secara otomatis di situs Anda. Jika mau, Anda juga dapat menginstalnya nanti secara manual.

5. Hubungkan WooCommerce dengan Jetpack & Selesaikan Pengaturan

Sekarang wizard pengaturan meminta Anda untuk menghubungkan situs Anda dengan Jetpack yang disebutkan di atas. Plugin ini bekerja luar biasa dengan semua fungsi pajak otomatis memastikan keamanan tertinggi. Anda dapat menginstalnya nanti juga dari direktori WordPress.

Klik "Lanjutkan dengan Jetpack".

Install WooCommerce with jetpack

Sekarang Anda berada di halaman terakhir wizard.

Dari halaman ini, Anda dapat membuat, mengimpor produk, mengunjungi dasbor, atau meninjau seluruh pengaturan. Hanya memeriksa dan pergi ke depan.

Kerja bagus! Anda telah melakukan semua pengaturan dasar untuk toko WooCommerce Anda. Sekarang Anda dapat menambahkan produk ke toko Anda.

10 Situs WooCommerce Menakjubkan Dibangun Dengan Elementor

Langkah 2: Cara Menambahkan Produk ke Toko WooCommerce Anda

Sekarang saatnya untuk menempati toko eCommerce online Anda dengan produk-produk penting yang dapat dibeli orang. Mari kita lihat bagaimana melakukannya!

1. Tambahkan Produk

Dari dasbor WordPress Anda, buka Produk → Tambahkan baru. Dan Anda akan mendapatkan layar ini untuk memasukkan informasi tentang produk Anda.

add new product 1

Di sini Anda dapat menambahkan detail produk Anda termasuk nama produk, kategori, gambar, tag, galeri, deskripsi, dan lainnya. Sertakan semua produk Anda satu per satu ke toko Anda dengan semua informasi yang diperlukan.

2. Konfigurasikan Data Produk

Di bawah jendela editor utama, Anda akan mendapatkan panel untuk mengatur data produk Anda. Sesuaikan data dengan hati-hati sesuai kebutuhan agar toko Anda bekerja dengan lancar.

How to build an eCommerce Website

Pertama, pilih tipe data produk yang Anda jual dari menu drop-down. Seperti-

  • Produk sederhana
  • Produk yang dikelompokkan
  • Produk Eksternal/Afiliasi
  • Produk variabel

Tergantung pada pilihan Anda, Anda akan mendapatkan opsi konfigurasi yang berbeda. Jadi, atur semua data sesuai dengan niche bisnis Anda, jenis industri, kategori produk dan lainnya.

Setelah Anda selesai dan telah menyimpan Anda dapat memeriksa produk dari "Semua Produk".

3. Periksa Tampilan Frontend Produk

Saatnya untuk melihat tampilan toko online Anda yang cemberut dan bagaimana produk muncul. Namun, itu sangat tergantung pada tema yang Anda gunakan. Di sini saya telah menggunakan tema Dokan karena berfungsi sempurna dengan WooCommerce.

Berikut daftar tema WooCommerce terbaik yang dapat Anda pilih.

How to build an eCommerce Website
Contoh Tampilan Frontend Toko WooCommerce

Jika Anda ingin toko tunggal Anda berubah menjadi pasar multivendor yang luas, lihat panduan terperinci ini untuk membangun dan menyesuaikan pasar multivendor Anda.

Langkah 3: Rancang Situs Web eCommerce Anda dengan Elementor

Pada langkah ini, kita akan mendesain toko online kita dengan Elementor. Untuk itu-

  • Arahkan ke Dasbor Admin WordPress → Plugin → Tambah Baru
  • Cari 'Elemen'
  • Setelah itu, instal & aktifkan plugin
how-to-use-Elementor-installation

Kemudian aktifkan plugin seperti yang kami lakukan untuk WooCommerce.

Atau, Anda dapat mengunduh Elementor secara manual dan mengunggah file menggunakan opsi Unggah Plugin.

Sekarang, mulailah mendesain halaman toko Anda dengan Elementor.

1. Bangun Halaman Produk melalui Elementor

Anda dapat menyesuaikan setiap inci toko online Anda dengan fitur dinamis dan widget Elementor. Jika Anda baru pertama kali menggunakan Elementor maka Anda dapat mengikuti panduan langkah demi langkah tentang Cara Menggunakan Elementor.

Mari buat halaman produk untuk menampilkan detail produk tertentu.

Nah, untuk mendesain halaman dari awal cukup buka Dashboard WordPress→Pages→Add New.

Kemudian, masukkan judul halaman dan pilih opsi Elementor Canvas dari dropdown template sisi kanan.

Terakhir, klik tombol "Edit dengan Elementor" dan mulai bekerja dengan pembuat WordPress ini.

how-to-use-elementor-canvas

Jika mau, Anda dapat menggunakan templat atau blok yang dibuat sebelumnya untuk mendesain halaman Anda.

how-to-use-elementor-template-library

Selain itu, Anda dapat menginstal add-on pihak ketiga untuk memperluas perpustakaan template Anda dengan fitur yang lebih eksklusif.

Lihat Template Bahagia di sini →

Atau rancang bagian individual dengan menyisipkan beberapa jenis widget yang berguna. Di sini kami telah menggunakan widget dari Elementor inti dan HappyAddons- Pengaya Elemen yang kuat untuk membuat halaman produk menakjubkan. Dan kami telah menggunakan versi GRATIS dari alat ini.

How to build an eCommerce Website

Anda akan mendapatkan semua alat dasar sepenuhnya gratis untuk membangun situs profesional di Elementor. Untuk bantuan lebih lanjut, Anda dapat membaca panduan ini tentang Cara Membuat Situs Web Kursus Online Menggunakan Elementor. Ini menunjukkan kepada Anda jalur untuk membuat berbagai kategori dan menerbitkan produk Anda di bawah kelas tertentu.

2. Selesaikan Desain

Setelah melakukan semua penyesuaian, saatnya untuk mempublikasikan halaman. Tetapi sebelum itu atur kondisi untuk menampilkan halaman Anda di bawah kategori tertentu.

Nah, dengan cara ini Anda juga bisa mendesain halaman Anda yang lain. Tidak ada ikatan di sini. Pikirkan sebuah desain dan potret mereka dalam kehidupan nyata menggunakan widget yang berbeda dari panel editor kiri.

Anda mungkin heran mengetahui bahwa Anda juga dapat menggunakan animasi dan memindahkan objek Anda ke segala arah dengan Happy Effects.

Dapatkan Happy Addons untuk Menyesuaikan Situs Elementor Gratis!

Mari kita lihat sekilas halaman-halaman yang harus Anda sertakan saat mengembangkan situs eCommerce-

Bonus: 10+ Fitur Halaman yang Harus Dimiliki untuk Toko Online Anda

Situs eCommerce Anda harus cukup menarik untuk menahan orang untuk waktu yang lama di situs Anda. Ini akan meningkatkan kesempatan Anda untuk berkomunikasi dengan mereka dan meyakinkan mereka untuk membeli dari toko Anda. Tetapi untuk itu Anda harus mengatur situs Anda secara terorganisir.

Jadikan situs Anda mudah diakses oleh semua jenis pelanggan sehingga mereka dapat menemukan produk yang diinginkan dengan mudah. Sebagai pemilik toko online, tahukah Anda halaman mana yang diharapkan pelanggan di situs Anda? Jika tidak, periksa halaman berikut-

Homepage : Ini adalah etalase bisnis Anda dan tempat atraksi utama untuk menarik perhatian audiens Anda. Berikan tampilan keseluruhan bisnis Anda melalui beranda. Pada saat yang sama tetap sederhana sehingga orang dapat menavigasi halaman lain dengan mudah.

Halaman Produk: Menampilkan detail produk tertentu dengan tombol “tambahkan ke troli”. Di sini Anda juga dapat menyarankan produk serupa atau produk terkait lainnya.

Halaman Kategori: Halaman ini adalah tampilan daftar untuk produk dari kategori tertentu.

category-page-ecommerce-site

Tinjauan Kategori: Pamerkan semua kategori toko Anda termasuk sub-kategori dan lainnya. Jadi, pengunjung dapat dengan mudah memahami apa yang Anda jual dan segera memeriksa produk yang mereka butuhkan. Jika toko Anda hanya memiliki satu kategori produk maka Anda dapat melewati ini.

Hasil Pencarian & Pencarian: Menyediakan opsi pencarian sangat penting di toko online untuk membantu pelanggan yang menginginkan akses cepat ke halaman yang diinginkan.

Login/Buat Akun : Ini adalah kesempatan bagus untuk mengumpulkan informasi tentang pelanggan Anda. Juga membantu untuk menawarkan penawaran dan diskon khusus kepada pelanggan setia Anda.

Checkout Tamu: Izinkan pengguna untuk membeli tanpa mendaftar di situs Anda jika mereka tidak ingin membagikan informasi mereka.

Enable guest checkout

Pesanan Saya: Riwayat pesanan membantu pelanggan untuk memeriksa barang belanjaan mereka sebelumnya - memesan ulang atau membatalkan barang.

Keranjang : Di sini pembeli digital dapat melihat produk yang mereka tambahkan dari toko Anda. Di halaman ini, mereka bisa melihat total harga termasuk ongkos kirim, memasukkan kode promo, dan juga diskon. Pengabaian keranjang adalah masalah besar bagi bisnis eCommerce mana pun.

Pengembalian: Berikan opsi pengembalian/penukaran kepada pelanggan Anda dalam beberapa kondisi. Ini memberikan kepercayaan diri yang besar kepada pengunjung Anda untuk melanjutkan belanja mereka di situs Anda.

Lokasi Toko Fisik: Beberapa orang memeriksa situs Anda hanya untuk mengetahui alamat outlet terdekat Anda. Jadi, jika Anda juga memiliki toko fisik, sertakan alamat dan detail kontaknya secara terpisah.

Obrolan Langsung: Sejumlah besar pelanggan lebih menyukai interaksi manusia selama pembelian online mereka. Sertakan opsi live chat yang pasti akan meningkatkan penjualan Anda.

Ulasan: Izinkan pelanggan Anda untuk berbagi pandangan, permintaan, pertanyaan, dan pengalaman berbelanja mereka di situs eCommerce Anda. Umpan balik positif berfungsi sebagai pemberi pengaruh yang hebat bagi pelanggan baru.

reviews-ecommerce-site

Namun, tergantung pada ceruk bisnis atau jenis produk Anda, Anda dapat memasukkan atau mengurangi beberapa halaman dari daftar ini. Terlepas dari daftar ini, Anda dapat menambahkan bagian blog di situs web Anda tempat Anda dapat mempublikasikan konten informatif yang terkait dengan bisnis Anda. Ini bisa menjadi sumber yang bagus untuk membagikan kegunaan produk Anda juga.

Pastikan transaksi aman dan beberapa opsi pembayaran juga dapat diabaikan jika Anda menginginkan kesuksesan maksimal untuk situs eCommerce Anda.

Betapa Senangnya Addons Membantu Komunitas Elementor

Bangun Situs Web eCommerce Anda & Mulai Mendaki Tangga Sukses Hari Ini!

Belanja online bukan lagi barang mewah, sudah menjadi kebutuhan. Tidak heran 25% dari total populasi dunia berbelanja di PC atau ponsel saat ini. Dan angka ini bergerak ke atas begitu cepat.

Tidak diragukan lagi, ritel online dapat menjadi sumber yang bagus untuk menghasilkan uang dengan cepat. Tapi selalu ada sisi lain dari koin. Sejumlah besar orang masuk ke bisnis online untuk menjual produk atau layanan mereka. Untuk menonjol dari keramaian, Anda memerlukan strategi dan rencana bisnis yang tepat. Ini membantu Anda untuk menarik audiens yang tepat terhadap merek Anda.

Nah, sekarang Anda sudah tahu cara membangun toko online dengan cara yang sederhana. Ikuti petunjuk di atas dengan hati-hati, tidak akan memakan waktu lebih dari satu jam untuk menyiapkan fungsionalitas dasar situs web Anda. Kami berjanji Anda juga akan menemukan kombinasi WooCommerce & Elemntor berguna untuk membuat situs web eCommerce Anda sendiri.

Jika Anda memerlukan bantuan lebih lanjut, lakukan komentar di bagian komentar di bawah.

dokan-multivendor