Apakah Anda ingin mempelajari cara membuat halaman toko yang dipersonalisasi? WooCommerce dengan Elementor?

Seperti yang Anda ketahui, Elementor Pro hadir dengan fitur pembangun WooCommerce yang memungkinkan Anda untuk buat situs web e-Commerce yang dipersonalisasi dengan WooCommerce tanpa pengkodean. Fitur ini memungkinkan Anda membuat halaman WooCommerce khusus menggunakan editor visual Elementor yang menawarkan antarmuka intuitif.

Lihat juga: Cara menginstal Elementor di WordPress

Pada saat menulis artikel ini, Anda dapat membuat halaman kustom untuk halaman toko, halaman produk, dan halaman arsip produk (tag dan kategori). Segera Anda juga akan dapat membuat halaman kustom untuk halaman checkout dan halaman keranjang.

Pada artikel ini, kami akan menunjukkan cara membuat halaman toko WooCommerce kustom menggunakan fitur pembangun WooCommerce Elementor Pro.

Halaman toko itu sendiri adalah salah satu halaman default di WooCommerce. Halaman ini berfungsi sebagai etalase untuk menampilkan produk Anda. Anda dapat mengakses halaman ini dengan pergi ke situsanda.com/store. Secara default, halaman toko WooCommerce hanya menampilkan produk WooCommerce.

Dengan membuat halaman toko kustom menggunakan Elementor Pro, Anda dapat menambahkan elemen untuk membuat etalase Anda lebih menarik.

Cara membuat halaman kustom toko WooCommerce dengan Elementor

Setidaknya ada dua widget Elementor yang dapat Anda gunakan untuk membuat halaman kustom toko WooCommerce: Produk Arsip dan Produk.

Dalam contoh ini, kami menggunakan yang terakhir.

Fungsi widget Produk sangat mirip dengan widget Posting. Perbedaannya adalah widget Produk digunakan untuk menampilkan produk WooCommerce sedangkan widget Posting digunakan untuk menampilkan postingan blog.

Baca juga: Cara mengimpor atau mengekspor model di Elementor

Harap dicatat bahwa Anda hanya dapat menemukan widget Produk saat plugin WooCommerce diinstal dan diaktifkan.

Untuk mulai membuat halaman toko WooCommerce kustom menggunakan Elementor Pro, buka Pertama à Template -> Pembuat Tema di dasbor WordPress Anda. Klik pada tab Produk arsip dari halaman Pembuat Tema, lalu klik tombol menambahkan sebuah ARSIP PRODUK.

Beri nama model Anda dan klik tombolnya BUAT MODEL.

cara membuat halaman khusus untuk toko WooCommerce dengan Elementor

Ada tiga templat halaman toko kustom yang dapat Anda pilih jika Anda ingin membuat halaman toko kustom dari sebuah templat. Jika Anda ingin membangun halaman toko kustom dari awal, Anda bisa menutup perpustakaan template.

Lihat juga: Cara menggunakan Sampler Warna di Elementor

Dalam contoh ini, kami akan membuat halaman toko kustom dari awal. Seperti disebutkan di atas, kita akan menggunakan widget Produk untuk menampilkan produk.

Sebelum menambahkan widget Produk ke kotak edit, Anda dapat menentukan tata letak dengan menambahkan bagian dan kolom. Setelah tata letak siap, Anda cukup menyeret widget Produk ke dalam kotak edit.

Seperti yang Anda lihat, widget Produk secara otomatis memuat dan menampilkan produk WooCommerce terbaru. Anda dapat mengubah kueri dengan membuka blok Pertanyaan di bawah tab Isi dari panel pengaturan. Ada lima pilihan untuk dipilih:

  • Kueri Saat Ini - Kueri Saat Ini
  • Produk Terbaru - Produk Terbaru
  • Penjualan - Penjualan
  • Unggulan - Unggulan
  • Seleksi Manual - Seleksi Manual

Anda juga dapat mengatur urutan di mana produk ditampilkan atau mengecualikan tertentu

cara membuat halaman khusus untuk toko WooCommerce dengan Elementor

Untuk mengatur jumlah kolom dan baris, Anda dapat membuka blok Konten di bawah tab Kandungan. Dari blok ini Anda juga dapat mengaktifkan pagination.

Anda dapat bermain-main dengan panel pengaturan sampai Anda mendapatkan pengaturan terbaik untuk widget Produk. Setelah Anda selesai dengan widget Produk, Anda dapat menambahkan lebih banyak widget ke halaman Anda.

Baca juga: Cara menggunakan pemilih warna di Elementor

Setelah Anda selesai mengedit halaman, Anda dapat mengklik tombol MENERBITKAN di bagian bawah panel pengaturan.

Tambahkan kondisi tampilan dengan mengklik tombol menambahkan kondisi. Karena Anda ingin membuat halaman toko khusus, pilih opsi Belanja Halaman. Klik tombol SIMPAN & TUTUP untuk menyimpan perubahan.

cara membuat halaman khusus untuk toko WooCommerce dengan Elementor

Sejauh ini, Anda telah berhasil membuat halaman toko WooCommerce kustom menggunakan Elementor Pro. Anda bisa pergi di situs Anda.com/store untuk memeriksa hasilnya.

Sesuaikan widget Produk

Sebelum menerbitkan halaman Anda, Anda dapat menyesuaikan widget Produk agar lebih menarik. Untuk melakukannya, klik widget di kotak edit dan navigasikan ke tab Gaya dari panel pengaturan. Ada empat blok yang bisa Anda buka sebagai berikut:

  • Produk

Anda dapat membuka blok ini untuk menentukan jarak antara kolom dan baris. Dari blok ini, Anda juga dapat mengatur tipografi (keluarga font, ukuran font, dll.) serta warna teks elemen produk seperti judul produk, harga produk, peringkat produk, produk, dll…. Anda juga dapat mengatur batas gambar produk,

  • Kotak

Dalam konteks ini, Box mengacu pada wadah setiap produk. Anda dapat membuka blok Kotak untuk menentukan lebar batas wadah, radius batas, bayangan kotak, warna latar belakang, warna batas, dll.

  • Pemberian nomor pd halaman buku

Jika Anda mengaktifkan opsi Pemberian nomor pd halaman buku dari blok Kandungan, Anda dapat membuka blok Pemberian nomor pd halaman buku di bawah tab Gaya untuk menyesuaikan pagination. Anda dapat mengatur hal-hal seperti spasi, warna batas, warna latar belakang, dll.

Anda juga dapat menentukan parameter yang berbeda pada setiap status (normal, menunjuk dan aktif).

  • Penjualan Flash

Saat Anda menambahkan produk baru di WooCommerce, Anda dapat menetapkan atribut harga jual untuk menunjukkan kepada pengunjung Anda bahwa produk terkait didiskon. Untuk menekankan hal ini, Anda dapat menampilkan atribut sale di halaman toko sehingga produk yang didiskon memiliki badge obral.

Anda dapat membuka blok Penjualan Flash untuk mempersonalisasi lencana penjualan. Anda dapat menentukan elemen seperti warna teks, warna latar belakang, tipografi, radius batas, ukuran (lebar dan tinggi), jarak, dll….

Pada akhirnya

WooCommerce Builder adalah salah satu fitur yang ditawarkan oleh Elementor Pro. Ini memungkinkan Anda untuk buat situs web platform e-commerce yang dipersonalisasi dan unik dengan WooCommerce dan tanpa coding. Tidak perlu menginstal tema WordPress yang mengklaim dirancang untuk WooCommerce. Sebagai gantinya, Anda dapat membuat halaman WooCommerce khusus sendiri menggunakan editor visual Elementor.

Baca juga: Bagaimana cara menambahkan pembagi untuk membuat bagian di Elementor

Hingga versi 3.2.2, Elementor Pro hanya memungkinkan Anda membuat Halaman Toko Kustom, Halaman Produk Tunggal Kustom, dan Halaman Arsip Produk Kustom. Tetapi Elementor mengumumkan bahwa pada versi Elementor Pro berikutnya, Anda juga akan dapat membuat halaman keranjang kustom, halaman checkout kustom, dan halaman akun pelanggan kustom.

Dapatkan Elementor Pro Sekarang!

Kesimpulan

Di sini adalah ! Itu saja untuk artikel ini yang menunjukkan cara membuat halaman khusus untuk toko WooCommerce dengan Elementor. Jika Anda memiliki kekhawatiran tentang cara menuju ke sana fberi tahu kami di komentar.

Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.

...