Loncat ke Konten Utama

Cara membuat halaman kustom toko WooCommerce dengan Elementor

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Apakah Anda ingin mempelajari cara membuat halaman khusus untuk toko WooCommerce dengan Elementor?

Seperti yang Anda ketahui, Elementor Pro hadir dengan fitur pembuat WooCommerce yang memungkinkan Anda membangun situs web e-Commerce khusus 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 votresite.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 serta Produk.

Dalam contoh ini, kami menggunakan yang terakhir.

Fungsi widget Produk-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-produk arsip dari halaman Pembuat Tema, lalu klik tombol menambahkan sebuah ARSIP PRODUK.

Beri nama model Anda dan klik tombolnya BUAT MODEL.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

cara membuat halaman khusus untuk toko WooCommerce dengan ElementorAda 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 kadar 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.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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 Toko 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-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 membangun situs web eCommerce yang dipersonalisasi dan unik dengan WooCommerce dan tanpa pengkodean. 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

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

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.

...

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Kembali ke atas