Cara Menyesuaikan Toko Online Anda dengan Blok WooCommerce

Diterbitkan: 2020-02-27

Editor Blok Gutenberg membuat WordPress semakin mudah diakses oleh pemilik situs dengan tingkat keahlian apa pun, memungkinkan Anda membuat halaman yang rumit dengan menyeret dan melepaskan blok konten. Dengan blok WooCommerce, Anda dapat memilih dan menampilkan produk, kategori, filter, dan lainnya secara virtual di mana saja di situs Anda — tidak perlu menggunakan kode pendek atau mengedit baris kode!

Mari kita lihat blok WooCommerce yang tersedia dan pelajari cara menggunakannya masing-masing.

Sebelum Anda mulai, perbarui WordPress dan WooCommerce ke versi terbaru. Catatan: Demo untuk posting ini dibuat dengan tema Storefront tetapi harus bekerja dengan tema ramah WooCommerce apa pun yang Anda pilih.

Kenali Blok WooCommerce

Anda dapat menempatkan Blok WooCommerce di mana pun Editor Blok diaktifkan: posting, halaman, dan jenis posting khusus. Mulailah dengan menavigasi ke halaman atau posting yang ingin Anda edit, lalu klik ikon Tambahkan Blokir (yang menyerupai simbol “tambah”) di sudut kiri atas.

tangkapan layar Editor Blok, menunjukkan cara menambahkan blok baru

Ini akan membuka menu dari semua blok yang tersedia. Perluas tab WooCommerce untuk melihat blok khusus untuk toko online Anda.

Kiat pro: Anda juga dapat dengan cepat menambahkan blok ke konten menggunakan pintasan keyboard `/`. Misalnya, Anda dapat melihat blok WooCommerce yang tersedia dengan mengetik `/woocommerce`.

Opsi Blok WooCommerce

Mengklik pada blok menambahkannya ke halaman Anda dan menampilkan berbagai opsi, yang berubah tergantung pada blok yang Anda pilih.

Blok produk

Blok produk memungkinkan Anda untuk menampilkan produk di dalam halaman dan memposting konten. Ini adalah cara yang bagus untuk menautkan ke produk yang direkomendasikan dalam posting blog, menampilkan produk terbaru Anda di halaman arahan, atau membuat halaman Toko khusus. Ada berbagai blok produk yang memenuhi kebutuhan tertentu dan dijelaskan lebih rinci di bawah ini:

Blok Produk Unggulan

Blok produk unggulan dengan judul, harga, dan tombol belanja sekarang

Ini adalah blok yang sepenuhnya dapat disesuaikan yang menyoroti satu produk. Anda dapat menampilkan judul dan harga produk dan menambahkan tombol untuk mendorong pembelian. Ada banyak pengaturan untuk overlay juga, termasuk:

  • Warna overlay
  • Opasitas latar belakang
  • Titik fokus gambar
  • Pemosisian latar belakang

Tambahkan Blok Produk Unggulan ke halaman arahan untuk menarik perhatian pelanggan Anda dan berfungsi sebagai ajakan bertindak, atau gabungkan langsung ke dalam posting blog sebagai tautan produk visual. Pilihannya tidak terbatas!

Semua Produk Blok

Blok Semua Produk, menampilkan produk dalam kotak

Blok Semua Produk menampilkan semua produk Anda. Ini berguna jika Anda ingin memasukkan konten lain — teks, gambar, video, dll. — di atas atau di bawah produk, dan merupakan cara yang bagus untuk membuat katalog visual. Ini mencakup opsi berikut:

  • Pengaturan tampilan:
    • Jumlah kolom dan baris — sesuaikan tata letak kisi produk
    • Sejajarkan tombol — atur tombol agar berada tepat di bawah konten atau sejajarkan
  • Pengaturan isi:
    • Tampilkan dropdown penyortiran — tampilkan atau sembunyikan dropdown dengan opsi penyortiran
    • Pesan produk menurut — pilih pesanan default untuk produk berdasarkan harga, peringkat, kebaruan, atau penjualan
    • Edit informasi yang ditampilkan untuk produk — hapus ulasan, tambahkan lencana obral, sertakan deskripsi, dan banyak lagi

Blok filter

Gabungkan blok filter dengan Blok Semua Produk untuk memungkinkan pengunjung situs mempersempit pencarian produk mereka. Saat pembeli memilih filter, produk secara otomatis diperbarui untuk memenuhi kriteria mereka, tanpa memuat ulang halaman. Ada tiga blok filter yang tersedia:

  • Filter menurut atribut, seperti warna atau ukuran
  • Filter menurut harga minimum dan maksimum
  • Tampilkan filter aktif yang dipilih

Contoh di bawah ini menggunakan ketiga blok:

produk ditampilkan dalam kotak di samping filter

Dengan menggabungkan blok-blok ini, Anda dapat membuat halaman toko yang menarik dan mudah dinavigasi hanya dalam beberapa menit.

Blok Produk Pilihan

produk pilihan tangan blok dalam kotak

Blok Produk yang Dipilih dengan Tangan memungkinkan Anda memilih produk yang ingin Anda tampilkan secara manual. Jika Anda menulis posting blog berjudul “Ide Hadiah Ulang Tahun,” Anda dapat menampilkan produk tertentu yang paling sesuai dengan topik itu langsung di dalam posting.

Setelah menambahkan blok, pilih produk tertentu dari daftar atau cari produk yang Anda cari.

tangkapan layar yang menunjukkan opsi untuk produk pilihan

Opsi untuk Blok Produk Pilihan meliputi:

  • Jumlah kolom — pilih hingga enam
  • Sejajarkan tombol — atur tombol agar berada tepat di bawah konten atau sejajarkan
  • Tampilkan atau sembunyikan:
    • Judul produk
    • harga produk
    • Peringkat produk
    • Tambahkan ke troli tombol

Produk berdasarkan Kategori Blok

Blok ini memungkinkan Anda untuk menampilkan produk dari kategori tertentu atau beberapa kategori. Ini sempurna untuk halaman arahan bertarget atau halaman kategori yang membutuhkan konten tambahan. Pengaturan meliputi:

  • Kategori produk — pilih kategori atau kategori yang akan ditampilkan
  • Jumlah kolom dan baris — sesuaikan tata letak kisi produk
  • Sejajarkan tombol — memungkinkan tombol untuk segera mengikuti konten atau menyelaraskannya secara vertikal
  • Menampilkan atau menyembunyikan:
    • Judul produk
    • harga produk
    • Peringkat produk
    • Tambahkan ke troli tombol
  • Dipesan oleh:
    • Kebaruan
    • Harga
    • Peringkat
    • Penjualan
    • Urutan menu

Contoh di bawah ini memiliki satu baris dan lima kolom dari kategori 'musik':

kisi produk dari kategori tertentu

Blok produk tambahan

Ada beberapa blok produk tambahan yang bekerja sangat mirip dengan yang disebutkan di atas:

  • Produk dengan Tag — menampilkan produk berdasarkan tag
  • Produk berdasarkan Atribut — menampilkan produk berdasarkan atribut
  • Produk Berperingkat Teratas — tampilkan produk dengan ulasan terbaik
  • Produk Dijual — tampilkan produk yang didiskon
  • Produk Terlaris — tampilkan produk terlaris Anda

Tinjau blok

Enam puluh tiga persen pelanggan lebih cenderung membeli produk dari situs dengan ulasan. Blok ulasan dapat membantu Anda menyoroti ulasan pelanggan di seluruh situs Anda untuk memberikan bukti sosial dan mendorong penjualan tergantung pada kebutuhan Anda.

ulasan tercantum dalam kolom

Semua Ulasan Blok

Semua Ulasan memblokir daftar ulasan dalam satu kolom

Ini adalah blok yang Anda butuhkan jika Anda ingin menampilkan semua ulasan produk Anda sekaligus. Anda dapat menggunakan blok ini untuk menyoroti ulasan di halaman beranda, menampilkannya di halaman arahan, atau membuat halaman khusus untuk testimonial. Pilihan meliputi:

  • Menampilkan atau menyembunyikan:
    • Judul produk
    • Peringkat produk
    • Nama pengulas
    • Gambar — gambar produk atau gravatar pengulas
    • Tanggal ulasan
    • Tinjau konten
  • Pesan berdasarkan — memberi pengguna opsi untuk memesan ulasan dengan:
    • Terbaru
    • Peringkat tertinggi
    • Peringkat terendah
  • Mulai jumlah ulasan — jumlah ulasan yang akan ditampilkan
  • Muat lebih banyak — berikan opsi untuk memuat lebih banyak ulasan

Ulasan berdasarkan Blok Produk dan Kategori

ulasan berdasarkan kategori

Blok ini memberikan opsi yang sama seperti Blok Semua Ulasan, tetapi memungkinkan Anda untuk memilih produk atau kategori tertentu. Mereka adalah cara yang bagus untuk memasukkan ulasan ke dalam posting atau halaman blog. Mempromosikan peluncuran album baru? Tampilkan lima ulasan teratas untuk album tertentu. Menulis posting blog tentang kategori produk tertentu? Tampilkan semua ulasan untuk kategori tersebut. Ini adalah cara yang ampuh untuk melibatkan pengunjung situs dan menunjukkan bahwa produk Anda dapat dipercaya.

Blok Pencarian Produk

blok pencarian yang ditampilkan di atas filter dan di sebelah kisi produk

Saat calon pelanggan mengunjungi situs Anda, mereka seharusnya dapat segera menemukan apa yang mereka cari. Jika mereka ingin membeli produk tertentu, hal terakhir yang Anda inginkan adalah mereka harus menavigasi halaman demi halaman item yang tidak terkait.

Blok Pencarian Produk menyediakan formulir pencarian sederhana khusus untuk produk. Tambahkan di suatu tempat yang terlihat di situs Anda — di bagian atas atau di bilah sisi halaman toko dan kategori Anda — dan izinkan pembeli untuk mencari apa yang mereka inginkan.

Maksimalkan toko online Anda dengan Blok WooCommerce

Bawa pemasaran konten Anda ke tingkat berikutnya dengan menambahkan produk langsung ke halaman arahan, posting blog, dan jenis media lainnya. Pengguna dapat melakukan pembelian terkait konten yang mereka minati tanpa navigasi tambahan apa pun.

Editor Blok memberi pengguna fleksibilitas dan kontrol yang luar biasa atas tata letak dan desain toko online mereka. Ketika digabungkan dengan Blok WooCommerce kami, Anda dapat membuat etalase yang benar-benar khusus — menambahkan semuanya mulai dari produk dan kategori hingga filter dan ulasan hampir di mana pun Anda perlukan!

Tetap up to date pada blok terbaru untuk WooCommerce