Tingkatkan Pengalaman Pelanggan Anda Dengan Desain Halaman Toko Yang Sempurna

Diterbitkan: 2023-02-06

Anda telah membuat toko WooCommerce, mengunggah produk, tetapi toko Anda masih belum terlihat cukup mengesankan untuk menarik pengunjung. Mengapa?… Tidak, pertanyaannya di sini adalah- apakah Anda sudah menyesuaikan halaman toko WooCommerce Anda?

WooCommerce hadir dengan halaman toko default untuk menampilkan produk toko Anda. Tetapi Anda harus mendekorasi halaman dengan mempertimbangkan jenis bisnis dan preferensi pengguna Anda.

Menurut penelitian terbaru, sekitar 48% pembeli target Anda memutuskan apakah mereka ingin menjelajahi situs web Anda atau tidak hanya dengan melihat desainnya.

Halaman toko default mungkin tidak terlihat begitu mengesankan untuk menarik perhatian pelanggan. Sedangkan halaman toko yang dioptimalkan dapat memberi Anda peluang tanpa akhir.

Hari ini, kami akan memandu Anda melalui setiap langkah mengonfigurasi halaman toko WooCommerce yang mencakup-

  • Menambahkan halaman toko di WordPress
  • Menyesuaikan desain halaman toko Anda
  • Menghindari kesalahan umum selama kustomisasi

Tapi sebelum itu mari kita tunjukkan –

Pentingnya Memiliki Halaman Toko WooCommerce yang Dirancang dengan Baik

Memiliki desain yang mudah dipahami sangat penting untuk mendorong konversi dan penjualan, serta meningkatkan kepuasan pelanggan.

Halaman toko menampilkan semua produk eCommerce Anda di satu halaman. Ini adalah halaman tempat pelanggan menghabiskan sebagian besar waktunya. Jika Anda dapat membuat halaman toko yang menarik, kemungkinan besar Anda akan mendapatkan lebih banyak pelanggan.

Halaman toko WooCommerce biasanya menampilkan produk dalam tata letak bergaya kisi. Jadi, pengguna dapat dengan mudah menelusuri dan membeli dari daftar. Biasanya, itu menunjukkan atribut seperti gambar produk, nama, harga, dan opsi pembelian.

Keuntungan memiliki halaman toko yang dioptimalkan-

  • Menampilkan semua produk pada satu halaman
  • Dapatkan basis pelanggan setia
  • Pikat orang dengan koleksi produk yang kaya
  • Buat orang penasaran dengan brand Anda

Berikut adalah contoh tata letak halaman toko WooCommerce default-

Halaman toko WooCommecre default
Halaman toko WooCommerce default

Mari tunjukkan cara menambahkan halaman toko di WordPress dan menyesuaikan desain default.

Baca selengkapnya: Metode & Solusi Cerdas Untuk Meningkatkan Penjualan WooCommerce.

Cara Menambahkan Halaman Toko di WordPress

Bagaimana cara menambahkan halaman toko di WordPress

WordPress membuatnya lebih mudah untuk membangun toko digital yang berfungsi penuh. Dengan alat yang tepat seperti WooCommerce, Anda dapat dengan mudah membangun toko online pertama Anda dari awal dan menjalankan bisnis Anda dengan sukses. Lebih mengejutkan lagi, Anda tidak memerlukan pengetahuan teknis untuk mengoperasikan bisnis Anda dengan WooCommerce.

Berjualan online semakin populer dengan sistem pengembangan yang mudah ini.

Tetapi hanya mengaktifkan WooCommerce saja tidak cukup untuk membawa kesuksesan bagi bisnis Anda. Anda dapat mengatur halaman toko WooCommerce Anda, melakukan pengaturan umum, dan memperbarui tata letak desain default.

Mari tunjukkan cara melakukannya-

Hal Pertama Pertama: Pastikan Semua Konfigurasi Anda Sebelumnya Selesai

Untuk menambahkan halaman toko ke situs web WordPress Anda, pertama-tama Anda perlu menginstal plugin WooCommerce.

Setelah Anda menginstal WooCommerce, plugin secara otomatis membuat beberapa halaman eCommerce penting. Seperti Shop, Cart, Checkout, Akun saya, dan Kebijakan Privasi. Setiap halaman ini menambahkan elemen tertentu ke situs web Anda.

Sekarang Anda berhak menambahkan produk ke toko online Anda. Berikan pemeriksaan cepat apakah Anda telah melakukan tugas-tugas berikut secara akurat-

  1. Instal plugin WooCommerce: Buka area plugin di dasbor WordPress Anda dan cari “WooCommerce.” Klik tombol "Instal Sekarang", lalu aktifkan plugin.
  2. Siapkan toko Anda: Setelah mengaktifkan plugin, Anda akan diarahkan ke wizard penyiapan WooCommerce. Ikuti petunjuk untuk menyiapkan toko Anda, termasuk menambahkan opsi pembayaran dan pengiriman.
  3. Tambahkan produk: Untuk menambahkan produk ke toko Anda, buka area "Produk" di dasbor WordPress dan klik "Tambah Baru". Dari sini, Anda dapat menambahkan detail tentang produk Anda, termasuk judul, deskripsi, harga, dan gambar.

Menambahkan berbagai macam produk di toko Anda akan membuat situs Anda populer bagi pelanggan Anda. Unggah produk atau layanan Anda dengan menentukan kategori dan tag yang tepat. Jadi, pelanggan Anda dapat dengan mudah menemukan produk yang tepat melalui halaman toko Anda.

Setelah menambahkan atau mengimpor produk ke situs web WooCommerce, Anda dapat melihatnya di halaman 'Toko'.

Jika Anda ingin menampilkan produk Anda di halaman lain, Anda juga mendapatkan fasilitas di WooCommerce. Yang Anda butuhkan untuk menentukan halaman kustom sebagai halaman toko Anda. Mari tunjukkan langkah-langkah di bawah ini-

Menentukan Halaman Toko WooCommerce Anda

Berikut adalah langkah-langkah untuk menentukan halaman sebagai halaman 'Toko' Anda-

  • Masuk ke dasbor WordPress Anda dengan kredensial pribadi Anda
  • Arahkan kursor ke WooCommerce dan klik 'Pengaturan'
  • Klik tab 'Produk' & tetap di sub tab 'Umum'
  • 'Halaman Toko' memungkinkan Anda untuk menentukan halaman toko Anda
  • Pilih halaman dari menu drop-down sesuai keinginan Anda
tentukan halaman toko woocommerce
Menentukan halaman toko Anda di pengaturan WooCommerce

Di halaman ini, Anda akan menemukan banyak opsi lain untuk mengonfigurasi aktivitas toko Anda. Sesuaikan opsi pengaturan sesuai dengan rencana Anda.

Namun, Anda dapat membuat halaman baru dan mendesainnya sesuai dengan kebutuhan Anda. Terakhir, atur halaman yang baru Anda desain sebagai Halaman Toko default Anda. Berikut adalah langkah-

  • Dari Dasbor WordPress Anda, buka Halaman → Tambah Baru
  • Beri judul pada halaman baru Anda
  • Sekarang, Anda dapat mendesain halaman ini menggunakan blok, pembuat situs, atau secara manual
  • Terakhir, buka opsi Pengaturan yang telah kami tunjukkan di atas dan atur halaman toko baru sebagai halaman toko default Anda.

Pada langkah selanjutnya, kami akan menunjukkan kepada Anda beberapa konfigurasi lanjutan dari halaman Toko WooCommerce Anda-

Tetapkan Halaman Toko Sebagai Beranda

Sebagai pemilik toko online, salah satu tujuan utama Anda adalah membuat perjalanan pengguna Anda lebih nyaman. Jika Anda memiliki beranda terpisah maka pengunjung pertama akan mendarat di halaman utama Anda. Selanjutnya, mereka akan menggunakan menu navigasi Anda untuk mengunjungi halaman toko. Ini bisa merepotkan pengguna.

Menjadikan Halaman Toko sebagai Beranda Anda membantu pengunjung langsung membuka halaman terpenting toko. Ini menghemat waktu serta meningkatkan peluang konversi.

Berikut adalah langkah-langkah untuk mengatur halaman toko WooCommerce Anda sebagai beranda-

  • Arahkan ke dasbor WordPress Anda
  • Temukan opsi 'Pengaturan' dan klik 'Membaca'
  • Untuk 'Tampilan beranda Anda', alihkan ke 'Halaman statis' alih-alih 'Pos terbaru Anda'
  • Klik dropdown di sebelah beranda dan pilih halaman toko
  • Tekan tombol Simpan setelah Anda selesai
buat beranda halaman toko woocommerce Anda
Mengatur halaman toko Anda sebagai beranda di pengaturan WordPress

Selamat! Anda telah menetapkan halaman toko WooCommerce Anda sebagai beranda.

Gunakan Blok Gutenberg untuk Memodernisasi Desain Halaman Toko Anda

Gunakan blok Gutenberg untuk memodernisasi desain e-niaga Anda

Gutenberg sekarang menjadi editor default untuk instalasi WordPress. Editor WordPress berbasis blok ini pertama kali diperkenalkan di WordPress 5.0. Ini memungkinkan Anda untuk menambahkan elemen situs penting seperti gambar, paragraf, daftar, dan tombol ke halaman atau posting dengan blok yang dapat disesuaikan.

Selain itu, setelah menginstal WooCommerce, Gutenberg memberi Anda akses ke 19 blok tambahan. Jadi Anda dapat dengan mudah membuat dan menyesuaikan halaman toko Anda.

Daftar Blok yang Tersedia untuk Memodifikasi Desain Halaman Toko Anda-

  1. Produk Unggulan: Sorot satu produk atau variasi yang dapat dengan cepat menarik perhatian pelanggan.
  2. Kategori Unggulan: Tandai kategori produk secara khusus sehingga Anda mendapatkan lebih banyak lalu lintas ke bagian tertentu dari toko Anda.
  3. Produk pilihan: Menampilkan daftar produk pilihan dalam kotak. Produk ini dapat dipesan dengan berbagai cara
  4. Produk Terlaris: Pamerkan kisi produk terlaris Anda dengan filter kategori
  5. Produk Teratas: Pamerkan produk dengan peringkat teratas dari toko Anda dalam kotak dengan filter kategori
  6. Produk Terbaru: Pamerkan kisi produk terbaru Anda termasuk filter kategori
  7. Produk On-Sale : Menampilkan kisi produk on-sale dengan filter kategori
  8. Produk berdasarkan Kategori: Menampilkan daftar produk dari kategori atau kategori yang Anda pilih
  9. Produk berdasarkan Tag: Menampilkan kisi produk berdasarkan tag tertentu
  10. Produk berdasarkan Atribut: Tampilkan kisi produk dari atribut yang Anda pilih
  11. Daftar Kategori Produk: Menampilkan semua kategori produk Anda sebagai daftar atau dropdown sehingga pembeli dapat dengan mudah menemukan kategori tertentu
  12. Ulasan berdasarkan Produk: Pamerkan ulasan tentang produk tertentu untuk membangun kepercayaan pada produk dan merek Anda
  13. Ulasan berdasarkan Kategori: Sorot ulasan dari kategori tertentu
  14. Semua Ulasan: Menampilkan daftar semua ulasan produk yang berbeda di situs Anda
  15. Pencarian Produk: Bantu pembeli menemukan produk Anda dengan menyertakan kotak pencarian di lokasi tertentu
  16. Semua Produk: Tampilkan semua produk WooCommerce Anda dalam kisi dengan opsi paginasi & penyortiran
  17. Filter Produk berdasarkan Harga: Tampilkan penggeser untuk memfilter produk di toko Anda berdasarkan harga
  18. Filter Produk berdasarkan Atribut: Menampilkan daftar filter berdasarkan atribut produk yang dipilih.
  19. Filter Produk Aktif: Menampilkan daftar filter produk aktif

Cara Menyesuaikan Halaman Toko WooCommerce Anda

Sesuaikan halaman toko WooCommerce Anda

Terlepas dari blok praktis ini, WooCommerce mendukung berbagai opsi penyesuaian. Anda akan menemukannya di menu 'Penampilan'. Penyesuaian ini membantu Anda menampilkan merek secara unik dan membedakan bisnis Anda dari pesaing.

Untuk halaman toko, Anda bisa menentukan jumlah produk di halaman toko, ukuran thumbnail gambar, dan lain sebagainya. Anda harus mengikuti langkah-langkah di bawah ini-

  • Arahkan kursor ke 'Penampilan' dari dasbor WordPress Anda & pilih 'Sesuaikan'
  • Dari panel kiri Klik 'WooCommerce'. Ini akan membuka panel kustomisasi baru
  • Selanjutnya, pilih 'Katalog Produk'. Ini akan menampilkan beberapa opsi untuk mengubah desain halaman toko Anda
opsi penyesuaian halaman toko woocommerce
Opsi penyesuaian halaman toko WooCommerce


  • Dari 2 drop-down pertama, Anda dapat memilih apakah ingin halaman toko menampilkan produk, kategori, atau keduanya.
  • Drop-down ketiga memungkinkan Anda memilih format yang Anda inginkan untuk mengurutkan produk Anda seperti nama, popularitas, peringkat, atau harga.
Opsi penyortiran produk
Opsi penyortiran produk untuk halaman toko WooCommerce
  • Dua opsi terakhir memungkinkan Anda mengatur jumlah produk per baris dan baris per halaman yang ingin Anda tampilkan di halaman toko Anda. Dengan menggunakan 2 opsi ini, Anda dapat mengatur jumlah produk yang akan ditampilkan di katalog Anda.
  • Sekarang, kembali halaman & pilih tab 'Gambar Produk'
Opsi penyesuaian gambar produk e-niaga
Opsi penyesuaian gambar produk halaman toko WooCommerce
  • Di sini, Anda mendapat kesempatan untuk menyesuaikan ukuran dan rasio aspek thumbnail produk Anda.

Jika Anda ingin menyesuaikan halaman toko WooCommerce Anda menggunakan pembuat halaman seperti Elementor, periksa blog ini di Cara Menyesuaikan Toko WooCommerce Anda Menggunakan Happy Addons.

Kesalahan yang Harus Anda Hindari Saat Menyesuaikan Halaman Toko WooCommerce Anda

Kesalahan yang harus Anda hindari saat menyesuaikan halaman toko WooCommerce Anda

Untuk mempersonalisasi situs web bisnis Anda, Anda harus merawat setiap elemen dengan baik. Untungnya, WooCommerce memungkinkan Anda mengubah setiap sudut toko Anda dengan mudah.

Di dalam WooCommerce Anda akan menemukan begitu banyak opsi untuk menambah atau menghapus banyak fitur sesuai kebutuhan Anda. Adalah tugas Anda untuk memahami atribut mana yang benar-benar Anda perlukan untuk meningkatkan pengalaman pengguna Anda.

Di mana terlalu banyak pilihan dapat mengalihkan perhatian pelanggan Anda, kurangnya fasilitas penting juga dapat merusak perjalanan mereka. Untuk menyeimbangkan Anda harus berhati-hati saat menyesuaikan toko Anda.

Karena halaman toko adalah salah satu halaman paling penting untuk konversi, jadilah lebih aktif sebelum membawa perubahan apa pun ke halaman ini. Anda harus-

  • Tidak membabi buta mengandalkan tata letak halaman toko WooCommerce default
  • Lakukan penelitian tentang pesaing Anda untuk menyusun rencana desain yang konkret
  • Simpan cadangan sebelum melakukan perubahan besar
  • Sertakan atribut penting untuk mendeskripsikan produk Anda
  • Rancang tata letak halaman Anda dengan mempertimbangkan preferensi pengguna

Apakah Anda sudah membangun toko online Anda? Anda dapat memperluas kemungkinan eCommerce Anda dengan mengubah satu toko Anda menjadi pasar multivendor. Gunakan Dokan untuk membangun pasar online yang berfungsi penuh dengan anggaran terbatas dan usaha minimal.

Baca Lebih Lanjut: Mengapa Bisnis eCommerce Gagal & Cara Mengatasinya.

Apakah Anda Siap Membangun Halaman Toko dengan WooCommerce?

Halaman Toko WooCommerce memainkan peran penting untuk meningkatkan tingkat konversi Anda. Ini adalah salah satu halaman toko Anda yang paling banyak dikunjungi. Jika Anda tidak dapat mengonfigurasi halaman ini dengan cara yang benar, Anda mungkin kehilangan banyak pelanggan potensial.

Jadikan desain halaman toko Anda lugas dan mudah dinavigasi. Untuk melakukan ini, penting untuk mengenal pelanggan Anda lebih baik. Setelah Anda memahami harapan mereka dari bisnis Anda, akan mudah untuk memutuskan perubahan apa yang harus Anda bawa ke halaman toko Anda.

Setelah menyelesaikan desain, langkah selanjutnya adalah menentukan halaman toko dari Pengaturan WooCommerce. Untuk kenyamanan pengguna, Anda dapat mengatur halaman toko sebagai Beranda Anda.

Apakah Anda cukup percaya diri untuk mulai mengerjakan halaman toko WooCommerce Anda? Gunakan bagian komentar kami di bawah ini untuk berbagi pengalaman Anda dengan kami.