Panduan untuk menggunakan blok Gutenberg untuk toko WooCommerce Anda

Pengenalan editor Gutenberg di WordPress telah berkontribusi terhadap pembentukan kembali identitas WordPress untuk sebagian besar. Dari menjadi sistem manajemen konten inti dengan fitur untuk menambahkan media dan opsional, plugin untuk berbagai kebutuhan, sekarang juga editor WYSIWYG yang kaya media dan pembuat halaman web, tanpa kompromi dengan fleksibilitas yang selalu ditawarkan. Faktanya, blok yang disediakan Gutenberg meningkatkan fleksibilitas untuk membuat halaman sesuai keinginan Anda.

Keuntungan terbaik yang ditawarkan Gutenberg dibandingkan editor sebelumnya (juga disebut sebagai editor TinyMCE) adalah menghilangkan kebutuhan untuk mengetahui cara membuat kode, atau kebutuhan untuk memahami struktur WordPress untuk mengetahui cara menambahkan lebih banyak fungsionalitas ke situs web WordPress atau WooCommerce Anda. toko. Namun, jika Anda lebih nyaman dengan editor WordPress lama, Anda selalu dapat menginstal plugin gratis yang dikenal sebagai Editor Klasik oleh kontributor WordPress yang memberi Anda opsi untuk menonaktifkan Gutenberg sepenuhnya, atau beralih antara editor lama dan Gutenberg . Gutenberg juga menawarkan blok Editor Klasik bagi pengguna untuk menggunakan fungsionalitas editor klasik di dalam Gutenberg! Kedengarannya terlalu bagus untuk menjadi kenyataan? Mari selami posting ini atau lebih tepatnya panduan untuk menggunakan blok Gutenberg untuk toko WooCommerce Anda!

Blok Gutenberg dapat diakses melalui halaman WordPress mana pun. Saat Anda menambahkan halaman baru atau mengedit halaman yang ada di dalam WordPress, Anda dapat melihat simbol “+” saat Anda mengarahkan kursor ke area konten kiri atas di layar.

Ada berbagai jenis blok yang disediakan Gutenberg untuk kegunaan yang berbeda:

Meskipun blok dapat digunakan untuk membuat berbagai halaman, sebagai administrator WooCommerce atau manajer toko, Anda sebaiknya paling fokus pada halaman Beranda atau Toko. Oleh karena itu, untuk tujuan tutorial ini, mari buat halaman beranda untuk toko Anda yang dirancang untuk meningkatkan penjualan Anda! Kami akan menggunakan blok WooCommerce paling banyak untuk ini. Blok ini sebelumnya merupakan bagian dari plugin fitur oleh Automattic dan digabungkan ke dalam WooCommerce versi 3.5.

Blok WooCommerce berisi berbagai fitur atau 'blok' yang terutama terkait dengan menampilkan produk di halaman Anda, yang dapat Anda gunakan untuk membangun toko Anda. Berikut adalah daftar blok yang tersedia di bawah blok WooCommerce:

• Produk berdasarkan Kategori
• Produk Terbaru
• Produk unggulan
• Produk Terlaris
• Produk Dijual
• Produk pilihan
• Produk Nilai Teratas
• Produk berdasarkan Atribut

Mari kita mulai dengan menambahkan Produk Unggulan ke bagian atas Halaman Beranda kita. Ini bisa berupa produk apa pun yang ingin Anda soroti kepada pengguna / audiens Anda.

Kami telah menambahkan produk yang dikenal sebagai "Keanggotaan Toko". Segera setelah produk ditambahkan, gambar, deskripsi, dan harganya akan ditampilkan. Anda dapat memilih untuk menyembunyikannya menggunakan opsi di bilah sisi kanan. Tombol "Belanja Sekarang" juga ditambahkan; warna, teks, dan URL yang dituju adalah atribut yang dapat diedit.

Warna Overlay adalah fitur menarik yang memungkinkan Anda mengatur warna dan opasitas gambar produk yang telah Anda pilih untuk menjadi produk Unggulan dalam hal ini:

Anda juga dapat menambahkan kelas CSS ke gambar ini. Demikian pula, tombol Belanja sekarang juga dapat diedit:

Selanjutnya, mari tambahkan beberapa pendatang baru dan penjual terbaik di toko, sehingga pengunjung baru dan pengunjung kembali akan memiliki sesuatu untuk diambil dari halaman ini.

Untuk ini, pertama-tama kita akan menambahkan blok yang dikenal sebagai Heading ditemukan di bawah Common Blocks:

Setelah judul yang sesuai seperti "Pendatang Baru" ditambahkan, kita dapat melanjutkan dan menambahkan blok masing-masing untuk hal yang sama. Untuk kedua tujuan kami, kami akan menggunakan blok WooCommerce yang dikenal sebagai Produk Terlaris dan Produk Terbaru . Blok ini dapat ditemukan lagi di bawah blok WooCommerce. Mari tambahkan blok Produk Terbaru .

Anda dapat melihat bahwa blok Produk Terbaru menarik produk yang paling baru ditambahkan dari toko WooCommerce Anda. Anda dapat memilih untuk menampilkan produk sebanyak yang Anda suka untuk blok ini dengan mengatur jumlah baris dan kolom yang akan ditampilkan, serta memfilter produk berdasarkan kategori menggunakan opsi di bilah sisi kanan:

Dengan cara ini, kami telah menambahkan baris lain setelah baris Produk Unggulan untuk pendatang baru:

Selanjutnya, mari kita tambahkan produk Best Selling dengan cara yang sama (setelah menambahkan blok Heading untuk itu):

Sekarang kita telah membuat baris ini untuk pengunjung baru dan pengunjung berulang, mari tambahkan juga baris yang menampilkan produk yang sedang dijual untuk menarik lebih banyak penjualan. Kami akan melakukan ini menggunakan blok On Sale di bawah WooCommerce Blocks lagi (setelah menggunakan blok Heading untuk menambahkan heading):

Ada banyak lagi blok yang dapat Anda tambahkan di bawah blok WooCommerce berdasarkan kebutuhan Anda. Sekarang mari tambahkan semua produk ke halaman Toko. Untuk ini, Anda dapat memilih blok Produk berdasarkan Kategori .

Sering kali, Anda juga akan menemukan semua blok ini di bawah kategori blok yang Paling Banyak Digunakan , tetapi untuk tujuan tutorial ini, kami memilih blok tersebut dari kategori yang telah ditetapkan. Anda dapat menautkan semua judul ke halaman masing-masing, seperti halaman Penjualan, halaman Penjual Terbaik, dll. agar pelanggan dapat melihat daftar lengkap produk di bagian tersebut.

Di halaman Toko/Beranda kami, kami dapat menambahkan tombol yang mengatakan Jelajahi Toko, yang akan menautkan ke halaman Toko.

Untuk menambahkan tombol, kita harus memilih di antara blok Layout Elements.

Kami akan menautkan tombol ini ke halaman Toko.

Demikian pula, Anda dapat membuat tombol di bawah semua blok lain yang kami buat seperti blok "Penjual Terbaik", blok "On Sale", dll. dan membuat halaman terpisah untuk semua ini, dan menautkan tombol ke halaman masing-masing.

Untuk membuat halaman terpisah untuk jenis produk yang terpisah (penjualan terbaik atau produk obral), Anda dapat menggunakan kode pendek yang akan menampilkan jenis produk tertentu pada halaman masing-masing. Dalam posting ini, kami telah berbicara tentang bagaimana Anda dapat menampilkan berbagai kategori produk di beranda (atau halaman mana pun) menggunakan berbagai kode pendek.

Beginilah tampilan halaman kami pada akhirnya:

Sekarang, cukup klik Kustomisasi (di front-end, setelah melihat pratinjau halaman Anda) untuk menjadikannya halaman depan Anda dan Anda siap melakukannya! Ini adalah betapa mudahnya membuat halaman depan yang menarik untuk toko WooCommerce Anda menggunakan Gutenberg. Jelajahi dan bereksperimen dengan berbagai blok yang ditawarkan Gutenberg untuk memanfaatkan fitur-fiturnya secara maksimal!