Cara Membangun Situs Web WooCommerce Dengan Tema Elementor & Astra

Ingin meluncurkan toko WooCommerce dan mulai menjual produk melalui Internet? Meskipun Anda dapat menemukan banyak informasi online, seluruh proses pembuatan toko yang benar-benar terlihat bagus sering kali tampak sedikit berlebihan.

Jadi bagaimana jika kami memberi tahu Anda bahwa Anda dapat menyiapkan toko eCommerce yang tampak hebat dalam waktu kurang dari satu jam… gratis?

Kami tahu – itu sangat sulit. Namun dengan kombinasi tema Elementor, WooCommerce, dan Astra, Anda bisa melakukannya . Dan dalam posting ini, kami akan menunjukkan kepada Anda langkah-langkah tepat yang perlu Anda ambil untuk memulai dan menjalankan toko Anda sendiri dalam waktu singkat.

Apa yang Harus Diperhatikan dalam Tema Elementor WooCommerce

Sama menariknya dengan memulai toko online Anda menggunakan WooCommerce dan Elementor, sama pentingnya untuk menemukan tema yang cocok untuk menyertainya.

Hal terakhir yang Anda inginkan adalah mengakhiri pemadaman kebakaran dan memperbaiki masalah tepat sebelum Anda ditayangkan!

Apa saja elemen kunci yang harus Anda pertimbangkan saat mempersempit tema WordPress ideal Anda?

1. Kecepatan

Semuanya bermuara pada seberapa cepat situs web Anda dimuat. Ini menjadi lebih penting ketika Anda memiliki produk untuk dijual di toko WooCommerce Anda.

Kecepatan memuat halaman bukan hanya kebutuhan. Itu yang menggarisbawahi kesuksesan Anda.

Tahukah Anda bahwa 1 dari 4 pengunjung akan meninggalkan situs web Anda jika memuat lebih dari empat detik? Bahkan penundaan kedua dapat mengurangi kepuasan pelanggan sebesar 16%. (Sumber: Pakar Pembuat Situs Web)

Dengan waktu buka halaman yang lebih lama, pelanggan Anda memiliki lebih banyak peluang untuk pergi tanpa melihat apa yang ditawarkan toko Anda. Yang berarti tingkat bouncing yang lebih tinggi.

Ini tidak cocok dengan mesin pencari dan hanya menurunkan peringkat situs Anda.

Pada akhirnya, itu tergantung pada pengalaman pengguna. Semakin baik pengalaman pengguna, semakin baik konversi toko Anda.

2. Kustomisasi

Ingin kontrol penuh atas tampilan dan nuansa toko online Anda? Kemudian pertimbangkan tema yang dapat Anda sesuaikan dengan mudah.

Saat membuat toko online, idenya adalah membuat toko yang lebih baik dari pesaing Anda. Logo, font, warna Anda semua harus mencerminkan identitas merek Anda.

Jadi mengapa tetap menggunakan pengaturan default tema?

Anda harus dapat menyesuaikan setiap elemen tema baik dari penyesuai atau menggunakan Elementor. Meskipun sebagian besar tema memberi Anda fleksibilitas ini, ada baiknya Anda memeriksanya sejak awal.

3. Template Demo

Mengapa memulai dengan kanvas kosong ketika Anda dapat memanfaatkan beberapa template toko yang sudah jadi?

Akui. Ketika Anda mulai, bukankah lebih mudah untuk membuat toko online dengan melihat bagaimana hal itu dilakukan? Ini seperti mereferensikan apa yang berhasil sebelum Anda menjadi ahli dalam membuat milik Anda sendiri.

Carilah tema yang menawarkan Anda fleksibilitas menggunakan templat toko WooCommerce pra-bangun yang dapat dengan mudah dikustomisasi menggunakan Elementor.

4. Dioptimalkan Untuk Penjualan Seluler

Penjualan dari perangkat seluler terus meningkat.​​

Laporan menunjukkan penjualan dari perangkat seluler diproyeksikan mencapai $3,56 triliun pada tahun 2021, yang 22,3% lebih banyak dari yang tercatat pada tahun 2020.

(Sumber: Statista)

Apakah ponsel toko Anda dioptimalkan? Apakah tema Anda responsif dan berfungsi dengan baik di semua perangkat? Jika tidak, kami sarankan Anda mempertimbangkan hal ini dengan serius.

5. Proses Checkout Lebih Cepat

Mari kita mulai dengan beberapa fakta.

• Tingkat pengabaian keranjang rata-rata hampir 70 persen (tepatnya 69,57), dan mencapai 85,65 persen jika menyangkut pengguna seluler
• Karena pengabaian keranjang, merek eCommerce kehilangan pendapatan penjualan sebanyak $18 miliar setiap tahun

Kabar baiknya adalah bahwa laporan yang sama juga menunjukkan bahwa dengan mengoptimalkan pengalaman pembayaran, ada peningkatan konversi sebesar 35,62 persen.

Sementara alasan nomor satu adalah dimasukkannya biaya tambahan, 26% menyebutkan proses checkout terlalu lama saat checkout.

(Sumber: Sleeknote)

Semua data ini membuktikan pentingnya halaman checkout yang dirancang dengan baik.

Kecuali jika Anda ingin melihat penurunan yang signifikan dalam pendapatan penjualan Anda, Anda pasti ingin memastikan tema Anda memiliki proses checkout yang dioptimalkan untuk konversi.

6. Dukungan Luar Biasa

Bukankah sedikit dukungan terkadang membantu? Dan cara apa yang lebih baik daripada memiliki tim pendukung, tepat saat Anda menginginkannya.

Sementara sebagian besar tema menawarkan dukungan melalui dokumentasi, ada baiknya menggunakan tema WordPress yang menawarkan dukungan manusia yang ramah.

7. Aman

Last but not least, masuk untuk tema yang stabil dan aman. Salah satu yang memungkinkan Anda untuk menginstal hampir semua plugin WooCommerce dan Elementor tanpa takut merusak toko Anda.

Singkat cerita, carilah tema yang dibuat untuk kinerja, konversi, dan yang berfungsi seperti pesona.

Tema seperti Astra!

Apa yang Anda Butuhkan untuk Membuat Toko WooCommerce Anda

Seperti yang disarankan oleh judul posting ini, ada dua alat utama yang Anda perlukan untuk membangun toko Anda di luar plugin inti WooCommerce:

• Tema Astra – ini adalah tema WordPress gratis yang mencakup opsi penyesuaian mendalam, serta integrasi WooCommerce dan situs demo bawaan.
• Elementor – ini adalah pembuat halaman gratis yang akan membantu Anda menyesuaikan berbagai halaman di toko Anda, seperti halaman beranda dan halaman tentang.

Satu-satunya hal yang akan kami asumsikan untuk tutorial ini adalah Anda sudah menginstal WooCommerce – kami akan membahas semua hal lain tentang membuat toko Anda terlihat dan berfungsi dengan baik.

Jika Anda membutuhkan bantuan dalam menyiapkan WooCommerce, lihat panduan lengkap kami.

Setelah Anda menginstal WooCommerce, inilah cara membuat toko Anda terlihat keren!

Bagian 1: Bangun Situs Web WooCommerce dalam Waktu Kurang dari 10 Menit

Di luar opsi desain dan penyesuaian yang ringan secara umum, Astra secara khusus membantu Anda dengan WooCommerce dalam dua cara utama.

Kamu bisa:

• Impor template Elementor WooCommerce gratis, serta pengaturan WordPress Customizer untuk dengan cepat membuat toko WooCommerce yang tampak hebat.
• Gunakan integrasi WooCommerce khusus Astra untuk menyesuaikan aspek penting toko Anda melalui Penyesuai WordPress waktu nyata.

Berikut cara menggunakan Astra untuk menyiapkan inti toko WooCommerce Anda:

Langkah 1: Tema dan Plugin

Untuk memulai, Anda harus memasang tema dan plugin. Keduanya terdaftar di WordPress.org, yang berarti Anda dapat menginstalnya langsung dari dasbor WordPress Anda:

• Tema Astra
• Plugin Template Pemula

Langkah 2: Impor Situs Pemula Astra WooCommerce

Setelah Anda menginstal tema Astra dan plugin Starter Templates, buka Appearance → Starter Templates di dashboard WordPress Anda untuk mengimpor situs demo Anda (artikel bantuan ini memiliki informasi lebih lanjut jika diperlukan).

Ini akan memulai wizard template pemula untuk menginstal template bawaan di situs web Anda.

Klik tombol “ Bangun Situs Web Anda Sekarang ”.

Kemudian, pilih pembuat halaman Elementor :

Anda kemudian dapat menggunakan opsi pemfilteran untuk menemukan berbagai template Elementor eCommerce.

Beberapa dari template ini gratis, sementara yang lain, ditandai sebagai "Premium" memerlukan plugin Premium Starter Templates yang merupakan bagian dari Astra Essential Bundle dan Growth Bundle.

Jangan ragu untuk memilih situs demo yang menarik perhatian Anda. Tapi untuk tutorial ini, kita akan menggunakan situs demo Brand Store gratis:

Setelah Anda mengklik situs demo yang Anda inginkan, itu akan membuka halaman baru di mana Anda dapat mengunggah logo dan skema warna situs web Anda. Ini membuat hidup Anda lebih mudah karena Anda tidak perlu menambahkan logo atau memilih warna untuk kedua kalinya.

Namun, jika logo dan warna Anda belum siap, Anda dapat melewati langkah tersebut. Untuk tutorial ini, klik “ Lewati dan Lanjutkan ”.

Selanjutnya, Anda akan menemukan kotak yang meminta Anda untuk mengisi detail Anda (yang dapat Anda pilih untuk dibiarkan kosong) dan menginstal data khusus yang ditambahkan ke situs web.

Jadi pada langkah ini, cukup klik Submit & Build My Website .

Setelah Anda mengklik tombol Kirim & Bangun Situs Web Saya , itu akan mulai mengimpor situs web.

Sekarang, Anda siap untuk membuat semuanya menjadi milik Anda!

Langkah 3: Gunakan Penyesuai WordPress untuk Membuat Segalanya Menjadi Milik Anda

Astra menggunakan Penyesuai WordPress asli untuk membantu Anda menyesuaikan tampilan toko Anda. Alat ini memungkinkan Anda membuat perubahan bebas kode ke berbagai aspek toko Anda dan melihat hasilnya langsung dalam pratinjau waktu nyata.

Untuk mengakses Penyesuai WordPress, buka Penampilan → Sesuaikan di dasbor WordPress Anda:

Selain pengaturan khusus WooCommerce di sini, Astra juga menyertakan opsi untuk membantu Anda menyesuaikan aspek lain dari situs Anda seperti font, warna, logo, dan lainnya.

Untuk penjelasan lengkap tentang pengaturan ini, Anda dapat membaca dengan teliti artikel dukungan pengaturan Customizer. Namun, untuk tutorial ini, kami akan fokus secara khusus pada integrasi WooCommerce Astra.

Ini memungkinkan Anda mengontrol aspek toko Anda seperti:

• Cara kerja halaman daftar produk Anda
• Upsell di halaman keranjang belanja Anda
• Gambar produk Anda
• Pengaturan kecil lainnya

Sebagian besar pengaturan WooCommerce terletak di dua area utama.

Pengaturan WooCommerce

Untuk mengakses serangkaian opsi, buka WooCommerce di sidebar WordPress Customizer. Di sini, Anda akan melihat area berikut:

• Katalog Produk – memungkinkan Anda mengontrol berapa banyak produk yang akan ditampilkan di halaman toko Anda, serta informasi apa yang akan ditampilkan dan berapa banyak kolom produk yang akan ditampilkan.
• Produk Tunggal – memungkinkan Anda menonaktifkan remah roti.
• Keranjang – memungkinkan Anda mengaktifkan peningkatan produk di halaman keranjang Anda. Upsells dapat membantu meningkatkan penjualan Anda dengan menampilkan produk yang ditargetkan terkait dengan produk yang sudah ada di keranjang pengguna.
• Pemberitahuan Toko – memungkinkan Anda mengaktifkan pemberitahuan di seluruh toko dan menyesuaikan teksnya.

Misalnya, jika Anda mengaktifkan Pemberitahuan Toko , Anda akan mendapatkan spanduk pemberitahuan di seluruh situs yang bagus ini:

Fitur ini sangat bagus untuk mempromosikan penjualan atau penawaran khusus.

Mengubah Kolom Toko menjadi 4 menambahkan produk lain di setiap baris:

Di luar bagian WooCommerce , Anda juga dapat menemukan pengaturan WooCommerce di:

• Global → Container – memungkinkan Anda mengontrol lebar area yang ditempati halaman WooCommerce Anda.
• Sidebar – memungkinkan Anda mengontrol lokasi sidebar Anda di halaman WooCommerce. Misalnya, dengan mengubahnya dari Kiri ke Kanan , daftar kategori produk Anda akan bergeser ke sisi kanan

Langkah-langkah membangun Website WooCommerce Dengan Tema Elementor & Astra.

Bagian 2: Gunakan Pembuat Halaman Elementor untuk Menyesuaikan Halaman Toko Anda

Astra membantu Anda menyesuaikan halaman toko dan produk Anda, serta menu navigasi dan sidebar Anda.

Tetapi ketika datang untuk mengutak-atik halaman Beranda dan Tentang Kami, di situlah plugin pembuat halaman Elementor gratis masuk.

Untuk mengedit beranda Anda, klik Edit dengan Elementor . Elementor memudahkan untuk:

• Ubah teks dan gambar
• Pindahkan elemen desain menggunakan seret dan lepas
• Tambahkan elemen desain baru

Misalnya, untuk mengedit judul di beranda Anda, Anda cukup mengklik dan mengetik:

Jika Anda memerlukan bantuan menggunakan pembuat halaman Elementor untuk mengedit halaman inti toko Anda, video Elementor 101 resmi adalah tempat yang bagus untuk belajar tentang Elementor. Jika Anda seorang pemula, maka Anda harus terbiasa dengan pembuat halaman Elementor terlebih dahulu.

Tahukah Anda bahwa Anda dapat membuat seluruh keranjang belanja, halaman checkout, halaman akun pelanggan, dan banyak lagi hanya dengan menggunakan kode pendek?

Berikut seluruh daftar Shortcode WooCommerce yang dapat Anda jelajahi.

Tema WooCommerce Elementor Terbaik

Ada banyak tema WordPress dan banyak di antaranya yang kompatibel dengan Elementor dan WooCommerce.

Meskipun kami belum mencantumkan semuanya di sini, kami telah menyebutkan beberapa tema WooCommerce Elementor teratas. Memilih salah satu dari ini akan memberikan pengalaman yang Anda cari.

1. Astra

Dengan lebih dari satu juta penginstalan dan menjadi satu-satunya tema WordPress non-default yang mencapai tanda ini, kami tahu satu atau dua hal dalam membuat tema berperforma tinggi dan dioptimalkan yang mengonversi.

Astra adalah tema WordPress ringan yang menawarkan integrasi dengan Elementor dan WooCommerce. Selain itu, Astra hadir dengan situs demo WooCommerce siap pakai yang dapat dengan mudah disesuaikan menggunakan Elementor.

Menggunakan Astra, Anda mendapatkan:

• Toko yang jauh lebih cepat yang membantu meningkatkan tingkat konversi
• Keranjang tarik-turun yang memungkinkan pengguna melihat keranjang mereka dari hampir semua halaman
• Proses checkout yang dioptimalkan untuk konversi, sehingga mengurangi tingkat pengabaian keranjang
• Tarik perhatian pengguna dengan gelembung penjualan yang membantu meningkatkan penjualan
• Situs yang sepenuhnya responsif yang berfungsi dengan baik di semua perangkat
• Toko yang dapat disesuaikan tanpa harus menulis satu baris kode pun

Ingin lebih banyak fitur?

Upgrade ke Astra Pro dan dapatkan fitur tambahan WooCommerce seperti:

• Gulir tak terbatas yang secara dinamis memuat produk Anda saat pengguna terus menggulir
• Opsi pembayaran tambahan untuk meningkatkan pengalaman pengguna, seperti pembayaran dua langkah, pembayaran bebas gangguan, dan banyak lagi
• Lebih banyak pilihan tampilan produk dan galeri yang dapat disesuaikan dengan mudah. Opsi untuk membuka gambar di lightbox juga tersedia
• Fitur tampilan cepat produk memungkinkan pengguna untuk melihat detail produk tanpa mengunjungi halaman detail produk. Ini membantu meningkatkan tingkat konversi
• Bilah samping di luar kanvas untuk filter produk

2. Halo Elementor + Pembuat Tema

Elementor adalah plugin pembuat halaman WordPress yang sangat populer dan memiliki beberapa tema sendiri yang mungkin ingin Anda periksa.

Template bekerja sangat baik dengan WooCommerce dan dapat dikustomisasi dengan mudah menggunakan Elementor WooCommerce Builder.

Menggunakan widget WooCommerce khusus seperti harga, tombol add-to-cart, dan fitur di Elementor Theme Builder, Anda dapat mendesain toko dan halaman produk sesuai keinginan Anda.

3. Hasilkan Tekan

GeneratePress adalah tema WordPress populer lainnya yang kompatibel dengan WooCommerce.

Menggunakan penyesuai WordPress, pengaturan GeneratePress WooCommerce memungkinkan Anda untuk mengonfigurasi apa saja, seperti keranjang tarik-turun, mode checkout bebas gangguan, dan banyak lagi.

Meskipun tema GeneratePress tersedia gratis di WordPress, untuk mengakses pengaturan WooCommerce, Anda memerlukan GeneratePress Premium.

4. Tidak pernah

Neve adalah tema WordPress siap WooCommerce yang hadir dengan beberapa situs web demo siap pakai yang didukung oleh Elementor.

Versi gratis Neve menawarkan kompatibilitas WooCommerce lengkap. Untuk lebih banyak integrasi WooCommerce, Anda mungkin ingin mempertimbangkan versi Pro.

Versi Neve Pro dikemas dalam modul penguat WooCommerce yang memungkinkan Anda menyesuaikan halaman toko, produk, dan checkout Anda.

5. OceanWP

Dengan 700.000+ instalasi aktif, OceanWP adalah tema WordPress populer yang hadir dengan banyak fitur bawaan untuk toko WooCommerce.

Anda memiliki situs demo WooCommerce siap pakai yang semuanya didukung oleh Elementor.

Beberapa fitur tambahan untuk WooCommerce meliputi:

• Tampilan cepat produk
• Keranjang belanja tarik-turun
• Tombol add-to-cart mengambang
• Proses checkout bebas gangguan

OceanWP memberi Anda banyak opsi penyesuaian dan kompatibel dengan Elementor.

Kapan Harus Mempertimbangkan Menjadi Pro Dengan Astra

Baik Astra dan Elementor menawarkan versi pro yang dapat menambahkan fungsionalitas ke toko WooCommerce Anda.

Fungsi ini tidak hanya menarik – ia menambahkan fitur yang dapat membuat efek nyata pada keuntungan toko Anda dengan mempermudah pengunjung untuk berbelanja produk Anda, serta memberi Anda opsi untuk mengontrol halaman checkout toko Anda:

• Gulir tak terbatas untuk produk: Lebih banyak produk dimuat secara otomatis saat pengunjung menggulir ke bawah halaman. Penelitian dari Baymard Institute menunjukkan bahwa pembeli eCommerce cenderung melihat lebih banyak produk dengan scroll tak terbatas, yang sangat bagus jika toko Anda memiliki katalog yang dalam.
• Sidebar Off-Canvas: Ini memungkinkan Anda menambahkan filter bermanfaat tanpa menghalangi penjelajahan pembeli Anda. Pemfilteran kualitas adalah aspek penting dari setiap toko eCommerce. Selesai dengan benar, ini memungkinkan pelanggan Anda dengan cepat menemukan produk yang tepat sehingga mereka dapat melakukan pembelian.
• Tampilan Cepat Produk: Pembeli dapat mengklik tombol Tampilan Cepat saat mereka mengarahkan kursor ke produk untuk melihat informasi lebih lanjut tentang produk tersebut. Ini memungkinkan mereka melihat detail penting tanpa mengharuskan mereka memuat halaman baru, yang dapat membuat pengalaman berbelanja menjadi lebih mudah.
• Opsi checkout lainnya: Anda dapat menambahkan checkout bebas gangguan, atau mengaktifkan proses checkout dua langkah. Anda juga dapat memilih apakah akan mengaktifkan bidang kupon atau tidak, serta beberapa pengaturan kecil lainnya. Semua opsi ini membantu Anda mengubah proses checkout untuk memastikan bahwa tingkat pengabaian keranjang Anda serendah mungkin.
• Label putih: Jika Anda membangun toko untuk klien, fitur ini memungkinkan Anda menghapus semua merek Astra dari dasbor WordPress untuk menawarkan produk akhir yang lebih disesuaikan.

Di mana Astra Pro memberi Anda akses ke fitur dan fungsionalitas e-commerce yang luas dan unik, Astra Essential Bundle dan Growth Bundle memungkinkan Anda menggunakan situs web premium siap pakai yang memiliki tag “Premium” dari perpustakaan situs web awal.

Elementor vs. Elementor Pro: Kapan Upgrade

Versi gratis Elementor berfungsi dengan baik. Baik Anda baru memulai atau pengembang situs WordPress berpengalaman, Elementor menawarkan berbagai kemungkinan desain.

Namun, jika Anda mencari lebih banyak alat dan fitur untuk meningkatkan konversi dan penjualan, selalu ada Elementor Pro.

Meskipun kami lebih fokus pada aspek WooCommerce dan Elementor dalam tabel perbandingan di bawah ini, berikut adalah beberapa perbedaan signifikan antara Elementor dan Elementor Pro.

1. Sementara pembuat tema memungkinkan Anda untuk menyesuaikan setiap bagian dari tema Anda, pembuat tema Elementor Pro memungkinkan Anda untuk melampaui batasan tema. Menggunakan Elementor, Anda dapat mendesain berbagai elemen situs web Anda secara visual, seperti header, footer, halaman arsip, posting tunggal, dan banyak lagi. Apakah ini melibatkan pengkodean? Sama sekali tidak! Dan ini berfungsi di hampir semua tema WordPress.
   
2. Bagaimana cara membuat formulir kontak? Kami menebaknya dengan menginstal plugin formulir kontak seperti Formulir WP, Formulir Ninja, Formulir Kontak 7, dan banyak lagi. Meskipun semua ini adalah opsi yang bagus, widget formulir Elementor Pro memberi Anda fleksibilitas yang sama. Rancang formulir Anda dengan cepat dan atur peringatan dan pemberitahuan khusus. Ingin mengintegrasikan beberapa alat otomatisasi atau CRM? Widget Formulir Elementor Pro memungkinkan Anda melakukannya hanya dengan beberapa klik.
   
3. Sudahkah Anda menggunakan templat dan blok profesional di perpustakaan Elementor? Jika sudah, Anda akan tahu bahwa ada lebih banyak opsi yang tersedia di versi Pro. Dengan menggunakan templat dan blok yang dirancang secara profesional ini, Anda dapat dengan mudah menyesuaikannya untuk membuat halaman arahan yang menakjubkan, halaman web, tajuk utama animasi, formulir, dan banyak lagi.

Selain hal di atas, inilah mengapa Anda dapat mempertimbangkan untuk menggunakan versi Elementor Pro, terutama jika Anda memiliki toko online.

WooCommerce, Astra, dan Elementor: Lebih Baik Bersama

Gabungkan semuanya dan WooCommerce, Astra, dan Elementor adalah ancaman rangkap tiga yang memungkinkan Anda membangun toko eCommerce yang sepenuhnya khusus dalam waktu singkat tanpa menulis satu baris kode pun.

Ingat, yang perlu Anda lakukan hanyalah:

• Instal dan konfigurasikan WooCommerce
• Impor situs demo Astra
• Sesuaikan toko Anda melalui pengaturan Penyesuai waktu nyata Astra
• Edit beranda Anda dan halaman inti lainnya dengan pembuat halaman Elementor

Sekarang keluarlah dan mulailah menjual produk Anda!