Cara Membuat Halaman Produk WooCommerce Kustom Menggunakan Elementor

Diterbitkan: 2025-02-19

Saat 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

Toggle

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

Dashboard

Masuk ke dasbor WordPress Anda.

Langkah 2) Pergi ke plugin dan klik Tambah Plugin Baru

Add New Plugin 1

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

Search 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.

Elemento Addons

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

Upload Plugin

Pergi ke kiri atas dan klik Upload Plugin.

Langkah 3) Unggah Addons Elemento

Upload Elemento Addons

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

Add New Plugin

Buka dasbor dan klik halaman lalu klik Tambah Halaman Baru.

Langkah 2) Klik 'Edit dengan Elementor'

Edit With Elementor page

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.

Edit with Elementor Page 2

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

2 Side Container Steps

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.

Elementor Image

Sekarang atur gambar produk.

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

Elementor Heading

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.

Elementor Text Editor

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

Text Editor Short Description

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.

Elemento Addons Add to Cart

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.

Elemento Addons Add to Cart Settings

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.

SKU ID

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.

Elementor Social Icons

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.

Elementor Social Icons Setting

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.

Elementor Social Icons Description

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.

Elemento Addons Product Slider

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

Product Page Preview 1

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 .

Elemento Addons Widgets

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

Elemento Products

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

Elemento Products Content

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

Elemento Products Style

Bagian gaya memungkinkan untuk mengubah warna, tipografi, dan pengaturan tambahan lainnya.

Setelah membuat semua perubahan dan menyiapkan halaman, klik Publish.

Elementor Page Publish

Sekarang pratinjau situs Anda.

Elemento Products Preview

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.

Single Product Page 1

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