Cara Menyesuaikan Halaman Produk WooCommerce di Divi

Apakah Anda menggunakan Divi dan ingin mengedit halaman produk Anda untuk meningkatkan tingkat konversi Anda? Anda telah datang ke tempat yang tepat! Dalam panduan ini, kami akan menunjukkan kepada Anda berbagai cara untuk menyesuaikan halaman produk WooCommerce di Divi .

WooCommerce adalah alat eCommerce terbaik di luar sana. Plugin yang tepat dan tema WordPress yang dioptimalkan adalah langkah pertama untuk memiliki toko WooCommerce yang sukses. Tapi itu tidak cukup untuk memiliki bisnis yang sukses. Untuk membawa toko Anda ke tingkat berikutnya, Anda harus menyesuaikan bagian yang paling penting. Kami telah melihat cara mengedit halaman toko dan halaman checkout, jadi hari ini kami akan menunjukkan cara menyesuaikan halaman produk WooCommerce di Divi .

Mengapa Menyesuaikan Halaman Produk WooCommerce?

Halaman produk adalah tempat Anda menampilkan barang-barang yang Anda jual di toko Anda. Itu dapat membuat atau menghancurkan bisnis Anda sehingga Anda harus meluangkan waktu untuk mengoptimalkannya untuk meningkatkan tingkat konversi Anda.

Secara default, plugin WooCommerce hadir dengan templat halaman produk khusus. Jadi apakah Anda menggunakan tema sederhana seperti GeneratePress atau yang kompleks seperti Avada, elemen dan desain halaman produk akan sama. Itu sebabnya jika Anda ingin membuat kesan pada pelanggan Anda, Anda harus menyesuaikan halaman produk default WooCommerce .

Mengubah warna dan elemen halaman produk adalah awal yang baik, tetapi masih banyak lagi yang dapat Anda lakukan. Salah satu opsinya adalah membuat template halaman produk baru dengan desain khusus. Dengan sedikit PHP, HTML, dan CSS Anda dapat mendesain ulang halaman produk Anda sepenuhnya. Namun, jika Anda menggunakan Divi, ada opsi yang jauh lebih baik.

Tema Divi hadir dengan pembuat halaman kustomnya sendiri yang disebut Divi Builder . Ini memungkinkan Anda untuk dengan mudah menyesuaikan halaman produk WooCommerce dan setiap inci situs Anda tanpa menulis satu baris kode pun. Mari kita lihat lebih dekat bagaimana melakukannya.

Cara Menyesuaikan Halaman Produk WooCommerce di Divi

Untuk demonstrasi ini, kami akan menggunakan plugin Divi Builder untuk membuat semua perubahan pada halaman produk kami. Sebelum memulai, pastikan Anda telah menginstal Divi dengan Divi Builder di situs Anda.

Aktifkan Editor Visual

Untuk mulai menyesuaikan halaman produk WooCommerce Anda di Divi dengan Divi Builder, buka halaman produk apa pun yang ingin Anda edit. Setelah halaman terbuka, Anda akan melihat tombol yang disebut Aktifkan Editor Visual di bilah admin. Klik untuk mengaktifkan Divi Builder .

Sekarang setelah Anda mengaktifkan editor visual Divi, Anda akan dapat memilih modul apa pun di halaman itu dan mengeditnya. Untuk menyesuaikan template Anda saat ini, Anda cukup mengedit modul yang ada atau menambahkan yang baru. Di bagian modul, Anda akan melihat modul berbasis WooCommerce seperti:

• Masukkan ke keranjang
• informasi tambahan
• Remah roti
• Pemberitahuan keranjang
• Keterangan
• Galeri
• Gambar-gambar
• meta
• Harga
• Peringkat
• Produk Terkait
• Ulasan
• Saham
• tab
• Judul
• Upsell

Anda dapat menambahkan salah satu modul ini ke halaman Anda dan membuatnya lebih ramah pengguna hanya dengan mengkliknya. Selain itu, versi terbaru pembuat Divi bekerja sangat baik dengan WooCommerce sehingga Anda dapat menyesuaikan modul apa pun dengan mudah. Mari kita lihat beberapa hal yang dapat Anda edit.

1. Tampilkan atau Sembunyikan Ulasan

Mari kita mulai dengan sesuatu yang sederhana. Seperti yang Anda lihat di atas, Anda dapat dengan mudah menampilkan atau menyembunyikan fitur peringkat bintang dan mematikan jumlah ulasan pelanggan. Cukup klik elemen tinjauan lalu tekan ikon Setelan . Lalu pergi ke bagian Elemen dan Anda akan memiliki opsi untuk menampilkan atau menyembunyikan peringkat bintang dan jumlah ulasan pelanggan.

Untuk menciptakan kepercayaan di antara pelanggan online Anda, kami sarankan Anda menampilkan peringkat bintang dan ulasan di halaman produk.

2. Modifikasi Galeri

Bukan rahasia lagi bahwa sebuah gambar bernilai seribu kata. Itu sebabnya untuk meningkatkan tingkat konversi Anda, ada baiknya menambahkan galeri produk ke halaman produk Anda. WooCommerce menyertakan fitur ini secara default, jadi yang perlu Anda lakukan hanyalah mengunggah gambar ke halaman produk atau memilihnya dari halaman media.

Setelah Anda memperbarui halaman produk dengan gambar Anda, itu akan terlihat seperti ini:

Jika karena alasan tertentu Anda hanya ingin menampilkan satu gambar dari setiap produk, dengan Divi Builder Anda dapat menyembunyikan galeri produk apa pun. Cukup klik galeri, tekan ikon Pengaturan , buka Elemen dan Anda akan memiliki opsi untuk menonaktifkan galeri.

Selain itu, Anda dapat menyembunyikan gambar unggulan dan lencana penjualan. Mengingat betapa pentingnya gambar saat menjual, kami sarankan Anda menambahkan setidaknya 3-4 gambar untuk setiap produk Anda.

3. Modifikasi Gambar Unggulan

Cara menarik lainnya untuk menyesuaikan halaman produk WooCommerce di Divi adalah dengan mengedit gambar unggulan . Kesan pertama penting sehingga Anda harus memilih gambar fitur yang menarik untuk produk Anda. Gambar ini juga akan terlihat di halaman arsip toko.

Saat Anda membuka opsi gambar unggulan menggunakan pembuat Divi, Anda akan dapat mengubah gambar unggulan dan lencana penjualan.

Seperti yang kami sebutkan sebelumnya, kami menyarankan Anda menampilkan gambar unggulan yang menarik karena dapat berdampak besar pada tingkat konversi Anda.

4. Modifikasi Tombol Tambahkan ke Keranjang

Untuk menambahkan produk ke troli, pengguna perlu mengklik tombol Tambahkan ke troli. WooCommerce hadir dengan bidang kuantitas dengan tombol Tambahkan ke troli secara default sehingga Anda tidak perlu membuat tombol secara manual. Di bagian ini, kami akan menunjukkan kepada Anda bagaimana Anda dapat memodifikasi tombol Tambahkan ke troli dengan pembuat Divi.

Di bawah bagian Elemen , Anda akan melihat dua opsi utama.

• Bidang kuantitas
• Saham

Jika Anda ingin memberi pengguna pilihan untuk memilih jumlah produk, biarkan bidang kuantitas apa adanya. Namun, jika Anda menjual kursus online, misalnya, Anda mungkin ingin menonaktifkan opsi kuantitas untuk menghilangkan gangguan dari halaman produk.

Seperti yang Anda lihat, setelah kami mematikan bidang kuantitas, bidang tersebut akan hilang. Di halaman produk ini, kami tidak memiliki opsi untuk melihat opsi stok tetapi jika Anda menampilkan stok di situs Anda, Anda dapat mengaktifkan atau menonaktifkannya dengan cara yang sama.

5. Terapkan perubahan pada Produk terkait

Menampilkan produk terkait pembeli adalah cara yang bagus untuk meningkatkan penjualan Anda. Biasanya, WooCommerce menampilkan produk terkait berdasarkan kategori utama item secara default. Namun, jika tema atau template Anda tidak menampilkan produk terkait, kami punya solusi untuk Anda. Mari kita lihat bagaimana Anda dapat menyesuaikan halaman produk dan menambahkan baris baru dengan elemen terkait dengan Divi.

Pertama, tambahkan baris baru ke halaman. Untuk tutorial ini, kami akan menambahkan satu baris tetapi Anda dapat memilih gaya yang lebih sesuai dengan toko Anda.

Setelah itu, tambahkan modul produk terkait WooCommerce ke baris seperti yang ditunjukkan di bawah ini.

Anda akan melihat bahwa bagian produk terkait akan ditambahkan ke halaman. Kemudian, Anda dapat menyesuaikan tata letak dan warna.

Jika Anda tidak menampilkan produk terkait, kami sarankan Anda mencobanya. Mereka mudah disiapkan dan dapat membantu Anda meningkatkan penjualan.

6. Tambahkan Toggle

Toggles adalah cara terbaik untuk menampilkan informasi pada halaman produk Anda sekaligus menjaganya tetap bersih. Di Divi, Anda dapat menambahkan sakelar menggunakan modul Toggle. Di bagian ini, kami akan menunjukkan cara menambahkan modul sakelar di bawah deskripsi produk.

Mari kita mulai dengan mengarahkan kursor ke deskripsi produk dan mengklik tombol +. Kemudian, cari Toggle di bilah pencarian dan buka modul toggle.

Untuk menambahkan sakelar, Anda memerlukan dua hal utama.

• Judul
• Tubuh

Untuk demonstrasi ini, kami akan menggunakan nama produk sebagai judul toggle dan deskripsi produk sebagai badan toggle. Untuk melakukan ini, cukup klik ikon database di sebelah kanan dan Anda akan melihat berbagai jenis konten dalam database. Untuk judul, kami akan memilih judul Produk/Arsip sebagai judul tetapi Anda dapat memilih jenis konten yang paling sesuai dengan kebutuhan Anda.

Sekarang mari kita lakukan hal yang sama untuk tubuh. Tekan ikon database dan pilih opsi Deskripsi Produk dari menu.

Setelah Anda menyimpan ini, Anda akan melihat modul sakelar sederhana di halaman produk Anda yang dapat ditekan pengguna untuk melihat informasi lebih lanjut tentang produk.

Divi juga memungkinkan Anda untuk menambahkan elemen khusus lainnya seperti judul dan deskripsi serta font, warna, dan sebagainya. Kami menyarankan Anda bermain-main dan menyesuaikan halaman produk Anda dengan sakelar.

Kiat Pro Halaman Produk WooCommerce

Sebelum menyimpulkan panduan ini, kami memiliki tip cepat untuk Anda.

Perbarui Tema Dan Plugin Secara Teratur

Untuk memastikan Anda selalu memiliki akses ke fitur-fitur terbaru yang ditawarkan Divi, kami sangat menyarankan Anda untuk terus memperbarui tema Divi Anda, plugin pembuat Divi, dan inti WordPress ke versi stabil terbaru yang tersedia.

Cara termudah untuk melakukannya adalah dengan mengaktifkan pembaruan otomatis dari panel tema Divi.

Yang perlu Anda masukkan hanyalah Nama Pengguna Tema Elegan dan kunci API yang dapat Anda temukan di dasbor akun Tema Elegan Anda. Setelah Anda memasukkannya, simpan perubahannya dan Anda akan menerima pembaruan otomatis.

Penggunaan di seluruh situs

Dengan modul Divi Builder baru, Anda akan dapat menambahkan bagian dan menyesuaikan halaman atau posting Anda. Yang perlu Anda lakukan adalah mengaktifkan editor visual, menambahkan elemen yang Anda inginkan, dan memilih modul yang ingin Anda gunakan. Misalnya, jika Anda menulis ulasan khusus untuk produk Anda, pertimbangkan untuk menambahkan tombol Tambahkan ke troli ke pos ulasan sehingga pengguna dapat langsung mengaksesnya.

Bonus: Metode lain untuk mengedit halaman produk WooCommerce

Jika Anda mencari cara lain untuk menyesuaikan halaman produk Anda, lihat panduan ini di mana Anda akan mempelajari cara menggunakan plugin, pembuat halaman, dan cuplikan kode untuk mengedit halaman produk Anda.

Kesimpulan

Singkatnya, menyesuaikan halaman produk WooCommerce dengan Divi dapat membantu Anda meningkatkan penjualan dan meningkatkan tingkat konversi Anda. Kabar baiknya adalah Anda dapat melakukannya tanpa menulis satu baris kode pun.

Dengan Divi Builder, Anda dapat dengan mudah mengedit halaman produk di toko Anda tanpa plugin pembuat halaman tambahan. Dalam panduan ini, kami telah menunjukkan kepada Anda cara menampilkan atau menyembunyikan ulasan, gambar unggulan, dan galeri gambar, dan cara menyesuaikan tombol Tambahkan ke troli dan bagian produk terkait. Ini hanya beberapa hal yang dapat Anda lakukan sehingga kami mendorong Anda untuk bermain-main dengan Divi Builder dan membuat modifikasi lainnya.

Pengalaman pembuatan halaman seret dan lepas akan membantu Anda dengan mudah menyesuaikan setiap inci toko Anda bahkan jika Anda tidak memiliki keterampilan pengkodean.

Perubahan apa yang Anda lakukan pada toko Anda menggunakan Divi? Apakah Anda memiliki masalah dalam mengikuti tutorial kami? Beri tahu kami di bagian komentar di bawah!