Cara Membuat Halaman Toko WooCommerce yang Indah (Dalam 5 Langkah)

Mencari cara termudah untuk menyesuaikan halaman toko WooCommerce?

WordPress menawarkan berbagai macam blok untuk membantu Anda membuat situs web profesional. Jika Anda menggunakan WooCommerce, Anda juga mendapatkan akses ke blok WooCommerce khusus yang dapat Anda gunakan untuk toko online Anda.

Oleh karena itu, Anda mungkin bertanya-tanya bagaimana cara menggunakan elemen-elemen ini untuk membangun halaman toko WooCommerce yang mendorong konversi.

Untungnya, prosesnya sangat sederhana. Menggunakan blok ini, WooCommerce memungkinkan Anda menampilkan produk Anda dengan cara yang berbeda. Selain itu, Anda dapat menambahkan filter dan fungsi pencarian untuk memudahkan pengguna menelusuri toko Anda.

Pada artikel ini, kami akan menunjukkan cara membuat halaman toko WooCommerce yang indah menggunakan blok . Anda dapat mengikuti panduan kami dan memilih blok mana yang ingin Anda gunakan, tergantung pada kebutuhan Anda. Mari kita mulai!

Daftar Isi:

1. Tempatkan blok Semua Produk
2. Tambahkan blok Produk Unggulan dan/atau Produk Pilihan
3. Aktifkan pencarian produk di halaman toko
4. Gunakan blok Kategori Unggulan
5. Tambahkan opsi untuk memfilter produk berdasarkan harga

Cara menyesuaikan halaman toko WooCommerce dengan blok

Untuk memulai, Anda akan ingin membuka editor untuk halaman Toko toko Anda. Kemudian, ikuti petunjuk ini untuk menyesuaikan kontennya.

1. Tempatkan blok Semua Produk

Halaman toko tersedia dalam berbagai bentuk dan ukuran. Di toko online, halaman ini biasanya menampilkan semua produk yang Anda jual. Pengguna dapat mengklik masing-masing item untuk membuka halaman produk masing-masing atau menambahkannya ke troli mereka secara langsung (jika toko mengizinkannya):

Dengan WordPress dan WooCommerce, Anda memiliki kontrol penuh atas elemen apa yang akan disertakan di halaman toko Anda. Tampilan dan nuansa halaman ini akan bergantung pada tema yang Anda gunakan dan cara Anda mengonfigurasinya.

WooCommerce secara otomatis menyiapkan halaman toko saat Anda mulai menggunakan plugin, sehingga Anda dapat melanjutkan dan melihat seperti apa tampilan Anda. Saat Anda siap untuk mengeditnya, buka Halaman dan temukan opsi Toko .

Buka halaman ini di Editor Blok, dan Anda akan melihat sesuatu seperti ini:

Secara default, halaman Toko menyertakan blok Semua Produk dan header. Jika Anda tidak melihat blok ini, Anda dapat menambahkannya ke halaman dengan mengklik tanda plus (+) dan memilihnya dari daftar opsi:

Blok Semua Produk menampilkan kotak yang berisi semua produk toko Anda, diurutkan dari baru ke lama. Untuk mengubah urutan tampilan produk Anda, klik pada blok dan buka panel pengaturan di sebelah kanan. Kemudian, navigasikan ke bagian Content Settings dan pilih preferensi Anda dari menu Order Products By :

Sementara itu, di bawah Layout Settings , Anda dapat memilih jumlah kolom dan baris yang ingin ditampilkan di kisi produk. Jangan ragu untuk menjelajahi opsi lain yang tersedia dengan blok ini.

2. Tambahkan blok Produk Unggulan dan/atau Produk Pilihan

Banyak halaman toko menyoroti produk tertentu. Ini biasanya item yang ingin menarik perhatian pemilik toko, seperti stok baru atau diskon atau produk yang baru ditambahkan. WooCommerce hadir dengan blok Produk Unggulan yang memungkinkan Anda menampilkan item apa pun di toko Anda.

Setelah Anda menempatkan blok ini di halaman Anda, Anda harus memilih produk yang ingin Anda tampilkan dan klik Selesai :

Kemudian, WooCommerce akan menampilkan gambar produk, nama, harga, deskripsi, dan ajakan bertindak (CTA). Blok akan terlihat seperti ini:

Anda kemudian dapat menyesuaikan blok ini sesuai keinginan Anda. Misalnya, Anda dapat mengubah gambar dan memodifikasi tombol CTA.

Kelemahan dari menambahkan blok Produk Unggulan ke halaman toko WooCommerce Anda adalah dapat mengalihkan pengguna dari sisa produk Anda. Untuk mengatasi hal ini, sebaiknya gunakan kolom untuk menampilkan beberapa produk unggulan secara berdampingan:

Alternatif untuk blok Produk Unggulan adalah opsi Produk Pilihan. Blok ini memungkinkan Anda untuk memilih beberapa produk dan menampilkannya secara berdampingan. Ini menggunakan gaya yang sama dengan blok Semua Produk :

Baik blok Produk Unggulan maupun Produk Pilihan memiliki tujuan yang sama. Idealnya, Anda akan memilih salah satu dari dua opsi agar tidak membanjiri pengunjung dengan terlalu banyak item unggulan. Kami juga merekomendasikan untuk menempatkan blok ini di bagian atas halaman, sehingga pengguna tidak dapat melewatkannya.

3. Aktifkan pencarian produk di halaman toko

Jika Anda memiliki toko dengan katalog produk yang besar, Anda harus menawarkan fitur pencarian. Dengan cara ini, pengguna dapat mencari item tertentu yang ada dalam pikiran mereka, tanpa harus menelusuri seluruh toko.

Saat menambahkan blok pencarian ke halaman toko Anda, Anda akan ingin mencari opsi Pencarian Produk , bukan blok pencarian WordPress default. Pencarian Produk akan membatasi hasil untuk produk WooCommerce, sementara blok pencarian lainnya akan menyertakan semua halaman lain di situs Anda.

Seperti inilah fungsi pencarian WooCommerce:

Ingatlah bahwa blok Pencarian Produk tidak berfungsi di dalam editor, jadi Anda harus mengujinya di bagian depan. Selain itu, blok tidak menawarkan fungsionalitas pelengkapan otomatis, sehingga pengguna perlu mengetikkan kueri lengkap dan memuat halaman baru untuk melihat hasilnya.

4. Gunakan blok Kategori Unggulan

Selain mengarahkan pengguna ke produk pilihan, Anda mungkin juga ingin menyoroti kategori produk tertentu. Ini bisa sangat berguna jika Anda menjual beberapa jenis produk, karena akan memungkinkan pengguna untuk mencari item di departemen tertentu.

Mulailah dengan menambahkan blok Kategori Unggulan ke halaman toko WooCommerce Anda. Kemudian, pilih kategori produk yang ingin Anda sorot dan klik Selesai :

Berikut tampilan blok Kategori Unggulan :

Blok memungkinkan Anda mengubah warna latar belakang dan teks, tetapi tidak menawarkan banyak opsi penyesuaian tambahan. Selain itu, karena blok membutuhkan banyak ruang, kami sarankan untuk menempatkan beberapa kategori unggulan secara berdampingan menggunakan kolom:

Karena blok Kategori Produk Unggulan sangat mendasar, kami sarankan Anda melihat plugin seperti Otter Blocks untuk penyesuaian lebih lanjut.

Dengan Otter Blocks, Anda dapat memodifikasi blok WooCommerce dengan menambahkan animasi dan pengaturan visibilitas lainnya:

Selain itu, Otter Blocks menambahkan berbagai blok baru yang dapat Anda gunakan di toko online Anda. Ini termasuk opsi seperti pop-up (yang sempurna untuk mengumpulkan pendaftaran email) dan ulasan produk.

5. Tambahkan opsi untuk memfilter produk berdasarkan harga

Sejauh ini, toko Anda memiliki bilah pencarian, produk pilihan, kategori unggulan, dan seluruh katalog produk Anda. Semua yang Anda lewatkan adalah cara bagi pengguna untuk memfilter produk.

Blok Filter Products by Price memungkinkan pelanggan melakukan hal itu. Blok menampilkan penggeser yang memungkinkan pelanggan menetapkan harga minimum dan maksimum untuk produk yang ingin mereka lihat:

Nilai harga tidak dapat diedit – nilai tersebut bergantung pada harga produk Anda. Pengunjung dapat mengetikkan nilai yang mereka inginkan atau menggunakan penggeser untuk mengubahnya.

Saat Anda membuat perubahan pada penggeser harga, blok Semua Produk akan diperbarui untuk menampilkan produk yang memenuhi kriteria. Ini terjadi tanpa pengguna perlu memuat ulang halaman.

Sejauh penempatan, kami menyarankan Anda menambahkan blok Filter Produk menurut Harga di atas katalog produk Anda. Dengan begitu, pengguna akan melihatnya saat mereka menggulir halaman ke bawah.

Anda juga dapat memungkinkan pengguna untuk memfilter produk berdasarkan ukuran, warna, dan fitur lainnya. Blok Filter Products by Attribute memungkinkan Anda menelusuri produk yang memenuhi atribut yang dipilih, berdasarkan opsi yang tersedia di toko Anda.

Dan itu cukup banyak! Setelah selesai, pastikan untuk menyimpan perubahan Anda dan halaman toko baru Anda akan segera mulai berfungsi.

Siapkan halaman toko WooCommerce Anda hari ini

Tujuan utama Anda adalah membuat laman yang memaksimalkan konversi dengan menawarkan semua opsi yang mereka cari kepada pengguna dalam tata letak dan urutan yang masuk akal.

Setelah Anda mengatur halaman toko WooCommerce Anda, Anda dapat mengalihkan perhatian Anda ke halaman produk tunggal Anda. Untuk itu, pastikan untuk membaca panduan kami tentang cara mengoptimalkan halaman produk WooCommerce.

Apakah Anda memiliki pertanyaan tentang cara membuat halaman toko WooCommerce menggunakan blok? Beri tahu kami di bagian komentar di bawah!