Panduan Desainer Untuk WooCommerce

Jika Anda mendesain toko WooCommerce seperti Shopify atau mengembangkan tema WooCommerce yang sudah ada, artikel Panduan Desainer Untuk WooCommerce ini untuk Anda. Komposisi ini memberikan sedikit lebih banyak informasi tentang gaya, mengubah desain, dan informasi lain yang mencakup halaman WooCommerce terkait.

Plugin ini adalah alat yang mudah digunakan dan sangat fleksibel; namun, tidak semua situs web akan didukung. Dengan menggunakan fitur dan pendekatan yang didukung oleh WooCommerce, Anda dapat mempercepat proses desain dan pengembangan.

Ini memungkinkan pengguna untuk menyesuaikan modifikasi tetapi dengan biaya tambahan. Cara tercepat untuk melihat fitur apa saja yang ada adalah dengan mengunjungi demo Storefront di dalam WooCommerce. Jika Anda memerlukan beberapa cara untuk mempelajari cara menggunakan Woocommerce secara umum, periksa panduan dome untuk membantu Anda memulai. WooCommerce membuat halaman baru berikut. Ada beberapa jenis halaman yang perlu Anda desain.

Yang pertama adalah Halaman Produk. Halaman ini memiliki dua macam, yaitu: Halaman Arsip Produk dan Halaman Tunggal Produk.

Halaman Arsip Produk menampilkan gambar mini untuk kategori produk yang tersedia. Ini menunjukkan halaman arsip produk lain ketika Anda mengklik thumbnail kategori. Kemudian menampilkan produk tunggal ketika Anda mengklik thumbnail produk.

Jenis lainnya adalah Product Single Pages. Di sini, ini menampilkan produk tunggal dan menggabungkan gambar produk, informasi header produk, informasi detail produk, dan produk terkait, penjualan silang, dan peningkatan penjualan.

Ini juga memiliki Halaman Khusus , yang meliputi Keranjang Belanja dan Checkout . Keranjang Belanja biasanya ditampilkan dalam bentuk ringkas sebagai widget bilah sisi, terkadang dalam bentuk yang diperluas di halaman Keranjang bersama dengan informasi Pengiriman. Checkout, di sisi lain, adalah saat pelanggan check out, dan itu memerlukan informasi alamat.

Berbagai Jenis Produk

Alat ini memiliki berbagai jenis Produk;

Pertama adalah Product Header yang terbagi menjadi lima bagian. Ini adalah:

1. Nama Produk – ini ditampilkan di halaman ringkasan/arsip dan halaman tunggal
2. Fitur Produk – Anda akan melihat pada halaman ringkasan/arsip dan halaman single
3. Gambar – Gambar Unggulan ditampilkan pada ringkasan dan gambar tambahan pada halaman produk tunggal
4. Deskripsi Panjang – Ini ditunjukkan di area Deskripsi Produk di bagian bawah halaman produk tunggal
5. Deskripsi Singkat – Ini ditampilkan di bagian atas halaman produk tunggal

Alat ini juga akan memungkinkan pengguna untuk produk.

Setiap kategori membutuhkan gambar dan deskripsi kategori yang disediakan, dan juga dapat memiliki subkategori. Misalnya, Sepatu adalah kategori, dan merek sepatu adalah subkategori. Arsip Kategori produk dibuat secara otomatis dengan bagian berikut: judul atau nama kategori, deskripsi kategori, satu gambar mini kategori untuk setiap subkategori dari kategori saat ini, jempol produk opsional menyertakan judul, harga, dan Tambahkan ke Keranjang untuk setiap produk di kategori saat ini. Dengan mengklik kategori membuka kategori baru, mengklik thumbnail produk membuka produk.

Selain itu, di bawah Halaman Produk, ini dibuat secara otomatis dengan yang berikut:

Gambar produk – Ini adalah gambar unggulan dan gambar tambahan untuk produk. Judul produk, harga produk, Deskripsi singkat produk, Jumlah untuk ditambahkan ke troli (dengan + dan kontrol), Tombol Tambahkan ke Keranjang, kategori SKU Produk (Unit penyimpanan stok), dan tag.

Tab produk mencakup deskripsi panjang produk, termasuk galeri gambar opsional, informasi tambahan seperti tiket atribut produk untuk ditampilkan di halaman produk, dan ulasan produk opsional. Dengan mengklik kategori membuka kategori baru, mengklik thumbnail produk membuka produk.

Upsells – Ini adalah hal “Anda mungkin juga menyukai” diikuti dengan jempol/judul untuk upsells.

Cross-sell – Ini adalah produk terkait diikuti oleh thumbnail.

Presentasi produk, pilihannya adalah presentasi Standar dan Opsional. Standar menampilkan gambar unggulan di bagian atas halaman produk, dengan gambar mini tambahan di bawahnya dalam 3 kolom gambar mini. Sebaliknya, presentasi Opsional menampilkan gambar unggulan tanpa gambar mini di bawahnya dan menampilkan semua gambar di tab Deskripsi.

Bagian lain dari alat ini adalah widget pencarian produk yang tersedia untuk ditempatkan di widget sidebar atau widget footer. Jika Anda ingin mencari situs web apa pun, ia memiliki Opsi Pencarian Luas Situs. Di bawahnya terdapat kotak pencarian produk yang memungkinkan Anda untuk mencari nama produk, deskripsi singkat, dan deskripsi panjang. Divisi lain dari opsi pencarian Luas disebut penelusuran kategori. Ini adalah bidang tarik-turun yang memungkinkan pemilihan kategori atau subkategori apa pun. Proud tag cloud kit memiliki dropdown yang memungkinkan Anda memilih label harga.

Widget pencarian Opsi Pencarian Kategori Produk hanya akan muncul ketika arsip kategori produk yang dibuat secara otomatis ditampilkan. Pertama adalah Navigasi Berlapis. Hal ini memungkinkan pengguna untuk memperbaiki produk berdasarkan atribut dan secara efektif membantu pengguna pada apa yang mereka cari. Filter harga produk—ini menampilkan skala geser yang memungkinkan produk disaring ke kisaran harga. Terlaris—ini menampilkan judul/jempol/harga untuk daftar produk terlaris yang dipilih secara otomatis. Produk unggulan menampilkan judul/jempol/harga untuk produk yang dicentang sebagai Produk Unggulan. Dijual: Menampilkan produk yang memasukkan Harga Jual selain harganya.

Jika pengguna ingin menata WooCommerce mereka, kami memiliki opsi seperti jempol Produk. Ketika produk muncul sebagai produk jempol, 4 elemen ditampilkan, ini termasuk thumbnail, judul, harga, tambahkan ke troli. Penataan CSS yang dapat digunakan untuk Latar belakang produk, batas produk, padding, dan margin. Berikutnya adalah gambar mini. Ini termasuk perbatasan, padding, dan margin. Judul termasuk font, berat, warna, dan ukuran, sama dengan harga. Di bawah tambahkan ke troli termasuk warna tombol, warna label, batas, dan radius.

Ditampilkan juga pada alat adalah Stiker Penjualan, kata 'penjualan' muncul di atas jempol produk yang dijual—gaya CSS dapat digunakan: warna latar belakang, warna font, warna batas. Lebar batas, batas padat/putus-putus, radius batas.

Variasi produk memungkinkan klien untuk membuat produk pakaian yang tersedia dalam berbagai warna atau desain yang berbeda. Saat variasi produk digunakan, halaman arsip produk akan menampilkan tombol “Pilih Opsi” daripada tombol Tambah ke Keranjang.

Singkatnya, kami telah menetapkan elemen utama yang perlu Anda pikirkan saat mendesain toko WooCommerce. Kami telah menjelaskan berbagai jenis halaman, informasi produk serta opsi pencarian dan gaya. Bersenang-senang membangun toko WooCommerce Anda.

Baca lebih lanjut tentang Tema WordPress Woocommerce di sini.