Cara Menyesuaikan Halaman Produk WooCommerce

Produk Anda unik — halaman produk yang menampilkannya juga harus unik. Template halaman produk WooCommerce default sangat cocok untuk banyak toko online, tetapi Anda mungkin menginginkan sesuatu yang mencerminkan gaya dan manfaat individual produk Anda.

Anda tidak perlu menjadi pengembang untuk memasang cap Anda sendiri di halaman produk berkat beberapa ekstensi dari WooCommerce (dan satu fitur inti WooCommerce).

Produk Tambahan

Ekstensi Pengaya Produk menambahkan lebih banyak bidang ke halaman produk Anda sehingga pembeli dapat menyesuaikan pembelian mereka. Tata letak opsi menggunakan kotak teks, kotak centang, atau dropdown dan tambahkan variasi dengan contoh gambar — sertakan untuk masing-masing produk, atau untuk seluruh katalog Anda.

Sempurna untuk: toko eCommerce yang menawarkan opsi tambahan seperti pembungkus kado dan monogram.

• Jika Anda adalah toko pakaian yang menawarkan bordir, izinkan pelanggan untuk mengetik teks yang mereka ingin bordir sebelum mereka check out sehingga Anda tidak perlu menghubungi setelah pembelian.
• Jika Anda menjual bantal aksen, tawarkan pilihan untuk kain, ukuran, atau gaya.
• Jika Anda menjual perhiasan, biarkan pelanggan memilih kutipan yang ingin mereka ukir pada perhiasan tersebut.
• Jika Anda menawarkan produk yang dapat dihadiahkan, sertakan opsi untuk membungkus kado atau ucapan terima kasih.
• Jika Anda menjual barang elektronik, izinkan pembeli untuk membeli garansi yang melindungi barang mereka.
• Jika Anda adalah lembaga nonprofit, izinkan orang yang mendukung Anda menyertakan donasi dalam pembelian merchandise mereka.

Pilih untuk membebankan biaya untuk setiap add-on, atau tawarkan penyesuaian secara gratis. Ini adalah cara yang fleksibel untuk memberi pembeli pilihan yang mereka butuhkan.

Pelajari lebih lanjut tentang Add-On Produk.

Variasi Swatch dan Foto

Jika produk Anda memiliki variasi warna atau pola, pembeli ingin melihatnya beraksi. Ekstensi Variasi Swatch dan Foto menampilkan variasi — gaya, ukuran, pola, warna, dll. — dengan gambar atau contoh warna untuk memberikan gambaran yang lebih baik kepada pelanggan tentang apa yang mereka beli dan menyempurnakan desain halaman produk Anda.

Sempurna untuk: toko eCommerce dengan produk variabel.

• Jika Anda menjual T-shirt, tampilkan pilihan warna.
• Jika Anda menjual kacamata, tunjukkan semua opsi bingkai Anda.
• Jika Anda menjual perhiasan, soroti liontin yang dapat dipilih pelanggan.
• Jika Anda menjual skateboard, sertakan gambar pola yang Anda tawarkan.

Pelajari lebih lanjut tentang Variasi Swatch dan Foto dan lihat aksinya.

Gambar WooCommerce 360

Dengan WooCommerce 360 ​​Image, Anda dapat menambahkan rotasi gambar 360 kustom yang dinamis ke halaman produk sehingga pembeli dapat mengasah detail produk. Tambahkan sekelompok gambar ke galeri produk, dan gambar unggulan akan diganti dengan gambar 360 indah yang dapat diputar pelanggan untuk melihat semua aspek produk. Ini juga sepenuhnya responsif, sehingga pembeli di perangkat seluler memiliki pengalaman hebat yang sama.

Sempurna untuk: toko eCommerce yang ingin memberi pelanggan pengalaman seperti memegang produk secara fisik.

• Jika Anda menjual furnitur, pelanggan dapat memahami gayanya dari semua sudut.
• Jika Anda menjual suku cadang mobil, pelanggan dapat memeriksa detail close-up yang penting bagi mereka.
• Jika Anda menjual jam tangan, pelanggan dapat memperbesar setiap nuansa, ukiran, dan fitur.

Pelajari lebih lanjut tentang Gambar WooCommerce 360.

Video Produk untuk WooCommerce

Video adalah cara yang ampuh untuk memamerkan produk Anda dalam tindakan. Gunakan ekstensi Video Produk untuk WooCommerce untuk menambahkan video ke galeri gambar produk Anda, atau untuk mengganti gambar unggulan dengan video. Unggah video ke perpustakaan media WordPress Anda atau sematkan dari layanan pihak ketiga seperti Vimeo atau YouTube.

Sempurna untuk: toko eCommerce dengan produk yang paling baik ditampilkan dalam tindakan

• Jika Anda menjual alat-alat listrik, tunjukkan ukuran alat dan cara kerjanya.
• Jika Anda menjual pakaian, tunjukkan bagaimana suatu barang cocok dengan berbagai tipe tubuh dan berpasangan dengan pakaian lain.
• Jika Anda menjual mainan, sertakan klip anak-anak yang bermain dengan produk Anda dan testimoni dari orang tua yang bahagia.

Pelajari lebih lanjut tentang Video Produk untuk WooCommerce.

Bagan Ukuran untuk WooCommerce

Jika Anda menjual produk dalam berbagai ukuran, bagan membantu pelanggan memahami mana yang harus dibeli dan mengurangi jumlah pengembalian. Bagan Ukuran untuk ekstensi WooCommerce menambahkan bagan ukuran ke halaman produk — unggah milik Anda sendiri, atau buat di dasbor Anda. Anda dapat memilih untuk menampilkan grafik di detail produk atau sebagai pop-up.

Sempurna untuk: toko eCommerce yang menjual produk dalam berbagai ukuran

Contoh:

• Jika Anda menjual T-shirt, tambahkan tabel ukuran dengan ukuran bahu, dada, dan tinggi badan.
• Jika Anda menjual furnitur, tambahkan tabel ukuran dengan ukuran panjang, tinggi, dan kedalaman.
• Jika Anda menjual stiker, tambahkan tabel ukuran dengan ukuran tinggi dan lebar.

Pelajari lebih lanjut tentang Bagan Ukuran untuk WooCommerce.

Rekomendasi Produk

Upsell dan cross-sell adalah cara efektif untuk meningkatkan ukuran keranjang pelanggan dan penjualan Anda secara keseluruhan. Gunakan Rekomendasi Produk untuk menunjukkan kepada pelanggan lebih banyak tentang apa yang mereka minati. Tambahkan produk yang direkomendasikan berdasarkan apa yang populer, apa yang baru, apa yang dijual, apa yang melengkapi tampilan, dan banyak lagi. Atau tampilkan berdasarkan apa yang sudah ada di keranjang pelanggan Anda.

Sempurna untuk: toko eCommerce dengan lebih dari satu produk

• Jika Anda menjual sepatu, rekomendasikan kaus kaki atau tali sepatu.
• Jika Anda menjual anting-anting, rekomendasikan gelang dan kalung dari koleksi yang sama.
• Jika Anda menjual mainan, rekomendasikan teka-teki yang mirip dengan yang dimiliki pelanggan di keranjang mereka.
• Jika Anda menjual tanaman, rekomendasikan varietas populer lainnya atau tambahan tanah.

Pelajari lebih lanjut tentang Rekomendasi Produk.

Perubahan CSS sederhana, tidak diperlukan ekstensi

CSS adalah bahasa pengkodean yang mengontrol desain situs web Anda, mulai dari font dan warna hingga ukuran tombol dan latar belakang. Jika Anda memiliki pengetahuan dasar CSS, navigasikan ke Penampilan → Kustomisasi → CSS tambahan di dasbor Anda dan buat perubahan berikut:

Ubah ukuran font judul produk

Gunakan kode di bawah ini untuk mengubah ukuran judul produk Anda menjadi 36px. Ganti "36" dengan nomor apa pun yang Anda inginkan.

 .woocommerce div.product .product_title { font-size: 36px; }

Ubah warna judul produk

Kode hex adalah kode enam digit yang mewakili warna tertentu secara online. Gunakan kode di bawah ini untuk mengubah warna judul produk Anda menjadi kode hex #FF5733. Ganti kode hex dengan apa pun yang Anda inginkan; Anda dapat menggunakan pemilih warna HTML untuk mendapatkan kode warna apa pun yang Anda inginkan.

 .woocommerce div.product .product_title { color: #FF5733; }

Buat label variasi menjadi tebal

Gunakan kode di bawah ini untuk menampilkan judul variasi Anda dalam teks tebal.

 .woocommerce div.product form.cart .variations label { font-weight: bold; }

Cetak miring label variasi

Gunakan kode di bawah ini untuk membuat label variasi menjadi miring.

 .woocommerce div.product form.cart .variations label { font-style: italic; }

Ubah warna tombol Beli Sekarang:

Gunakan kode ini untuk mengubah warna latar belakang tombol Beli Sekarang. Sekali lagi, gunakan pemilih warna HTML untuk mendapatkan kode hex untuk warna yang ingin Anda gunakan.

 .woocommerce div.product .button { background: #000000; }

Mulai sesuaikan halaman produk Anda

WooCommerce adalah tentang fleksibilitas dan kemampuan penyesuaian, itulah sebabnya ia menyediakan semua alat yang Anda butuhkan untuk mengedit desain dan fungsionalitas halaman produk. Dengan menambahkan bidang, video, bagan ukuran, dan banyak lagi, halaman Anda bisa seunik produk yang mereka tampilkan.

Lihat perpustakaan ekstensi lengkap kami untuk opsi lainnya.