Beaver Builder WooCommerce Integration 2024– Bagaimana Cara Menggunakan Beaver Builder untuk Membangun Produk WooCommerce dan Halaman Toko?

Ini bisa menarik untuk membuat toko online. Ini berkontribusi pada kesuksesan bisnis Anda untuk memiliki etalase yang bagus. Namun, jika Anda ingin mendesain toko yang berfungsi dengan baik, Anda mungkin kesulitan.

Situs eCommerce yang menyenangkan Anda dan pelanggan Anda dapat dibuat dengan bantuan pembuat halaman WooCommerce. Mari kita lihat WooCommerce plug-in. Langkah kami selanjutnya adalah menunjukkan betapa mudahnya membuat toko online Anda dengan Beaver Builder. Ayo, mari kita mulai!

pembangun berang-berang

Pengantar Singkat WooCommerce

Dengan WooCommerce, Anda bisa tambahkan fungsionalitas eCommerce ke situs WordPress Anda sehingga Anda dapat menjual produk Anda secara online:

Selain itu, Anda akan menemukan diri Anda di perusahaan yang baik, karena WooCommerce diproyeksikan memiliki pangsa pasar sekitar 28 persen pada tahun 2020.

WooCommerce adalah sumber terbuka, solusi yang sangat dapat disesuaikan, sama seperti WordPress. Dengannya, Anda dapat mengatur gateway pembayaran dan opsi pengiriman yang berbeda, dan segera memulai kerajaan eCommerce Anda.

Menggunakan WooCommerce, Anda juga dapat membuat, mengedit, dan mengelola produk Anda:

Menggunakan plugin add-on WooCommerce memberi Anda akses ke banyak fitur lainnya.  

Membangun Toko WooCommerce dan Halaman Produk dengan Beaver Builder (Dalam 4 Langkah Mudah)

Namun, sebelum Anda dapat memahami fitur-fitur WooCommerce, Anda harus terlebih dahulu meluncurkan situs web. Mulailah dengan menginstal dan mengaktifkan plugin WordPress WooCommerce, Beaver Builder, dan Beaver Themer. Sekarang Anda siap untuk membuat halaman produk dan toko Anda.

Langkah 1: Buat toko Anda dengan menambahkan produk

Buat listingan untuk produk Anda sebagai langkah pertama untuk menyiapkan toko Anda. Saat Anda menggunakan WooCommerce, Anda dapat menjual barang fisik, barang digital, dan barang dengan variasi (seperti ukuran dan warna).

Anda dapat menginstal contoh set produk yang disediakan oleh WooCommerce untuk memahami bagaimana sistem bekerja dengan berbagai jenis item jika Anda baru mengenal WooCommerce. Beberapa fitur produk WooCommerce dijelaskan di sini, termasuk variasi dan opsi penjualan.

Anda akan belajar cara membuat produk dasar, jika Anda ingin memulai dari awal. Tidak peduli apa yang Anda rencanakan untuk dijual, bagian lain dalam posting ini akan menguntungkan Anda.

Buat produk baru di dasbor WordPress Anda. Pilih Produk > Tambah Baru di menu sebelah kiri. Isi kolom berikut untuk item yang ingin Anda tambahkan ke toko Anda:

Anda dapat mengatur sebagian besar parameter penting untuk item Anda dengan menggulir ke bawah ke panel data Produk, termasuk harga, pajak, dan pengiriman. Di WooCommerce, Anda memiliki opsi untuk memasukkan pajak dan opsi pengiriman untuk produk, yang dapat diganti secara individual.

Putuskan apakah produk Anda dapat diunduh atau virtual di pengaturan Umum. Biarkan kotak tidak dicentang jika produk adalah produk fisik:

Selain manajemen inventaris, Anda bisa mulai. Menghubungkan produk memberi Anda pilihan untuk melakukan cross-sell dan up-sell.

Anda juga dapat menambahkan deskripsi kedua yang lebih singkat tentang item Anda di bawah bidang Deskripsi singkat Produk, di bawah panel data Produk. Cantuman etalase biasanya berisi informasi ini.

Anda akan melihat kategori dan tag produk di sebelah kanan layar Anda. Berikut adalah beberapa penyelenggara yang membantu:

Daftar produk Anda harus menyertakan satu atau dua gambar. Opsi berikut tersedia: gambar tunggal atau grup gambar:

Anda dapat mengunggah foto dari perangkat Anda atau menambahkan gambar dari Perpustakaan Media Anda. Dengan cara yang sama, Anda dapat menambahkan gambar ke galeri produk. Gambar dapat dengan mudah diseret dan dijatuhkan untuk menyusun ulang.

Langkah 2: Rancang Halaman Produk Baru

Untuk menampilkan produk Anda, Anda dapat membuat halaman produk. Tutorial video Beaver Themer memberikan petunjuk langkah demi langkah tentang cara menyesuaikan halaman produk tunggal WooCommerce. 

Beaver Themer adalah alat yang ampuh untuk memperluas Beaver Builder menjadi pembuat halaman WooCommerce. Anda dapat menerapkan template ke seluruh situs Anda dengan add-on ini.  

 Klik Tata Letak Tema > Tambahkan Baru di Beaver Builder:

Menambahkan tata letak tema dengan pengaturan produk untuk membantunya bertindak sebagai pembuat halaman WooCommerce.

Tata letak Anda harus memiliki judul. Anda harus memilih tata letak dan jenis Anda sebelum mengklik tombol Tambahkan Tata Letak Tema.

Lanjutkan untuk memastikan desain baru diterapkan ke setiap halaman produk saat Anda melanjutkan ke halaman berikutnya. Di kotak kedua, pilih Semua Produk di bawah Lokasi, lalu pilih Produk:

Pengaturan tata letak Themer yang benar untuk menggunakan Beaver Themer sebagai pembuat halaman WooCommerce.

Anda dapat mengedit tata letak Anda dengan Beaver Builder setelah menyimpan pekerjaan Anda. Mulai dari sudut kanan atas, klik tanda plus biru. Setelah Anda mengklik Template, klik New:

Lokasi template produk WooCommerce di Beaver Thermer.

Ganti tata letak yang ada dengan memilih Produk > Ganti Tata Letak yang Ada. Beberapa default yang berguna sudah tersedia, yang mengubah template Anda menjadi halaman produk:

Templat produk default Beaver Builder

Menambahkan atau menghapus modul WooCommerce dari tata letak dasar Anda dimungkinkan setelah Anda memilikinya. Modul WooCommerce dapat diakses melalui Modules > Theme Modules > WooCommerce. Selain peringkat produk, deskripsi, peningkatan penjualan, dan banyak lainnya, Anda akan memiliki banyak opsi:

Menggunakan modul WooCommerce

Saat mengedit tata letak, Anda dapat beralih untuk melihat produk lain dengan menggunakan fitur Pratinjau Sebagai: di Beaver Builder:

Mempratinjau berbagai produk di Beaver Builder

Dengan fitur itu, Anda dapat melihat bagaimana setiap produk Anda terlihat saat Anda melihatnya. Publikasikan halaman produk Anda setelah Anda puas dengan desain dan modul yang disertakan. Halaman produk tunggal Anda sekarang akan ditata dalam format baru.

Langkah 3: Buat Halaman Toko WooCommerce

Saatnya memberi halaman toko perlakuan yang sama dengan produk WooCommerce Anda. Tata letak toko WooCommerce default sangat sederhana dan tidak terlalu menarik:

Tata letak toko default WooCommerce

Saat mendesain halaman Toko Anda, Beaver Themer adalah pilihan yang lebih baik. Mulailah dengan masuk ke WooCommerce > Pengaturan, klik tab produk, dan pastikan halaman Toko mengarah ke Toko atau halaman kustom lainnya yang telah Anda buat. Ini menampilkan produk Anda sebagai halaman arsip jika Anda menentukannya.

Pilih Themer Layouts > Add New di Beaver Builder > Theme Builder lalu klik Add New. Pilih opsi Tata Letak Tema di bawah Ketik di layar berikutnya:

Membuat tata letak halaman toko

Layar berikut akan memungkinkan Anda untuk memilih lokasi Arsip Produk. Produk toko Anda akan ditampilkan di halaman Toko dan halaman kategori produk. Jika perlu, Anda dapat memodifikasinya.

Menyesuaikan halaman arsip produk

Dengan mengklik Launch Beaver Builder, Anda akan dapat menyesuaikan tata letak Anda. Halaman berikut muncul ketika Anda mengklik tanda plus di bagian atas layar dan kemudian mengklik Template:

Menggunakan template Beaver Builder

Halaman toko baru dapat dengan mudah dibuat menggunakan template Produk. Dengan menggunakan semua alat yang telah kami bahas hingga saat ini, Anda dapat membuat perubahan pada template setelah dibuat. 

Pastikan tata letak toko Anda sesuai dengan pengaturan gaya modul Postingan dengan menyesuaikannya hingga pas. 

Di bagian atas layar, klik Selesai > Publikasikan setelah perubahan disimpan ke modul. 

Hal terakhir yang perlu Anda lakukan adalah memastikan bahwa halaman apa pun yang Anda tetapkan sebagai halaman Toko Anda muncul di menu navigasi situs Anda. Jika tidak, Anda dapat menambahkannya dari bagian Appearance > Menus di dashboard WordPress.

Langkah 4: Sesuaikan Halaman Toko Anda Lebih Lanjut Dengan Tata Letak WooCommerce

Modul WooCommerce juga merupakan fitur luar biasa dari Beaver Builder yang menjadikannya pembuat halaman WooCommerce yang luar biasa. Ini memungkinkan Anda untuk menambahkan bagian dari fungsionalitas WooCommerce ke struktur Beaver Builder apa pun di situs Anda. Opsi berikut tersedia dalam modul ini:

  • Produk tunggal dan ganda: 
  • Anda dapat menampilkan produk yang dipilih berdasarkan ID atau kategori produk, atau Anda dapat menampilkan produk yang sedang dijual, produk terbaru, produk dengan peringkat teratas, atau apa pun yang Anda inginkan.
  • Cart: Menampilkan isi keranjang belanja WooCommerce.
  • Checkout: Menampilkan halaman checkout seperti biasanya.
  • Pelacakan Pesanan: Memasukkan informasi tentang pesanan dalam formulir ini.
  • Akun Saya: Halaman ini berisi informasi yang biasanya ditemukan di halaman Akun Saya, seperti informasi akun, pesanan sebelumnya, dan detail alamat
Tata letak WooCommerce di Beaver Builder.

tautan langsung

Kesimpulan

Membuat toko online yang mewakili merek Anda secara efektif adalah upaya yang menantang. Namun, prosesnya dapat dibuat lebih mudah, dengan bantuan Beaver Builder, sebuah plugin untuk WooCommerce.

Seperti yang Anda lihat, kami telah menguraikan empat langkah penting untuk membangun etalase Anda menggunakan WooCommerce dan Beaver Builder:

  1. Buat toko dengan menambahkan produk.
  2. Desain halaman produk baru.
  3. Buat halaman toko WooCommerce baru.
  4. Dengan tata letak WooCommerce, Anda dapat menyesuaikan lebih lanjut situs eCommerce Anda.

Apakah ada yang ingin Anda ketahui tentang memanfaatkan Beaver Builder untuk membuat halaman produk dan toko? Silakan bagikan pemikiran Anda di bawah ini di bagian komentar!

Aishwar Babber

Aishwar Babber adalah seorang blogger dan pemasar digital yang bersemangat. Dia suka berbicara dan menulis blog tentang teknologi dan gadget terbaru, yang memotivasi dia untuk berlari Basis Gizmo. Dia saat ini mempraktikkan keahlian pemasaran digital, SEO, dan SMO sebagai pemasar penuh waktu di berbagai proyek. Dia adalah investor aktif di AfiliasiBay dan seorang direktur di ImageStation.

Tinggalkan Komentar