Cara Mengedit & Menyesuaikan Halaman Produk WooCommerce Anda

Halaman produk sangat penting untuk proses penjualan. Di situlah pembelanja memutuskan untuk melanjutkan dan membeli barang atau pergi tanpa jaminan pengembalian. Tujuan Anda sebagai pemilik toko online adalah mendapatkan pengunjung situs ke halaman produk Anda, kemudian meminta mereka mengambil langkah terakhir Tambahkan ke Troli dan Keluar.

Untuk itu, halaman produk Anda harus melakukan pekerjaan sebaik mungkin untuk mempromosikan barang yang dijual. Template produk default WooCommerce bersih dan profesional, memberi Anda dasar yang kuat untuk halaman Anda yang dapat Anda buat dengan menggunakan metode di bawah ini.

Cara mengoptimalkan template halaman produk WooCommerce Anda

Ada beberapa cara untuk menyesuaikan halaman produk atau template WooCommerce Anda. Beberapa metode disertakan dalam WooCommerce. Untuk yang lain, Anda memerlukan ekstensi. Anda juga dapat menggunakan Editor Situs atau melakukan penyesuaian secara manual. Mari kita lihat lebih dekat setiap opsi.

Cara menyesuaikan halaman produk WooCommerce Anda menggunakan fitur bawaan

Banyak pengoptimalan halaman produk dapat dilakukan tanpa add-on atau pengkodean apa pun. Foto berkualitas tinggi, deskripsi informatif, dan info produk utama memudahkan pengunjung untuk merasa nyaman membeli produk.

Aktifkan ulasan dan peringkat untuk membangun kepercayaan. Siapkan produk terkait, cross-sell, dan upsell untuk meningkatkan ukuran pesanan rata-rata dan memudahkan pelanggan menemukan item baru. Sertakan testimonial pelanggan dalam deskripsi atau tab produk Anda untuk bukti sosial.

Setelah Anda mengoptimalkan konten halaman Anda, Anda dapat lebih menyempurnakan halaman produk Anda dengan menggunakan ekstensi WooCommerce, mengedit template halaman produk Anda dengan Editor Situs, dan menyesuaikannya secara manual dengan kode dan pengait.

Cara menyesuaikan halaman produk Anda menggunakan ekstensi WooCommerce

Ekstensi adalah plugin WordPress yang dibuat khusus untuk menyediakan fungsionalitas tambahan ke toko WooCommerce. Di bawah ini adalah beberapa ekstensi WooCommerce yang dapat Anda gunakan untuk memberikan informasi produk tambahan, meningkatkan pengalaman berbelanja, dan memperluas halaman Anda di luar fitur defaultnya. Anda dapat menemukan lebih banyak ekstensi untuk penyesuaian lebih lanjut di pustaka ekstensi resmi WooCommerce.

1. Variasi Produk Lanjutan untuk WooCommerce

Produk variabel adalah item dengan opsi seperti ukuran dan warna — pilihan yang dibuat pembeli sebelum check out. Di bagian depan, WooCommerce menampilkan dropdown untuk setiap atribut (seperti ukuran atau warna) dengan daftar variasi yang tersedia di bawah (seperti Kecil, Sedang, atau Besar).

Untuk pendekatan yang lebih visual, Variasi Produk Lanjutan untuk WooCommerce memungkinkan Anda menampilkan variasi produk dengan contoh (warna, gambar, dan teks), galeri, dan tabel. Anda bahkan dapat memasukkan video ke dalam swatch Anda.

Contoh variasi ditampilkan di halaman Produk atau halaman Toko utama, berdasarkan pengaturan yang Anda konfigurasikan. Anda dapat membuat swatch dengan memanfaatkan gambar produk dan gambar unggulan yang ada.

Anda juga dapat menyesuaikan tata letak galeri produk, memindahkannya dari posisi default di bawah gambar unggulan ke sisi kiri.

Pelajari lebih lanjut tentang Variasi Produk Lanjutan untuk WooCommerce.

2. Manajer Tab WooCommerce

Tab halaman produk WooCommerce muncul di bawah tombol Tambahkan ke keranjang, dan memungkinkan Anda untuk menampilkan informasi tambahan sambil menjaga elemen kunci seperti judul dan harga di paro atas.

Informasi tambahan ini dapat mencakup bahan dan komposisi produk, berat dan dimensi, bagan ukuran, tabel harga, waktu pengiriman, biaya pengiriman, video petunjuk — apa saja yang akan membantu pelanggan merasa percaya diri melakukan pembelian mereka.

Dengan Manajer Tab WooCommerce, Anda dapat mengganti nama, menyusun ulang, dan menghapus tab default — Deskripsi Panjang, Info Tambahan, dan Ulasan — dan menyesuaikan bagian ini dengan membuat tab global, seluruh kategori, dan khusus produk Anda sendiri.

Gunakan plugin untuk menyetel urutan tab default yang dapat diganti di tingkat produk. Dengan antarmuka drag-and-drop, Anda tidak perlu mengubah file tema atau memasukkan kode.

Jika Anda sudah memiliki tab khusus melalui plugin lain, Manajer Tab WooCommerce mendeteksinya, memberi Anda opsi untuk menampilkan atau menyembunyikannya. Manfaat utama dari plugin ini adalah konten di tab Anda disertakan dalam hasil pencarian situs Anda.

Pelajari selengkapnya tentang Manajer Tab WooCommerce.

3. FAQ Produk

Pertanyaan yang sering diajukan, atau FAQ, adalah cara yang ramah pengguna untuk mengatur dan menampilkan informasi produk kepada pengunjung Anda. Dengan ekstensi FAQ Produk, Anda dapat menambahkan tab FAQ khusus untuk setiap produk dengan pertanyaan dan jawaban tak terbatas.

Plugin bekerja dengan semua jenis produk, dan menambahkan bagian FAQ saat Anda membuat atau mengedit halaman produk.

Di bagian depan, FAQ ditampilkan dalam gaya akordeon dengan animasi.

Pelajari lebih lanjut tentang FAQ Produk.

4. Produk Komposit

Dengan Produk Komposit, pelanggan Anda dapat membuat kit atau produk yang dapat dikonfigurasi.

Untuk setiap produk gabungan, Anda akan mengizinkan pelanggan untuk memilih di antara pilihan yang ditentukan sebelumnya dari inventaris yang ada. Anda dapat menetapkan biaya tambahan untuk pilihan tertentu dan mengizinkan kategori tertentu menjadi opsional.

Misalnya, kalung mungkin berisi opsi untuk rantai (perak, emas), batu (rubi, garnet, zamrud), dan jimat opsional (beberapa pilihan bentuk).

Untuk setiap blok penyusun kit — rantai, batu, dan jimat — Anda dapat memilih SKU yang dapat dipilih pelanggan atau membiarkan mereka memilih opsi apa pun dari seluruh kategori produk.

Logika bersyarat memungkinkan Anda menampilkan atau menyembunyikan opsi berdasarkan pilihan sebelumnya (mis. baju merah tidak tersedia dalam ukuran tertentu), dan pelacakan tingkat komponen mendukung pengelolaan inventaris tingkat lanjut. Jika Anda memiliki banyak opsi, Anda dapat membuat tampilan dengan pengurutan, pemfilteran, dan penomoran halaman untuk belanja yang lebih mudah.

Pelajari lebih lanjut tentang Produk Komposit.

5. Pengaya Produk

Ekstensi Pengaya Produk memungkinkan pembeli Anda menyesuaikan dan meningkatkan pembelian mereka melalui tambahan gratis dan berbayar.

Pengaya dapat mencakup jaminan, bahan berkualitas lebih tinggi, opsi pengiriman prioritas, atau personalisasi seperti monogram dan ukiran khusus. Jika orang sering membeli produk Anda sebagai hadiah, Anda dapat menambahkan opsi bungkus atau kolom pesan hadiah.

Organisasi nirlaba dapat mengizinkan pembeli untuk menyertakan donasi dengan pembelian mereka dan memberikan donasi untuk menghormati seseorang dengan menambahkan nama dan pesan.

Jika Anda memiliki Pemesanan WooCommerce, Add-On Produk memungkinkan Anda membuat opsi untuk layanan tambahan (bilas rambut setelah potong rambut), atau peningkatan VIP untuk tempat duduk dan akses khusus. Ini juga berfungsi dengan Langganan WooCommerce sehingga Anda dapat menawarkan add-on untuk produk langganan Anda.

Pengaya Anda dapat menyertakan bidang khusus yang ditampilkan sebagai kotak teks, dropdown, kotak centang, pilihan berbasis gambar, dan input harga khusus untuk item seperti tip dan donasi. Bidang ini dapat diterapkan ke seluruh katalog Anda atau ditetapkan ke produk tertentu.

Setelah Anda menyiapkan add-on, add-on akan muncul di halaman produk di atas tombol Tambahkan ke Troli sesuai urutan yang Anda pilih.

Pelajari lebih lanjut tentang Add-on Produk.

Sesuaikan halaman produk Anda menggunakan Editor Situs

Dengan tema blok, Anda dapat menyesuaikan tampilan halaman produk Anda dengan mengedit template halaman Produk Tunggal di Editor Situs. Di admin WordPress, buka Penampilan → Editor .  

Pilih "Browse all templates" dari menu dropdown di bagian tengah atas halaman. Pilih template Produk Tunggal dari daftar yang muncul.

Tata letak halaman default berisi header, footer, dan blok Produk Tunggal WooCommerce, yang menampilkan info produk, harga, dan elemen gambar.

Anda harus mencadangkan situs Anda sebelum mengedit template halaman produk Anda. Perubahan tertentu — misalnya, secara tidak sengaja menghapus blok dan penyimpanan Produk Tunggal — akan membuat pengunjung Anda tidak dapat berbelanja atau membeli.

Cara mengedit template header dan footer halaman Produk Tunggal

Tab Template di bawah Pengaturan (ikon roda gigi di kanan atas) berisi tautan untuk mengelola Header dan Footer. Klik salah satu opsi untuk mengelola bagian template halaman tersebut. Anda juga dapat mengklik area template secara langsung untuk mulai mengedit. Ingat bahwa setiap perubahan yang dilakukan di sini akan diterapkan ke semua produk yang menggunakan template.

Di header, Anda dapat mengedit Judul Situs dan tautan di menu navigasi utama Anda, dan bahkan menambahkan blok baru untuk menyesuaikan halaman produk Anda secara khusus. Gunakan ruang ini untuk menambahkan gambar, teks, dan lainnya untuk meningkatkan daya jual halaman produk Anda. Anda dapat menambahkan catatan atau spanduk promosi atau kebijakan untuk memberi tahu pembeli tentang obral saat ini atau cara mendapatkan pengiriman gratis untuk pesanan dengan jumlah tertentu.

Anda dapat melakukan hal serupa dengan footer halaman produk. Misalnya, tambahkan testimoni pelanggan atau informasi tentang kebijakan Jaminan Kepuasan.

Cara menyesuaikan badan Produk Tunggal

Blok Produk Tunggal menampilkan peringatan tebal di bagian atas, “Jangan hapus blok ini! Menghapus blok ini akan menyebabkan efek yang tidak diinginkan pada toko Anda.” Tanggapi pesan ini dengan serius!

Namun, Anda dapat menambahkan blok baru di sekitar blok Produk Tunggal untuk sepenuhnya menyesuaikan desain halaman produk Anda.

Gunakan ikon + untuk menambahkan elemen di atas atau di bawah blok Produk Tunggal, lalu sertakan blok apa pun yang Anda inginkan untuk menyesuaikan halaman.

Gunakan blok Paragraph untuk menyertakan penawaran saat ini (“Belanjakan $100 atau lebih untuk pengiriman gratis”), jaminan kepuasan, atau apa pun yang akan membantu pengunjung membuat keputusan untuk membeli. Tambahkan blok Video yang memberikan tampilan di balik layar pada proses Anda. Atau sertakan produk rekomendasi tertentu yang ingin Anda promosikan. Langit adalah batasnya di sini!

Dan untuk setiap blok, Anda dapat mengedit pengaturan seperti warna latar belakang, tipografi, dan spasi untuk menjadikannya milik Anda sendiri.

Sesuaikan halaman produk Anda secara manual (menggunakan kode dan pengait)

Untuk opsi lanjutan — tanpa biaya atau pemeliharaan plugin — Anda dapat mengedit dan menyesuaikan halaman produk Anda secara manual menggunakan kode dan pengait.

Sebelum Anda membuat perubahan apa pun pada file Anda, penting bagi Anda untuk meluangkan waktu untuk mencadangkan WooCommerce. Jika Anda menggunakan Pencadangan Jetpack VaultPress, ini dilakukan untuk Anda secara otomatis, dalam waktu nyata. Jadi, jika ada perubahan yang menyebabkan situs Anda down, Anda dapat memulihkan cadangan hanya dengan beberapa klik, meskipun Anda tidak memiliki akses ke dasbor WordPress.

Dan Anda juga ingin menggunakan tema anak untuk melakukan perubahan ini. Jika tidak, saat Anda memperbarui tema atau WooCommerce, Anda mungkin kehilangan semua penyesuaian. Opsi lainnya adalah menggunakan plugin seperti Cuplikan Kode, yang memungkinkan Anda menambahkan kode khusus ke situs Anda dalam cuplikan yang dapat Anda aktifkan dan nonaktifkan sesuai kebutuhan.

Sesuaikan halaman produk WooCommerce menggunakan pengait

Hooks memungkinkan pemilik situs untuk menambahkan kode dan menyesuaikan halaman tanpa bahaya yang terkait dengan pengeditan file inti. Ada dua jenis pengait: tindakan dan filter. Tindakan memungkinkan Anda memasukkan kode pada titik tertentu, sementara filter memungkinkan Anda memanipulasi dan mengembalikan variabel.

Misalnya, Anda dapat menggunakan tindakan untuk menambahkan bidang pembayaran baru, lalu menggunakan filter untuk mengubah label atau placeholder bidang pembayaran yang ada. Anda dapat menemukan daftar pengait WooCommerce yang tersedia di sini.

Berikut adalah beberapa contoh perubahan yang dapat Anda lakukan pada halaman produk Anda menggunakan pengait:

• Ubah teks tombol Add to Cart. Misalnya, Anda dapat mengatakan "Beri Donasi Sekarang".
• Sesuaikan remah roti WooCommerce. Ubah pemisah remah roti, buang remah roti sama sekali, dll.
• Hapus, ganti nama, dan susun ulang tab produk. Tambahkan tab Bahan, misalnya, atau sertakan video di salah satu tab.

Sesuaikan halaman produk WooCommerce menggunakan CSS

CSS adalah bahasa pengkodean yang digunakan untuk mengontrol elemen desain (berlawanan dengan JavaScript, yang mengontrol tindakan). Anda dapat menggunakannya untuk mengubah desain halaman produk Anda. Setelah Anda mempelajari dasar-dasar CSS, Anda dapat menyesuaikan semuanya mulai dari warna dan font hingga ukuran elemen individual.

Anda dapat dengan mudah menambahkan kode CSS dengan masuk ke Tampilan → Kustomisasi → CSS tambahan di dasbor WordPress Anda. Misalnya, jika Anda ingin mengubah warna font judul produk, gunakan kode berikut, ganti kode hex warna dengan milik Anda:

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

Jika Anda ingin mengubah warna tombol Beli Sekarang, Anda akan menggunakan kode ini, sekali lagi mengganti kode hex dengan warna pilihan Anda:

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

Anda dapat melihat lebih banyak contoh di artikel ini dari WooCommerce.

Cara meningkatkan kecepatan pemuatan halaman produk Anda

Situs yang memuat cepat penting bagi pengunjung dan mesin telusur. Orang tidak ingin menunggu dan mesin pencari tidak ingin mengirim orang ke situs yang berkinerja buruk.

Secara harfiah setiap detik berarti — penundaan satu detik dalam waktu pemuatan dapat mengurangi rasio konversi sebesar 20%!

Jetpack Boost adalah solusi pengoptimalan kinerja dan kecepatan situs web teratas untuk WordPress. Ini memiliki proses penyiapan yang cepat dan mudah — tidak diperlukan pengembang — dan membanggakan hasil yang mengalahkan lima plugin kinerja teratas dalam pengujian head-to-head.

Setelah Anda menginstal plugin gratis, Anda dapat menjalankan audit dan mendapatkan laporan tentang skor kinerja situs Anda saat ini. Ini akan berfungsi sebagai tolok ukur yang dapat Anda gunakan untuk mengukur peningkatan pada Data Web Inti Anda, metrik yang digunakan Google untuk mengukur pengalaman pengguna dan kinerja teknis situs Anda.

Dasbor sederhana memudahkan untuk mengonfigurasi opsi pengoptimalan melalui aktivasi sekali klik. Ini memberi Anda fleksibilitas untuk menguji modul kinerja satu per satu dan mengonfigurasi Jetpack Boost agar sesuai dengan skenario apa pun.

Untuk lebih banyak cara mempercepat halaman produk Anda, lihat Sembilan Cara Mempercepat Toko WooCommerce.

Pertanyaan umum tentang menyesuaikan halaman produk

Masih ada pertanyaan? Lihatlah jawaban untuk beberapa yang umum di bawah ini.

Apa cara terbaik untuk menyesuaikan halaman produk WooCommerce?

Tidak ada satu pun cara terbaik. Cara terbaik untuk Anda tergantung pada tingkat kenyamanan Anda dengan berbagai pendekatan.

Editor Situs menempatkan semua kekuatan di tangan Anda, membiarkan Anda menyeret dan melepaskan elemen untuk membuat halaman produk Anda sendiri yang dipersonalisasi tanpa harus mengedit kode apa pun. Ini adalah solusi yang sangat baik untuk pemula dan pengguna tingkat lanjut!

Jika Anda mencari fungsionalitas tambahan tertentu, ekstensi WooCommerce adalah pilihan yang bagus. Mereka diperiksa dan disetujui oleh WooCommerce, dan memberi pedagang opsi penyesuaian lanjutan tanpa kode khusus.

Kustomisasi dan pengkodean manual menawarkan fleksibilitas terbesar, tetapi juga membutuhkan pengetahuan paling teknis. Dibandingkan dengan menggunakan blokir atau ekstensi, metode ini memiliki peluang terbesar untuk menyebabkan masalah atau bahkan merusak situs.

Haruskah saya mencadangkan situs saya sebelum mengedit template halaman produk?

Ya. Tidak seperti halaman dan postingan, templat situs tidak memiliki riwayat revisi. Cadangkan situs Anda sebelum memperbarui template halaman produk Anda, sehingga Anda dapat melakukan pemulihan cepat jika ada masalah.

Pencadangan Jetpack VaultPress adalah plugin pencadangan WordPress waktu nyata, yang berarti bahwa situs Anda tidak hanya dicadangkan pada jadwal harian atau saat Anda membuat salinan manual. Alih-alih, itu disimpan secara otomatis setiap kali Anda membuat perubahan pada situs Anda, pelanggan melakukan pemesanan, atau pengunjung meninggalkan komentar. Setiap kali sesuatu yang penting terjadi? Ini disimpan!

Toko e-niaga tidak boleh kehilangan data, terutama jika data tersebut mewakili pesanan pelanggan di dunia nyata. Jangan puas dengan solusi yang hanya menyimpan situs Anda sesekali atau memerlukan interaksi layanan pelanggan yang lama untuk memulihkan sesuatu saat ada masalah.

Dengan Pencadangan Jetpack VaultPress, Anda dapat memulihkan situs dengan satu klik dan kembali online dengan cepat. Dengan aplikasi seluler Jetpack, Anda dapat memulihkan kapan pun, di mana pun, meskipun situs benar-benar mati.

Bagian terbaik untuk pemilik toko? Semua data dan pesanan pelanggan Anda dilindungi dan tetap terkini.

Apa saja praktik terbaik untuk menyesuaikan halaman produk WooCommerce?

Apa pun metode yang Anda gunakan untuk mengedit dan menyesuaikan halaman produk WooCommerce Anda, ikuti praktik terbaik ini untuk melindungi diri Anda, situs Anda, dan pelanggan Anda.

Cadangkan situs Anda terlebih dahulu, setiap saat . Saat Anda menambahkan atau memperbarui kode situs, satu kesalahan dapat menyebabkan masalah. Anda harus siap memulihkan situs secepat mungkin, tanpa kehilangan satu pesanan pun. Pencadangan Jetpack VaultPress adalah solusi pencadangan otomatis waktu nyata terbaik untuk WordPress.

Itu dilakukan untuk Anda, jadi Anda bahkan tidak perlu khawatir tentang menyimpan situs Anda sebelum bereksperimen dengan perubahan.

Buat perubahan kode Anda di luar file tema induk Anda . Saat Anda mengedit file tema atau plugin, perubahan tersebut akan ditimpa dan dibatalkan saat tema atau plugin diperbarui lagi.

Ada beberapa cara untuk menambahkan kode ke situs Anda tanpa mengedit file tema atau plugin secara langsung. Anda dapat menggunakan plugin Cuplikan Kode untuk menambahkan, mengedit, atau menghapus elemen pada halaman, dan mengatur gaya situs Anda melalui bidang CSS tambahan di Penyesuai Tema. Anda juga dapat membuat tema anak. Yang penting adalah membuat perubahan Anda di tempat yang tidak akan terpengaruh oleh pembaruan tema atau plugin.

Awasi kecepatan. Tidak peduli bagaimana Anda menyesuaikan halaman produk Anda, Anda ingin memastikan bahwa kecepatan situs Anda tidak berkurang. Dengan Jetpack Boost, Anda dapat langsung meningkatkan area utama yang meningkatkan pengalaman pengguna dan persepsi Google tentang kualitas situs Anda. Situs yang lebih cepat berarti pelanggan akan cenderung bertahan dan Google akan lebih cenderung merekomendasikan Anda di hasil pencarian. Dorongan cepat bisa sangat bermanfaat.