Cara Membuat Halaman Produk WooCommerce Kustom Menggunakan Elementor
Diterbitkan: 2025-02-19Saat ini, Elementor adalah salah satu pembangun halaman teratas. Sangat mudah untuk membuat situs web menggunakan fitur pembangun halaman.
Namun, ini menyediakan desain premade tetapi jika Anda ingin membuat sendiri maka pembangun drag-and-drop Elementor membuat setiap operasi sangat mudah. Jadi ini adalah situasi win-win.
Ngomong -ngomong, halaman produk ditemukan di hampir setiap situs eCommerce tetapi halaman produk WooCommerce khusus dibangun ketika pemilik situs harus menunjukkan produk secara berbeda.
Saat merancang situs, Anda dapat membuat halaman WooCommerce khusus.
Dan di blog ini, kita akan melihat cara membuat halaman produk wooCommerce khusus menggunakan pembangun halaman elementor di situs web WordPress.
Daftar isi
Alat apa yang kita butuhkan untuk membuat halaman produk wooCommerce khusus
Di blog ini, kami akan membutuhkan plugin Elementor. Selain itu, kami juga akan membutuhkan addons elemento.
Elementor membuat proses pembuatan halaman mudah dan elemento addon membantu memperluas kekuatan elementor dengan menambahkan widget dan fungsi tambahan ke widget.
Elemento Addons memiliki beberapa widget yang terasa ilegal untuk digunakan karena operasi dan kehalusannya.
Jadi mari kita mulai sekarang,
Cara Membuat Halaman Produk WooCommerce Kustom Menggunakan Elementor
Pertama, mari kita instal kedua plugin.
Menginstal Plugin Elementor
Langkah 1) Buka Dasbor Anda

Masuk ke dasbor WordPress Anda.
Langkah 2) Pergi ke plugin dan klik Tambah Plugin Baru

Di dasbor, Anda dapat melihat beberapa menu di sisi kiri. Pergi ke plugin dan klik Tambah Plugin Baru.
Langkah 3) Pergi ke bilah pencarian dan cari Elementor

Di halaman ini, Anda akan menemukan plugin. Pergi ke bilah pencarian dan cari Elementor.
Langkah 4) Pasang dan aktifkan Elementor
Setelah mencari Elementor, itu akan muncul di daftar plugin. Klik tombol Instal, setelah instalasi, klik tombol Activate untuk mengaktifkan plugin Elementor.
Mengunggah plugin elemento addons
Pertama, unduh elemento addons dari Themehunk.

Buka halaman Elemento Addons dan beli plugin. Anda dapat menonton tutorial ini jika Anda membutuhkan uluran tangan untuk mendapatkan addons elemento.
Langkah 1) Buka dasbor Anda dan buka halaman plugin
Ulangi langkah yang sama dan raih halaman plugin.
Langkah 2) Klik Plugin Unggah

Pergi ke kiri atas dan klik Upload Plugin.
Langkah 3) Unggah Addons Elemento

Klik Instal sekarang dan kemudian aktifkan plugin.
Kedua plugin diinstal dan sekarang kita dapat melanjutkan lebih jauh.
Membuat Halaman Produk Kustom WooCommerce
Langkah 1) Buat halaman baru

Buka dasbor dan klik halaman lalu klik Tambah Halaman Baru.
Langkah 2) Klik 'Edit dengan Elementor'

Di bilah atas, Anda akan menemukan edit dengan tombol Elementor. Klik di atasnya.
Setelah ini, halaman akan terbuka dengan Elementor. Anda dapat mengakses dan menggunakan widget Elementor di halaman ini.

Kami akan membutuhkan dua kompartemen, jadi pertama -tama ambil wadah yang memiliki dua sisi.

Pada halaman produk, yang pertama dan salah satu hal terpenting yang akan kami berikan adalah gambar. Jadi temukan widget gambar dan masukkan ke dalam wadah kiri.

Sekarang atur gambar produk.
Sekarang datang ke sisi kanan. Untuk memasukkan judul, cari dan masukkan ke dalam wadah kedua.

Masukkan nama produk dalam judul.
Dengan cara yang sama, kami akan menulis harga produk. Untuk menulis harga, masukkan widget editor teks di bawah judul dan tulis harga produk di sana.

Pada halaman produk, ada deskripsi singkat tentang produk. Untuk menambahkannya, masukkan editor teks lagi dan tulis deskripsi singkat tentang produk.


Sekarang saatnya menambahkan tombol keranjang. Kali ini kami akan menggunakan widget keranjang dari elemento addons karena memiliki lebih banyak fitur dan fungsionalitas.
Cari Tambah ke Keranjang dan masukkan ke dalam wadah.

Di pengaturan tombol CART, cari nama produk dan pilih produk di bagian Produk. Setelah ini, ketika pengguna mengklik tombol CART, itu akan ditambahkan ke troli secara langsung.

Jika Anda ingin menambahkan ID SKU maka Anda dapat melakukannya dengan cara yang sama kami menambahkan widget lain. Di sini masukkan editor teks dan tulis SKU produk.

Salah satu bagian penting dari halaman produk adalah memiliki tombol berbagi sosial. Anda dapat menambahkan tombol Bagikan Sosial ke halaman ini juga.
Cari ikon sosial dan taruh di halaman.

Jika Anda ingin menambahkan lebih banyak tombol pegangan sosial, klik Tambah baru dan tambahkan tombol baru. Anda dapat membuat beberapa perubahan seperti mengubah ikon dan mengedit tautan dan warna.

Dengan cara yang sama, Anda dapat menambahkan hal lain di sini.
Jika Anda ingin memberikan deskripsi utama juga maka tambahkan editor teks dan tulis deskripsi.

Saya menambahkan deskripsi utama di luar wadah yang terlihat terorganisir dan sistematis.
Ketika pengguna mengunjungi halaman produk, Anda dapat menampilkan produk terkait sehingga mereka dapat memeriksanya juga.
Jadi, untuk menambahkan produk terkait terlebih dahulu menambahkan tajuk dan mencari slider produk di elemento addons.

Beginilah cara Anda dapat menambahkan halaman produk WooCommerce khusus. Sekarang saatnya untuk melihat pratinjau halaman.

Saya harus memberi tahu Anda, halaman produk dapat dibuat dalam beberapa langkah sederhana juga. Untuk ini, kita akan membutuhkan widget Addons Elemento.
Mari kita lihat, bagaimana hal itu dilakukan.
Gunakan halaman produk terkait khusus
Setelah mengklik edit dengan Elementor , buka sisi kiri, di mana Anda akan menemukan widget Elementor.
Gulir ke bawah dan dapatkan elemento addons .

Temukan Produk Tema Advance, Seret Widget, dan Letakkan di Halaman.

Saat Anda menjatuhkan widget, pengaturan kustomisasi akan muncul di bilah kiri. Anda dapat mengedit pengaturan dan penampilan addon.

Tetapi jika Anda ingin mengubah tampilan situs, klik gaya selain konten.

Bagian gaya memungkinkan untuk mengubah warna, tipografi, dan pengaturan tambahan lainnya.
Setelah membuat semua perubahan dan menyiapkan halaman, klik Publish.

Sekarang pratinjau situs Anda.

Di sini Anda dapat melihat, di halaman produk WooCommerce khusus, kami menambahkan produk dengan bantuan widget produk Elemento Addons.
Produk ditampilkan di halaman. Mari kita pratinjau halaman produk tunggal.

Itu saja, halaman produk WooCommerce khusus dibangun.
FAQ
Q. Apakah widget produk Elemento Addons responsif?
Ans. Ya, widget produk 100% responsif untuk semua perangkat. Pengguna dapat mengakses situs dan mendapatkan tampilan terbaik di perangkat apa pun yang mereka inginkan.
Q. Bagaimana cara memilih produk untuk ditampilkan di widget produk Elemento Addons?
Ans. Ada berbagai cara untuk menunjukkan produk. Anda dapat menampilkan produk berdasarkan kategori, tanggal ditambahkan, dll. Namun, jika Anda menambahkan widget produk, itu akan secara otomatis mengambil produk.
Kesimpulan
Jadi kami telah belajar, cara menambahkan halaman produk WooCommerce khusus menggunakan Elementor. Saat kami menggunakan plugin Elemento Addons juga, itu membuatnya sangat mudah untuk menambahkan produk dan menampilkannya di halaman.
Elemento Addons memiliki banyak addons untuk membangun situs web. Ini tidak hanya dikenal untuk widget tetapi juga untuk fitur widget.
Halaman produk WooCommerce khusus dapat diperlukan untuk mempromosikan fitur tertentu. Biasanya, template tidak memiliki halaman seperti itu sehingga perlu membuat halaman sendiri.
Saya harap blog ini akan membantu Anda. Namun, jika Anda memiliki pertanyaan atau saran maka beri tahu saya di bagian komentar.
Anda dapat berlangganan saluran YouTube kami, kami juga mengunggah konten hebat di sana, juga ikuti kami di Facebook dan Twitter .
Temukan lebih banyak artikel
- Cara Mengubah URL Login WordPress (URL Kustom) dalam langkah -langkah mudah
- Cara Membuat Halaman Kesalahan 404 Kustom di WordPress (Panduan Mudah)
- Cara menambahkan bilah pencarian khusus ke wooCommerce untuk penemuan produk yang lebih mudah