Cara Menyesuaikan Halaman Produk WooCommerce Anda
Diterbitkan: 2022-10-18Halaman produk di situs web eCommerce mana pun dituntut sebagai bagian terpenting. Karena berisi semua detail mengenai suatu produk secara teratur dengan informasi tambahan seperti produk terkait, dll.
Halaman produk WooCommerce default baik-baik saja untuk tampilan cepat produk dasar , add-to-cart, dan fungsionalitas dasar lainnya, tetapi ini tidak cukup dalam lingkungan eCommerce kompetitif modern. Halaman produk memainkan fungsi penting dalam platform bisnis yang dibangun WooCommerce sebagai salah satu halaman terpenting. Namun, halaman default tidak memotongnya.
Pentingnya menyesuaikan halaman produk tidak dapat dilebih-lebihkan.
Dengan menyesuaikan halaman produk Anda, Anda pada dasarnya memberikan pelanggan Anda pengalaman berbelanja yang unik, yang juga penting untuk retensi pengunjung dan meningkatkan jumlah penjualan.
Dalam posting ini, kami akan memandu Anda melalui proses bagaimana memanfaatkan editor halaman produk WooCommerce dan widget kustom WooCommerce untuk membuat halaman produk yang menarik, dan banyak lagi.
Daftar isi
Alat yang Diperlukan untuk Menyesuaikan Halaman Produk WooCommerce?
Pertama dan terpenting, Anda harus menginstal WordPress versi terbaru di server Anda, dan di atas itu, plugin WooCommerce harus diinstal untuk mengakomodasi semua fungsi halaman toko/toko.
Anda juga memerlukan tema WordPress eCommerce yang digerakkan oleh fungsionalitas dan yang terakhir, Anda akan memerlukan plugin WooCommerce Elementor Shop Builder . Dengan plugin pembuat toko Elementor, Anda akan dapat sepenuhnya mengontrol dan menyesuaikan halaman toko individual dan kisi produk pasar, daftar Produk, blok perbandingan produk, dll.
Cara Menyesuaikan Halaman Produk WooCommerce
Kami berharap Anda memiliki instalasi WordPress yang berfungsi dan tema eCommerce yang berfungsi sudah terpasang di server Anda. Sekarang, mari kita melalui proses langkah demi langkah penyesuaian halaman produk dimulai dengan sumber daya & alat WordPress tambahan yang diperlukan.
Langkah 1: Pemasangan Plugin Add-on Elementor WooCommerce
Dalam contoh langsung penyesuaian halaman produk WooCommerce dengan berbagai elemen & variasi produk WooCommerce contoh halaman produk modern yang harus disajikan kepada pelanggan, kami akan menggunakan sesuatu yang mirip dengan komposer visual pembuat halaman produk WooCommerce – yang disebut ShopReady.
Pembangun toko ShopReady Elementor adalah alat yang mencakup semua yang luar biasa untuk membuat situs web toko eCommerce yang kuat. Plugin ini dilengkapi dengan 105+ widget yang dibuat secara profesional dengan fungsi dan alat khusus kasus penggunaan. Misalnya, dengan plugin eCommerce ini, Anda dapat membuat filter produk WooCommerce fungsional yang dapat memfilter produk dengan harga, ukuran, berat, warna, peringkat, pengiriman, dll.
Untuk memulai dengan plugin addon WooCommerce ini, mulailah dengan mengunduhnya. Untuk melakukannya, masuk ke Dasbor WordPress Anda , buka Dan klik tombol Instal .
Tunggu hingga instalasi plugin berhasil dan klik Activate .
Menu ShopReady akan muncul di Dashboard WordPress Anda. Dari sini, Anda akan memiliki akses ke semua widget, modul, dan konten prasetel yang disediakan oleh plugin penyesuai halaman Toko.
Dari menu sederhana ini, Anda dapat mengaktifkan/menonaktifkan widget, membuat template, dan memasukkan kunci API untuk berbagai fungsi.
Fitur hebat lainnya dari plugin ini adalah pengalih mata uangnya untuk kemampuan WooCommerce. Untuk mengaktifkan fungsi ini, Anda harus mengikuti petunjuk yang ditunjukkan di bawah ini.
Untuk menambahkan kunci API mata uang Anda yang dibuat oleh Exchangerate , klik tab API.
Masuk ke dasbor akun Exchangerate Anda dan salin kunci API Anda untuk mendapatkannya. Setelah menempelkan kunci API Anda, buka Dasbor WordPress > ShopReady > API dan klik Langkah 2: Gunakan Template Halaman Produk Preset, atau Buat Satu Dari Awal
Langkah selanjutnya adalah mulai mengerjakan halaman produk, tetapi sebelum itu, Anda harus menambahkan produk ke situs web WooCommerce Anda. Jika Anda tidak tahu bagaimana melakukannya, Anda dapat mengikuti panduan ini di – Cara WooCommerce menambahkan produk dengan cepat .
Sekarang untuk mulai menyesuaikan halaman untuk etalase produk, gunakan ShopReady – WooCommerce Builder untuk membuat halaman produk sederhana dengan membuka dasbor plugin dan mengklik tab Template . Aktifkan kategori Template Produk dan cari pengaturan Produk Tunggal. Sekarang klik pada ikon edit.
Dan Anda akan diarahkan ke layar Elementor Editor . Sekarang untuk mulai menyesuaikan halaman, klik simbol plus untuk menambahkan bagian Elementor. Ada berbagai jenis bagian Elementor yang dapat Anda tambahkan ke halaman Anda tergantung pada bagaimana Anda ingin halaman Anda terlihat dan widget mana yang ingin Anda gunakan.
Langkah 3: Kustomisasi Halaman Produk WooCommerce dengan Elementor Widgets
- Menambahkan Judul Produk
Sekarang karena Anda telah menempatkan struktur bagian Elementor dasar untuk halaman produk WooCommerce Anda, Anda dapat mulai dengan menambahkan judul produk. Untuk melakukannya, Anda harus drag-n-drop widget Product Title di halaman produk.
Dan untuk menampilkan judul produk yang sesuai, klik tab Content , dan di bawahnya Anda akan menemukan opsi Editor Refresh . Pilih judul produk yang sesuai dari opsi Produk Demo .
Anda harus menambahkan atau mengedit informasi produk yang sesuai dari Dasbor Produk WooCommerce agar data ini dapat menampilkan judul produk yang sesuai.
- Menambahkan Gambar Unggulan ke Halaman Produk
Selanjutnya, Anda memerlukan galeri gambar produk & gambar fitur untuk produk Anda. Untuk tujuan ini, Anda dapat menggunakan salah satu dari beberapa widget gambar yang disediakan oleh addon Elementor all in one untuk eCommerce.
Untuk contoh ini, kami akan menggunakan Thumbnail ShopReady dengan widget Zoom, ini sesuai dengan judulnya. Dengan widget ini, Anda dapat menunjukkan kepada pelanggan Anda versi zoom hover produk WooCommerce dari gambar produk Anda saat mereka mengarahkan kursor ke gambar produk Anda.
Sama seperti sebelumnya, Anda dapat memilih gambar produk yang benar dari opsi Produk Demo , tab Konten .
- Menambahkan Blok untuk Widget Harga
Item penting lainnya yang harus dimiliki di halaman produk eCommerce Anda adalah blok harga produk. Untuk ini, Anda harus memperbarui atribut produk WooCommerce dengan pembaruan yang benar, dan menggunakan widget Harga ShopReady , yang harus ditempatkan di bawah judul produk.
Untuk menampilkan harga yang benar, pilih judul produk dari opsi Produk Demo , di bawah tab Konten .
- Menambahkan Deskripsi Produk
Anda juga memiliki kemampuan untuk menambahkan deskripsi produk yang sangat dapat disesuaikan menggunakan widget Deskripsi Produk add-on produk WooCommerce ini . Dari tab gaya, Anda akan memiliki opsi untuk menyesuaikan bagaimana deskripsi produk akan ditampilkan kepada massa.
- Menambahkan Fungsionalitas Tambahkan ke Keranjang
Tambahkan ke Keranjang adalah fitur lain yang sangat penting untuk dimiliki, memungkinkan pelanggan Anda memiliki beberapa produk di halaman keranjang mereka sebelum melanjutkan ke halaman checkout.
Untuk memiliki fungsi Tambah ke Keranjang yang kuat di halaman toko eCommerce Anda, Anda dapat menggunakan widget Tambahkan ke Keranjang ShopReady. Dengan widget ini, Anda dapat membiarkan pelanggan Anda menambah & mengurangi kuantitas produk keranjang mereka langsung dari blok Tambahkan ke Keranjang.
Anda juga menyesuaikan tombol add-to-cart Elementor Anda dari tipografi tab Style Elementor Style WooCommerce , warna, latar belakang, margin, padding, dll.
- Menambahkan Metadata ke Halaman Produk
Untuk memberikan pengalaman berbelanja yang lebih baik bagi pelanggan Anda, Anda harus menerapkan filter produk WooCommerce menggunakan metadata & atribut produk yang telah Anda tambahkan saat menambahkan produk ke WooCommerce .
Untuk menampilkan data ini di halaman produk Anda, cari widget ShopReady Meta dan letakkan di bawah tombol tambahkan ke troli.
Tag produk & metadata Anda akan muncul dengan benar saat Anda memilih judul produk yang benar dari opsi Produk Demo , di bawah tab Konten .
- Menambahkan Tombol Bagikan Media Sosial ke Halaman Produk
Pelanggan Anda juga dapat membagikan posting produk Anda di media sosial langsung dari halaman produk WooCommerce Anda dengan menggunakan blok tombol berbagi media sosial sederhana. Yang dapat Anda buat hanya dengan menggunakan widget Berbagi Sosial Elementor drag-n-drop.
Blok dapat disesuaikan dengan ikon media sosial, teks, & tautan yang dapat dibagikan, langsung dari tab Konten . Dan juga dapat dikustomisasi untuk mengubah tampilan blok berbagi sosial dari tab Elementor Style .
Dan Anda selesai dengan dasar-dasar kustomisasi halaman produk WooCommerce.
Langkah 4: Menambahkan Produk Terkait ke Halaman Produk WooCommerce
Cara yang bagus untuk meningkatkan penjualan online adalah dengan menampilkan produk terkait di halaman produk Anda dengan menggunakan widget Produk Terkait add-on produk WooCommerce. Dengan widget Produk Terkait ShopReady , Anda dapat membuat blok penggeser produk yang menakjubkan di beberapa bagian.
Untuk menggunakan widget, Anda hanya perlu menarik dan melepas widget di bawah blok produk tunggal dan memilih setiap produk satu per satu yang ingin Anda tampilkan di bawah halaman produk tunggal Anda.
Kesimpulannya
Kami berharap panduan informatif ini membantu Anda mendapatkan pemahaman yang lebih luas tentang kustomisasi templat halaman produk WooCommerce & bagaimana Anda dapat menggunakan alat luar biasa ini untuk membumbui situs web eCommerce Anda dengan fungsionalitas yang lebih baik.
Dengan detail produk popup WooCommerce ke tabel perbandingan produk, semua yang dibutuhkan pasar eCommerce, ShopReady dapat memberikannya. Jika Anda memiliki pertanyaan tentang topik ini, jangan ragu untuk menghubungi bagian komentar di bawah.