Panduan Lengkap WooCommerce Block

WooCommerce adalah salah satu plugin populer untuk membangun situs e-commerce di WordPress. WooCommerce Blocks adalah salah satu plugin di WooCommerce, yang dirancang untuk memudahkan pengguna membuat toko online di WordPress. WooCommerce Blocks membantu dalam membuat halaman toko yang dipersonalisasi, menampilkan produk Anda, dan menambahkan fitur e-commerce canggih seperti pemfilteran dan pencarian produk – semuanya tanpa menulis satu baris kode pun. 

Anda harus menginstal plugin WordPress WooCommerce Blocks untuk menggunakan blok-blok baru ini. Plugin ini merupakan tempat pengujian untuk fitur-fitur eksperimental yang mungkin akan ditambahkan ke inti WooCommerce.

Dalam panduan praktis ini, kita akan membahas fitur-fitur blok WooCommerce dan cara menyesuaikannya. 

Apa itu WooCommerce Block?

WooCommerce Blocks adalah kumpulan blok yang terintegrasi dengan editor blok WordPress (Gutenberg) yang memungkinkan Anda dengan mudah menambahkan berbagai fitur dan fungsionalitas WooCommerce ke halaman dan pos Anda. Tanpa menulis kode, blok-blok ini memungkinkan Anda menampilkan produk, kategori produk, filter pencarian, keranjang belanja, checkout, dan lainnya.

Dengan kata lain, WooCommerce Blocks adalah komponen siap pakai yang dapat Anda sisipkan ke situs WordPress Anda menggunakan editor blok, memberikan cara mudah untuk menambahkan fungsionalitas e-commerce yang didukung oleh WooCommerce. Ini merupakan bagian dari plugin inti WooCommerce, sehingga Anda mendapatkannya secara otomatis saat menginstal dan mengaktifkan WooCommerce di situs WordPress Anda.

Selain itu, semuanya terintegrasi secara mulus dengan editor blok WordPress, memungkinkan Anda membuat halaman produk khusus, tata letak kategori, dan pengalaman berbelanja menggunakan antarmuka seret dan lepas yang familier.ext here ...

Daftar Fitur WooCommerce Block

Setelah memahami apa itu blok WooCommerce, selanjutnya kita akan membahas setiap fitur yang disediakan satu per satu:

• Semua Produk: Menampilkan semua produk toko dalam format kisi.
• Filter Produk Aktif: Menampilkan filter produk aktif dalam bentuk daftar atau chip (mirip dengan tombol).
• Semua Ulasan: Menampilkan semua ulasan produk.
• Produk Terlaris: Menampilkan produk terlaris dalam format kisi.
• Checkout: Menampilkan formulir yang memungkinkan pelanggan menyelesaikan pesanan mereka.
• Keranjang: Menampilkan keranjang belanja.
• Kategori Unggulan: Menyoroti kategori produk tertentu beserta tombol ajakan bertindak.
• Produk Unggulan: Menampilkan produk unggulan terpilih.
• Filter berdasarkan harga: Menampilkan rentang harga yang dapat digunakan pelanggan untuk memfilter produk. Anda juga dapat mengaktifkan rentang harga yang dapat diedit dengan mengklik tombol atau teks di sini.
• Filter berdasarkan stok: Memungkinkan penyaringan produk berdasarkan status ketersediaan stok. Fitur ini menyediakan opsi untuk menampilkan produk yang tersedia, habis, atau sedang dipesan ulang.
• Filter berdasarkan rating: Memungkinkan pelanggan memfilter produk berdasarkan rating.
• Filter berdasarkan atribut: Memfilter produk berdasarkan ukuran atau warna.
• Produk pilihan: Menampilkan produk pilihan dalam format kisi, memungkinkan Anda memilih produk mana yang akan ditampilkan secara khusus.
• Keranjang mini: Memberikan tampilan singkat keranjang belanja.
• Produk terbaru: Menampilkan produk paling baru yang disusun dalam format kisi. Produk-produk ini dapat disesuaikan dengan menambahkan/menghapus elemen seperti judul, harga, rating, dan tombol beli.
• Produk diskon: Menampilkan produk yang sedang diskon dalam format kisi dan dapat disesuaikan dengan menambahkan/menghapus elemen seperti judul, harga, rating, dan tombol beli.
• Pencarian produk: Menambahkan bilah pencarian untuk memudahkan pelanggan mencari produk.
• Produk berdasarkan tag: Menampilkan produk dengan tag/label tertentu dalam format kisi.
• Produk berdasarkan atribut: Menampilkan produk dengan atribut tertentu (warna, ukuran, dll.) dalam format kisi.
• Produk berdasarkan kategori: Menampilkan produk berdasarkan kategori dalam format kisi.
• Ulasan berdasarkan produk: Menampilkan ulasan yang dikelompokkan berdasarkan produk.
• Ulasan berdasarkan kategori: Menampilkan ulasan produk dari kategori tertentu.
• Produk tunggal: Menampilkan tampilan detail untuk satu produk.
• Produk dengan peringkat teratas: Menampilkan produk dengan peringkat tertinggi dalam format kisi.

Cara menggunakan blok grid produk di WooCommerce

Selain mempelajari fitur-fitur yang tersedia di blok WooCommerce, mari kita coba menggunakan atau menambahkan grid produk di WooCommerce. Pastikan Anda telah menginstal plugin blok WooCommerce di situs web Anda. Berikut cara menambahkannya:

1. Buka halaman atau pos tempat Anda ingin menampilkan kisi produk, lalu masukkan judul "Produk".

2. Pada navigasi kiri, klik tombol (+) > gulir ke bawah ke bagian WooCommerce > pilih "kisi produk".

3. Selanjutnya, untuk mengonfigurasi blok, buka panel kanan.

Di panel ini, Anda dapat menyesuaikan beberapa hal, termasuk:

• Pengaturan tata letak: Anda dapat menyesuaikan jumlah baris dan kolom yang ditampilkan di grid produk. Misalnya, atur keduanya menjadi 2 untuk tampilan yang seimbang.
• Pengaturan konten: Anda dapat menampilkan menu dropdown untuk mengurutkan produk. Fitur ini memungkinkan pelanggan mengurutkan produk sesuai preferensi mereka. Anda dapat menonaktifkannya jika tidak diperlukan.
• Gaya lanjutan: Anda dapat menambahkan kelas CSS untuk menyesuaikan tampilan.

Cara menambahkan produk unggulan ke halaman Anda

Blok Produk Unggulan memungkinkan Anda menampilkan produk tertentu di halaman atau pos Anda. Dengan blok ini, Anda dapat memilih produk, menyesuaikan tampilannya, dan menempatkannya dalam konten Anda untuk menarik pengunjung ke item yang ingin Anda promosikan.

Untuk menambahkan Blok Produk Unggulan, ikuti langkah-langkah berikut:

1. Buka halaman atau pos tempat Anda ingin menambahkannya. Misalnya, jika Anda menempatkannya di atas grid produk, buat ruang di area tersebut dan klik tombol "+" yang muncul.

2. Pilih tombol "+" pada toolbar blok untuk membuka daftar blok, lalu cari dan pilih "Produk Unggulan".

3. Pilih produk yang ingin Anda soroti, lalu klik "Selesai".
4. Untuk menyesuaikan tampilan blok, klik "Pengaturan". Di panel pengaturan, Anda dapat menyesuaikan beberapa hal termasuk:

• Tampilkan atau sembunyikan deskripsi dan harga produk.
• Konfigurasikan tampilan media (gambar dan video).
• Tambahkan teks alternatif untuk gambar produk.
• Pilih warna overlay blok.
• Sesuaikan opasitas blok.

5. Setelah menyesuaikan, Anda dapat menerbitkan atau memperbarui halaman untuk melihat tampilan blok produk unggulan Anda.

Cara menambahkan blok filter di WooCommerce

Blok Filter WooCommerce memudahkan pelanggan menemukan produk yang sesuai dengan kriteria pencarian mereka. Dengan menyediakan opsi penyaringan, pelanggan dapat dengan cepat mempersempit hasil pencarian ke produk yang relevan bagi mereka.

Untuk menambahkan blok filter, ikuti langkah-langkah berikut:

1. Buka halaman atau pos tempat Anda ingin menempatkan blok filter.
2. Tentukan lokasi yang diinginkan untuk menempatkan blok filter.
3. Pada toolbar editor blok, klik tombol "+" dan cari opsi filter WooCommerce seperti Filter Harga, Filter Stok, Filter Atribut, dan Filter Rating.

Sekarang, mari kita bahas setiap jenis filter yang tersedia. 

Menambahkan filter berdasarkan harga

Blok Produk Filter Harga memungkinkan Anda menambahkan fitur penyaringan yang memungkinkan pengguna memilih rentang harga yang diinginkan. Rentang harga dapat ditampilkan sebagai tombol yang dapat diedit atau teks biasa. Anda dapat menambahkan tombol jika diinginkan dan menyesuaikan tingkat judulnya.

Menambahkan filter berdasarkan atribut

Blok Filter Atribut Produk memungkinkan pengguna untuk memfilter produk berdasarkan atribut seperti warna dan ukuran. Anda dapat memilih atribut yang ingin digunakan dari daftar yang tersedia. Tampilannya dapat berupa daftar atau menu dropdown. Anda juga dapat mengonfigurasi jenis kueri menjadi AND atau OR. Fitur lainnya termasuk menampilkan jumlah produk, memilih tingkat heading, menambahkan tombol, dan memilih filter.

Menambahkan filter berdasarkan stok

Blok Filter Produk Berdasarkan Status Stok memungkinkan pengguna untuk menampilkan produk berdasarkan status ketersediaannya. Mereka dapat menampilkan produk yang tersedia (stok tersedia), stok habis (stok habis), atau dalam pemesanan ulang. Anda juga dapat mengonfigurasinya untuk menampilkan jumlah produk, memilih tingkat judul, dan menambahkan tombol. Blok ini dapat digunakan dengan blok WooCommerce lainnya, seperti Semua Produk. Sayangnya, blok ini tidak menyediakan pratinjau saat ditambahkan ke halaman.

Blok Keranjang dan Checkout

Blok keranjang belanja menambahkan tampilan keranjang belanja ke halaman Anda. Anda dapat menyertakan kalkulator biaya pengiriman, memilih tautan untuk tombol checkout, dan mengatur tampilan mode gelap. Blok ini juga memberikan notifikasi bahwa Anda dapat menetapkan halaman tersebut sebagai halaman keranjang belanja default di pengaturan WooCommerce. Tautan untuk memberikan umpan balik juga disertakan.

Sementara itu, blok checkout menyediakan formulir checkout untuk keranjang belanja Anda. Anda akan diberi tahu bahwa halaman ini dapat diatur sebagai halaman checkout default di pengaturan WooCommerce. Ada juga opsi untuk tampilan mode gelap. Blok ini terdiri dari beberapa elemen yang dapat Anda sesuaikan satu per satu. Sayangnya, blok ini tidak menyediakan pratinjau setelah ditambahkan ke halaman.

Cara Menyesuaikan Halaman Toko di WooCommerce

Setelah mempelajari cara menggunakan berbagai Blok WooCommerce, Anda dapat menggabungkan beberapa blok untuk membuat halaman toko kustom yang ramah pengguna. Untuk membuat tata letak halaman toko khusus ini, ikuti langkah-langkah berikut.

1. Buat halaman baru dan beri nama "Toko".

2. Tambahkan Product Search block.

3. Tambahkan blok Daftar Kategori Produk

Kemudian, atur gaya tampilan ke dropdown.

4. Tambahkan blok Price Filter .
5. Tambahkan blok Featured Products dan pilih produk yang ingin Anda sorot. Konfigurasikan sesuai kebutuhan.

6. Tambahkan blok Semua Produk .

Atur jumlah kolom dan baris menjadi 2, dan matikan opsi dropdown pengurutan.

7. Terakhir, publikasikan halaman untuk melihat tata letak akhir halaman toko yang telah Anda buat.

Bangun Toko Online Anda dengan WooCommerce Block & Jual Produk Anda

Setelah berhasil membuat halaman toko kustom dengan WooCommerce Blocks, Anda sekarang dapat mulai menjual produk fisik dan digital Anda. Khusus untuk produk digital, sangat penting untuk menambahkan plugin unduhan file seperti WP File Download Addon.

Plugin ini memungkinkan Anda menjual produk unduhan digital di WooCommerce. WP File Download Addon memudahkan pengelolaan file dan kategori file untuk produk digital WooCommerce. Anda dapat dengan cepat membuat banyak produk unduhan digital yang terkait dengan satu atau beberapa file.

Selain itu, plugin ini terintegrasi dengan Dropbox, Google Drive, Microsoft OneDrive, dan fitur Social Locker . Anda dapat menyediakan file dari layanan cloud ini sebagai unduhan digital WooCommerce dengan akses yang sangat terbatas melalui konektor API cloud.

Dengan Addon WP File Download , menjual produk digital di toko online WooCommerce Anda menjadi lebih mudah diakses dan efisien. Setelah membangun toko Anda dengan WooCommerce Blocks, plugin ini sangat melengkapi penjualan konten digital Anda.

Kesimpulan

WooCommerce Blocks adalah plugin yang memungkinkan Anda membangun toko online lengkap di WordPress tanpa menulis kode. Dengan berbagai blok, seperti kisi produk, filter, dan tampilan produk unggulan, Anda dapat dengan mudah membuat pengalaman berbelanja yang menarik dan ramah pengguna. Antarmuka drag-and-drop yang familiar membuat pengembangan toko online lebih cepat dan efisien.

Setelah membangun toko online Anda, langkah selanjutnya adalah menjual produk fisik dan digital. Anda dapat memanfaatkan plugin WP File Download Addon untuk menjual produk digital dengan WooCommerce, seperti ebook, perangkat lunak, atau konten multimedia.

Addon WP File Download tersedia mulai dari $49 per tahun dan telah digunakan oleh lebih dari 60.000 anggota. Jadi, apa yang Anda tunggu? Bergabunglah dengan kami untuk penjualan produk digital yang lebih baik!