Ikon situs Stasiun Gambar

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!

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:

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:

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:

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:

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:

Saat mengedit tata letak, Anda dapat beralih untuk melihat produk lain dengan menggunakan fitur Pratinjau Sebagai: 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:

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:

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.

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:

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:

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!

Keluar dari versi seluler