Bagaimana Cara Mudah Menyesuaikan Halaman Toko WooCommerce?

Halaman toko default WooCommerce telah diatur sebelumnya secara dinamis, dan sebagian besar Anda tidak memiliki kendali atas desainnya. Lalu bagaimana cara menyesuaikan halaman toko WooCommerce? Bagaimana membuatnya sesuai kebutuhan Anda karena ini adalah salah satu halaman penting di situs Anda? Mampu mengelola halaman toko secara efektif jelas merupakan keuntungan.

Halaman toko sering digunakan sebagai tempat untuk menampilkan semua barang Anda saat ini yang tersedia untuk dijual. Halaman toko mungkin tidak ditampilkan dengan cara yang sama seperti halaman lain di situs Anda yang muncul karena Anda dapat memiliki pengaturan yang berbeda untuk arsip jenis posting tertentu.

Tema yang Anda gunakan akan menjadi dasar tampilan dan tata letak halaman toko WooCommerce default Anda. Produk di halaman toko biasanya ditampilkan dalam tata letak kotak .

Tata letak kotak biasanya memiliki gambar produk, serta harga, nama produk, dan peringkat bintang dari ulasan pelanggan. Deskripsi produk singkat tercantum untuk setiap produk di halaman itu. Variasi produk atau kuantitas produk biasanya tidak disertakan dalam data kisi.

Banyak halaman toko WooCommerce default memiliki lebar penuh . Beberapa memiliki bilah sisi yang memungkinkan Anda untuk menambahkan widget filter (periksa plugin filter produk WooCommerce terbaik) dan opsi penyesuaian lainnya.

Halaman toko dapat terlihat bagus tanpa penyesuaian apapun . Kustomisasi bisa ideal untuk produk tertentu, tetapi juga tidak efektif untuk item lain. Jika Anda mencari cara yang lebih baik untuk menampilkan produk yang Anda jual, inilah saat yang tepat untuk mempertimbangkan untuk menyesuaikan halaman toko WooCommerce.

Bagaimana Cara Menyesuaikan Halaman Toko WooCommerce?

Ada banyak cara untuk menyesuaikan halaman toko WooCommerce default. Tidak ada batasan jumlah atau jenis perubahan yang dapat Anda lakukan. Misalnya, Anda dapat menambahkan bidang khusus, menampilkan penawaran eksklusif, mengedit tata letak default, menyertakan filter produk, menambah atau menghapus bilah samping, membuat bilah samping WooCommerce khusus, atau melakukan pengeditan lainnya.

Tata letak dan desain halaman toko Anda harus sesuai dengan produk yang Anda jual. Halaman toko dapat digunakan untuk:

• Dorong pelanggan baru dan yang sudah ada untuk menelusuri pilihan produk Anda.
• Izinkan pengunjung menemukan barang yang ingin mereka beli di situs dengan cepat.
• Jadikan keseluruhan proses pembelian mudah digunakan dan intuitif.

Anda dapat menggunakan tata letak tabel dengan pilihan filter untuk menampilkan dan memamerkan produk di halaman toko. Halaman semacam ini dapat menguntungkan grosir dan toko lain yang menjual barang dalam jumlah besar, pedagang yang menawarkan produk yang sangat dapat disesuaikan (seperti keranjang hadiah, kotak cokelat atau pizza), pengecer online yang barangnya memiliki beberapa spesifikasi (seperti laptop, perangkat keras, meja dapur, dll.) dan perusahaan yang menawarkan produk dengan berbagai opsi tambahan atau varian (sepatu, pakaian, dan jenis hadiah pribadi lainnya).

METODE 1 Sesuaikan halaman toko WooCommerce menggunakan pembuat halaman

Pembuat halaman dapat mengubah tata letak halaman toko, desain, jumlah item yang ditampilkan, jenis produk, dll. Bagian terbaik tentang menggunakan pembuat halaman adalah Anda tidak perlu mengubah file tema atau menulis kode .

Anda dapat mengedit halaman toko WooCommerce menggunakan Beaver Builder (lihat perbandingan Beaver Builder gratis vs berbayar), Divi, Elementor, Visual Composer (perbedaan antara Visual Composer gratis vs premium), atau menggunakan pembuat halaman populer lainnya tanpa harus menyentuh satu pun baris kode.

Jika Anda menggunakan Elementor, Anda dapat mengikuti panduan ini untuk menyesuaikan halaman toko WooCommerce menggunakan Elementor. Jika Anda menggunakan Divi, ikuti panduan ini untuk mengedit halaman toko default WooCommerce. Jika menggunakan Beaver Builder, ikuti panduan ini.

Juga, beberapa tema seperti Astra, GeneratePress, OceanWP, dll. Sudah menawarkan opsi terintegrasi untuk menyesuaikan halaman WooCommerce.

METODE 2 Sesuaikan halaman toko WooCommerce default menggunakan plugin

Berikut adalah beberapa plugin lain yang bukan pembuat halaman yang dapat Anda gunakan untuk menyesuaikan dan mengedit halaman WooCommerce:

1. StoreCustomizer (sebelumnya WooCustomizer)

Plugin StoreCustomizer hadir dalam versi gratis dan berbayar. Plugin ini menggunakan pengaturan WordPress Customizer untuk membuat perubahan langsung ke toko WooCommerce Anda. Anda dapat melihat hasil edit saat Anda membuatnya.

Anda dapat menyembunyikan harga (cara menyembunyikan harga di WooCommerce) atau menghapus fungsi “Beli” dan “Tambahkan ke Keranjang” dari toko online Anda jika diinginkan. Melakukannya akan memungkinkan Anda membuat katalog WooCommerce unik Anda sendiri.

Pengaturan Mode Katalog dapat diatur untuk produk tertentu atau semua produk WooCommere Anda. Pengaturan ini juga dapat diterapkan hanya untuk pengguna yang belum masuk. Ini akan meminta pengguna untuk membuat akun dan masuk sehingga mereka dapat membeli item dari situs Anda.

Tampilan Cepat Produk untuk WooCommerce dapat diaktifkan untuk membantu pengguna menelusuri katalog produk online Anda lebih cepat. Pengguna dapat melihat pratinjau item yang mereka minati dan kemudian menambahkannya ke keranjang belanja online mereka.

Mereka juga dapat menggunakan halaman Toko WooCommerce untuk melihat pop-up galeri gambar singkat dari item yang mereka cari. Setelah pelanggan Anda mengetahui apa yang akan mereka beli, mereka dapat dengan mudah mengklik 'Tambahkan ke Keranjang'.

Jendela pop-up dapat diatur untuk muncul di halaman Kategori dan Produk Anda. Ada pengaturan tambahan yang dapat digunakan untuk menyesuaikan pop-up galeri gambar dan Tampilan Cepat Produk dengan desain dan tata letak toko WooCommerce Anda.

Pencarian Ajax WooCommerce dapat digunakan untuk membantu pelanggan Anda menemukan barang yang mereka inginkan dalam waktu yang lebih singkat. Anda dapat menggunakan kode pendek sederhana untuk menampilkan fungsi Pencarian Produk Ajax di mana saja di situs Anda.

Sesuaikan pengaturan fitur sehingga setiap kali pengunjung situs Anda menggunakan bilah Pencarian Ajax, berbagai item WooCommerce yang diprediksi akan ditampilkan. Ada lebih banyak fitur dari plugin ini, dan ini adalah salah satu cara terbaik untuk menyesuaikan halaman toko WooCommerce.

2. Blok etalase

Blok Storefront dapat digunakan untuk mengganti tata letak dan desain halaman toko WooCommerce default yang ada, halaman kategori, dan beranda. Blok-blok ini dapat diintegrasikan tanpa harus memasukkan kode apa pun.

Ada delapan Blok Etalase WooCommerce premium yang berbeda. Blok Kategori Produk, Blok Korsel Produk, Blok Penggeser Produk, Blok Tabel Produk, Blok Produk Masonry, dan Blok Kotak Persegi hanyalah beberapa opsi yang tersedia.

Biasanya, WooCommerce membuat halaman kategori Anda secara dinamis untuk Anda. Halaman-halaman itu tidak terlalu berbeda. Mereka biasanya memiliki tata letak dan desain yang sama dengan semua halaman lain di toko Anda. Anda juga tidak dapat mengubah penampilan mereka.

Menggunakan Blok Storefront, Anda dapat membuat halaman kategori yang disesuaikan . Jika Anda dapat mengubah tampilan setiap halaman kategori, ada peluang peningkatan penjualan yang lebih baik.

Blok Storefront dapat membantu meningkatkan pengoptimalan mesin telusur Anda karena Anda dapat menambahkan konten yang lebih menarik yang relevan dengan item tertentu yang Anda coba jual.

Anda bahkan dapat menggunakan Blok Storefront untuk mendesain ulang halaman rumah Anda. Tema biasanya secara otomatis menghasilkan item yang ditemukan di halaman beranda situs Anda. Blok Storefront memungkinkan Anda untuk mengontrol konten . Anda dapat mengatur ulang bagian yang ada atau menambahkan bagian, kategori, dan produk baru .

Blok dapat digunakan kembali, diubah, dan diperluas hingga lebar penuh. Mereka memungkinkan Anda untuk menyesuaikan kolom dan baris kisi produk, perataan dan pemosisian label, celah kisi, warna, font, dan banyak lagi.

3. Blok WooCommerce

Blok WooCommerce dapat digunakan untuk menampilkan produk yang ingin Anda tampilkan di toko Anda. Produk dapat ditampilkan berdasarkan kategori dan tag. Anda juga dapat menampilkan item yang diunggulkan, dipilih sendiri, terlaris, atau sedang dijual .

Edisi terbaru WooCommerce Blocks juga menyertakan pagination. Ini adalah fitur yang nyaman bagi pemilik toko yang memiliki banyak produk untuk dipilih pelanggan.

METODE 3 Menyesuaikan halaman toko WooCommerce secara manual

Pilihan lainnya adalah melewati pembuat halaman dan plugin dan menyesuaikan situs Anda secara manual. Ini adalah metode yang disukai untuk orang yang tidak ingin menambahkan plugin pihak ketiga jika tidak perlu.

Jika Anda akan menempuh rute ini, Anda tidak harus menjadi ahli pengkodean, tetapi Anda harus memiliki pengetahuan pengkodean dasar . Metode ini bukan untuk semua orang.

Langkah 1: Buat tema anak

Sekarang adalah waktu yang tepat untuk membuat tema anak (cara membuat tema anak) jika Anda belum melakukannya. Dengan cara ini, jika Anda mengedit dan memperbarui tema utama Anda, Anda tidak perlu khawatir kehilangan semua perubahan tersebut ketika ada pembaruan tema baru setelah pengeditan tersebut disimpan.

Ada banyak cara untuk membuat tema anak. Anda dapat melakukannya secara manual atau dengan bantuan plugin seperti Child Theme Wizard dan Child Theme Configurator. Tetapi Anda mungkin sudah memiliki tema anak yang tersedia saat membeli tema Anda, atau Anda dapat memintanya dari pengembang tema Anda.

Langkah 2: Buat struktur folder di tema anak Anda

cPanel (lihat perbandingan cPanel vs vDeck) atau klien FTP dapat digunakan untuk mengubah file situs web. Setelah Anda membuat tema anak, buka /wp-content/themes/your-theme-name menggunakan cPanel File Manager atau FTP seperti FileZilla. Jika, misalnya, tema anak Anda adalah untuk tema Dua Puluh Dua Puluh, Anda dapat menamai tema anak Anda sebagai tema dua puluh dua puluh anak atau yang serupa.

Sekarang di /wp-content/themes/your-theme-name buat folder bernama WooCommerce. Setelah itu, buat file bernama archive-product.php di folder tersebut, yang merupakan file template halaman toko.

Anda sekarang memiliki halaman toko WooCommerce. Langkah selanjutnya adalah menambahkan konten ke halaman kosong ini.

Langkah 3: Buat konten untuk halaman toko Anda

Apa pun yang Anda ketik ke dalam editor teks archive-product.php dapat dilihat di halaman toko oleh pengunjung situs Anda. Anda dapat memilih untuk menambahkan pengkodean ke halaman jika Anda mau. Jika tidak atau jika Anda tidak yakin bagaimana cara membuat kode halaman tersebut, Anda dapat melanjutkan ke langkah 4.

Langkah 4: Buat templat halaman toko

Alih-alih membuat halaman toko WooCommerce dari awal, Anda dapat menggunakan template yang ada dan menyesuaikannya. Mulailah dengan melihat tema induk. Anda akan ingin menemukan file index.php atau file single.php.

Jika Anda melihat salah satu dari keduanya, cukup salin dan tempel ke folder WooCommerce yang telah Anda buat di Langkah 2. Jika file single dan index.php tersedia, cukup salin dan tempel file single.php .

Hapus file archive-product.php yang ada. Anda akan ingin melakukan ini karena file yang baru saja Anda salin dan tempel sekarang akan dinamai sebagai file archive-product.php.

Ubah nama file yang baru saja Anda tempel di sini (index.php atau single.php) menjadi archive-product.php .

File ini akan digunakan sebagai halaman toko Anda, meskipun mungkin akan terlihat seperti salah satu halaman produk situs Anda. Anda dapat menggunakan kode pendek untuk menyesuaikan halaman agar lebih terlihat seperti halaman toko.

Langkah 5: Sesuaikan halaman toko menggunakan kode pendek

Mulailah dengan memisahkan produk Anda ke dalam baris atau kolom. Misalnya, jika Anda ingin menempatkan produk Anda ke dalam dua kolom dengan tidak lebih dari enam produk per kolom, berikut adalah kode pendek yang harus Anda masukkan:

[batas produk="6″ kolom="2″]

Jika Anda tidak tahu cara memasukkan kode pendek ini, Anda dapat melakukan langkah-langkah berikut:

• Klik pada file archive-product.php untuk membukanya.
• Hapus semua teks antara <main id=“main” class=“site-main” role=“main”> dan </main><!– #main –> . Harap dicatat bahwa Anda tidak boleh menghapus dua baris kode ini tetapi hanya yang ada di antara keduanya.
• Tambahkan baris kode ini di mana Anda menghapus kode pada langkah sebelumnya: <?php echo do_shortcode ('[ products limit="6" columns="2" ]') ?>
• Simpan perubahan Anda setelah selesai.

Sekarang halaman toko WooCommerce Anda siap digunakan! Anda dapat menambahkan kode tambahan atau kode pendek jika Anda mau. Jangan ragu untuk bereksperimen dengan kode pendek yang berbeda sampai Anda merasa nyaman dengan tampilan dan nuansa halaman toko Anda.

Buat Halaman Toko WooCommerce Kustom

Halaman toko toko WooCommerce Anda adalah salah satu halaman utama yang dikunjungi orang untuk mengetahui lebih lanjut tentang produk Anda. Itulah mengapa penting untuk memiliki halaman yang menarik pelanggan dan membujuk mereka untuk melakukan pembelian.

Desain harus menarik secara visual dan user-friendly. Halaman toko secara tradisional telah dirancang sebelumnya. WooCommerce tidak memiliki sumber daya bawaan yang tersedia jika Anda ingin mengubah tampilan halaman.

Halaman toko default memiliki banyak fitur yang nyaman bagi pemilik situs. Masalahnya adalah itu bukan solusi terbaik untuk setiap toko online. Meningkatkan tata letak dan desain halaman toko toko Anda dapat membantu meningkatkan penjualan, meningkatkan tingkat konversi, membuat situs lebih mudah digunakan. Itu juga harus cukup menarik secara visual untuk menarik lebih banyak lalu lintas ke situs Anda.