Semua yang Perlu Anda Ketahui Tentang Modul Produk WooCommerce Divi 5

Kompatibilitas dengan WooCommerce sekarang telah diperluas ke Divi 5, memberi Anda kontrol penuh atas halaman produk tanpa mengandalkan templat bawaan WooCommerce. Modul produk WooCommerce yang baru terintegrasi memungkinkan Anda merancang tata letak yang menarik dan ramah pengguna yang cocok dengan merek Anda dan membantu meningkatkan penjualan, sambil memanfaatkan semua fitur Divi 5, termasuk FlexBox, untuk membangun halaman produk dengan kontrol tata letak modern.

Dalam posting ini, kami akan membahas fitur -fitur utama modul dan menunjukkan kepada Anda cara menggunakannya untuk situs web Divi 5 eCommerce Anda berikutnya. Mari selami.

Apa itu modul produk WooCommerce?

Modul produk WOO adalah elemen konten khusus dalam Divi 5, yang dirancang untuk menyesuaikan halaman produk dan kategori untuk toko bertenaga WOO. Modul ini menggantikan templat WooCommerce yang datang standar dengan plugin, memungkinkan Anda untuk membuat tata letak yang dapat disesuaikan. Tidak seperti templat tradisional ini, modul Divi 5 memungkinkan kebebasan kreatif sambil mempertahankan kompatibilitas dengan fungsi inti WooCommerce.

Pelepasan 17 modul WooCommerce dalam Divi 5 menandai tonggak penting. Modul -modul ini, yang mencakup semua aspek desain halaman produk dan kategori, tidak lagi dalam mode Legacy, yang berarti semuanya dioptimalkan sepenuhnya untuk arsitektur modern Divi 5. Dengan transisi ini ke fondasi yang lebih efisien, Divi 5 berkinerja lebih baik, lebih terukur, dan kompatibel dengan masa depan WordPress.

Modul WOO 8 yang tersisa, berfokus pada halaman keranjang dan checkout, diharapkan segera diluncurkan.

Fitur Utama Modul Produk WooCommerce Divi 5

Mari kita membahas fitur -fitur utama yang dapat Anda harapkan sekarang karena modul produk WooCommerce telah diintegrasikan ke dalam Divi 5.

Set Modul Komprehensif

Batch pertama dari modul produk WooCommerce Divi 5 mencakup alat yang dirancang untuk menangani aspek spesifik desain halaman dan kategori halaman. Modul ini adalah:

• Woo Breadcrumbs: Menampilkan jalur remah roti navigasi untuk membantu pengguna dengan mudah menavigasi toko.
• WOO PEMBERITAHUAN: Menampilkan pesan sistem seperti pembaruan, kesalahan, atau konfirmasi keranjang.
• WOO Produk Tambahkan ke CART: Membuat tombol Tambahkan ke Keranjang dengan Kontrol Kuantitas Opsional.
• Deskripsi Produk WOO: Output Deskripsi produk jangka panjang utama.
• Woo Product Gallery: Menampilkan gambar produk tambahan dalam format grid atau slider.
• WOO Produk Gambar: Menampilkan gambar produk utama atau galeri gambar.
• WOO Informasi Produk: Menampilkan detail produk seperti berat, dimensi, atau atribut.
• Meta Produk Woo: Menampilkan SKU Produk, Kategori, dan Tag.
• WOO Produk Harga: Menampilkan harga produk, termasuk harga jual.
• Woo Product Rating: Menunjukkan peringkat bintang rata -rata dan jumlah ulasan.
• Ulasan produk Woo: Memungkinkan pelanggan untuk melihat dan mengirimkan ulasan produk.
• Stok produk WOO: Menunjukkan ketersediaan produk dan tingkat stok.
• Tab Produk Woo: Menampilkan tab Produk Default untuk deskripsi, informasi tambahan, dan ulasan.
• Judul Produk WOO: Mengeluarkan nama produk sebagai judul yang dapat disesuaikan.
• Woo Product Upsell: Mempromosikan produk upsell untuk mendorong pembelian bernilai lebih tinggi.
• Produk Woo: Membuat kisi -kisi produk yang dapat disesuaikan untuk halaman kategori.
• Produk terkait WOO: Menampilkan produk terkait berdasarkan kategori atau tag.

Bersama -sama, modul -modul ini menyediakan semua yang Anda butuhkan untuk membangun halaman produk dan kategori, dari remah roti navigasi hingga tampilan produk dinamis.

Kebebasan Kreatif

Modul Produk WooCommerce Divi 5 Pengguna Gratis dari kendala templat WooCommerce standar. Dengan modul -modul ini, Anda dapat sepenuhnya mengontrol tata letak, struktur, dan desain halaman produk Anda, menciptakan pengalaman unik.

Modul mendukung konten dinamis, yang berarti mereka menarik data produk langsung dari WooCommerce, memastikan pembaruan waktu nyata untuk harga, tingkat stok, dan deskripsi. Ini memungkinkan Anda untuk membangun halaman yang mendorong keterlibatan dan konversi tanpa memerlukan plugin pihak ketiga atau kode khusus.

Opsi Kustomisasi

Setiap modul memiliki pengaturan desain yang luas, semuanya dapat dikelola dalam pembangun visual. Anda dapat menyesuaikan elemen seperti galeri produk, lencana penjualan, tombol, dan lainnya dengan opsi untuk tipografi, warna, jarak, dan animasi.

Misalnya, Anda dapat menyesuaikan tata letak modul Galeri Produk WOO untuk menampilkan gambar dalam slider atau kisi, gaya produk WOO Tambahkan ke tombol keranjang dengan warna khusus dan efek hover, atau tweak modul peringkat produk WOO untuk menyelaraskan peringkat bintang dengan sempurna dengan desain Anda.

Pengaturan ini memungkinkan Anda membuat halaman toko bermerek yang kohesif dengan mudah.

Template dinamis dengan pembangun tema

Pembuat tema Divi 5 memungkinkan Anda merangkul potensi penuh modul produk WooCommerce dengan memungkinkan Anda membuat templat global untuk halaman produk dan kategori. Dengan pembangun tema, Anda dapat merancang satu templat tunggal yang berlaku untuk semua produk dan kategori di toko Anda, memastikan tampilan yang konsisten dan kohesif.

Pembangun Loop untuk Konten WooCommerce Dinamis

Divi 5 Loop Builder menawarkan cara alternatif untuk membangun konten woo dinamis. Dengan Loop Builder, Anda dapat menanyakan produk WooCommerce dan merancang loop produk fleksibel menggunakan elemen divi apa pun, membuat tata letak, daftar, dan carousel yang melampaui struktur tetap modul produk khusus. Untuk tata letak produk tunggal, gunakan modul produk WOO; Untuk koleksi dan arsip produk, gunakan Loop Builder.

Cara menggunakan modul produk WooCommerce Divi 5

Bagian ini akan memandu Anda dengan membuat halaman produk di pembangun tema Divi 5 menggunakan modul produk WooCommerce yang baru.

Buat template pembangun tema baru

Arahkan ke Divi> Tema pembangun di dasbor WordPress. Klik + Tambahkan Template Baru .

Klik Bangun Template Baru Saat kotak dialog muncul.

Selanjutnya, kita perlu menetapkan templat kita ke produk kita. Di bawah produk , pilih semua produk untuk menetapkan template.

Klik Buat template untuk menetapkannya.

Klik Tambahkan Badan Kustom . Ini akan memungkinkan kita untuk membangun tubuh templat halaman produk kita.

Pilih Bangun Tubuh Kustom Saat kotak dialog muncul.

Bangun Template Produk

Saat pembangun tema diluncurkan, Anda dapat membangun templat dari awal, memilih tata letak premade, atau membangun dengan AI. Kami akan memilih Build From Scratch untuk tutorial ini.

Klik ikon Green + untuk menambahkan baris baru.

Saat opsi muncul , pilih baris dua kolom. Baris baru yang Anda tambahkan ke halaman Divi 5 atau template apa pun akan menggunakan FleBox secara default. Sistem tata letak Flexbox Divi 5 memberi Anda lebih banyak kontrol atas penampilan halaman produk Anda dari sebelumnya, termasuk mengubah bagaimana modul produk WooCommerce Anda menumpuk di berbagai ukuran layar.

Gulir ke bawah untuk mengungkapkan opsi Modul Produk WOO . Setelah diklik, Anda akan memiliki 17 modul WOO Divi 5 dan 8 modul Legacy (Divi 4).

Tambahkan Modul Gambar Produk Woo

Temukan dan pilih Modul Gambar Produk WOO dan tambahkan ke kolom pertama.

Posting ini dipilih secara default di bidang produk di tab Konten . Jika Anda ingin membangun templat menggunakan produk yang sudah ada, pilih dari menu dropdown. Ini adalah cara yang bagus untuk mempratinjau bagaimana template Anda akan terlihat saat membuatnya. Ingatlah untuk menukarnya kembali ke posting ini sebelum penyelamatan terakhir.

Perluas menu dropdown elemen untuk mengungkapkan pengaturan. Di sini, Anda dapat mengontrol gambar mana yang ditampilkan dalam modul, termasuk gambar unggulan, gambar galeri, dan lencana penjualan.

Klik menu dropdown gambar di tab Desain untuk mengungkapkan pengaturan. Di sini, Anda dapat memaksa gambar untuk menempati semua ruang yang tersedia (Force fullwidth), menambahkan perbatasan, bayangan kotak, menyesuaikan jarak, atau menambahkan filter.

Anda juga dapat menata lencana penjualan dengan menetapkan warna latar belakang, teks, perbatasan, dan banyak lagi.

Tambahkan Modul Judul Produk Woo

Di kolom ke -2, klik Modul Produk Woo dan gulir untuk memilih Modul Judul Produk WOO .

Gunakan menu dropdown di bidang produk tab konten untuk memilih produk dan pratinjau bagaimana tampilannya di templat.

Selanjutnya, navigasikan ke tab Desain Modul dan perluas menu dropdown Teks Judul . Di sini, Anda dapat menetapkan font dan menata heading seperti yang Anda inginkan.

Tambahkan Modul Harga Produk Woo

Di bawah judul produk, klik untuk menambahkan modul baru. Pilih modul produk Woo dan gulir untuk memilih modul harga produk WOO .

Di tab Desain , Anda dapat menata setiap aspek harga produk, termasuk teks, teks penjualan, teks harga baru, dan banyak lagi.

Tambahkan Modul Peringkat Produk WOO

Selanjutnya, kami akan menambahkan modul peringkat produk WOO di bawah modul harga WOO.

Di tab Konten di bawah Elemen , Anda dapat memilih untuk menampilkan atau menyembunyikan peringkat bintang dan penghitungan ulasan pelanggan.

Di tab Desain , menu dropdown tata letak memungkinkan Anda memilih cara menampilkan peringkat bintang. Elemen dapat ditampilkan inline atau ditumpuk.

Opsi gaya lainnya termasuk menetapkan warna, ukuran teks, dan jarak huruf untuk bintang dan opsi gaya untuk teks peringkat.

Tambahkan Modul Deskripsi Produk Woo

Di bawah modul peringkat Woo Star, klik untuk menambahkan modul WOO baru. Kali ini, kami akan memilih modul deskripsi produk WOO . Di tab Konten , pilih deskripsi mana yang akan ditampilkan (deskripsi atau deskripsi singkat).

Di tab Desain , Anda dapat menata deskripsi dengan opsi untuk font, berat, gaya, penyelarasan, warna, ukuran, dan banyak lagi.

Tambahkan produk Woo Tambahkan ke modul CART

Selanjutnya, kami akan menambahkan produk Woo Tambahkan ke modul CART . Ini akan memungkinkan pelanggan Anda untuk menambahkan produk ke gerobak mereka dan memilih variasi apa pun yang ditetapkan untuk produk.

Elemen -elemen beralih di tab Konten memungkinkan Anda untuk menampilkan atau menyembunyikan bidang kuantitas dan stok yang tersedia. Catatan Cepat: Untuk kuantitas stok yang akan ditampilkan, Anda harus memeriksa mengelola stok dalam produk WOO itu sendiri.

Anda dapat menata label lapangan, teks, menu dropdown (untuk variasi), dan tombol untuk mencocokkan branding Anda di tab Desain .

Lanjutkan menambahkan modul, seperti modul meta produk WOO untuk menampilkan nomor dan kategori SKU.

Anda juga dapat menambahkan modul Tab Produk WOO untuk menampilkan deskripsi, ulasan, dan info tambahan tentang produk Anda.

Untuk jangkauan maksimal, Anda dapat menampilkan serangkaian produk terkait pada template produk Anda untuk mendorong pengunjung situs Anda menjelajahi produk tambahan di toko Anda, meningkatkan kemungkinan konversi.

Menyimpan template

Setelah selesai menambahkan modul, buat perubahan tambahan yang Anda butuhkan, dan kemudian simpan templat dengan mengklik tombol Simpan di sudut kanan atas pembangun tema.

Selanjutnya, klik tombol EXIT untuk kembali ke dasbor Tema Builder.

Kembali di dasbor pembangun tema, klik Simpan Perubahan untuk menyimpan templat dan terapkan pada produk WOO Anda.

Seperti yang Anda lihat, membuat templat produk dengan modul produk WOO Divi 5 adalah proses yang sederhana. Kami tidak akan membahas semua modul dalam tutorial ini, tetapi menggunakan semuanya, Anda dapat membuat halaman produk atau kategori yang mengesankan yang membuat pengunjung Anda tetap terlibat.

Unduh file

Unduh secara gratis

Bergabunglah dengan The Divi Newsletter dan kami akan mengirimi Anda email salinan paket tata letak halaman pendaratan Ultimate Divi, ditambah banyak sumber daya divi yang luar biasa dan gratis, tips, dan trik. Ikuti bersama dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

Unduh

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan mendapatkan akses ke paket tata letak divi mingguan gratis!

Apa selanjutnya untuk integrasi WooCommerce Divi 5?

Batch kedua dari modul WooCommerce, yang berfokus pada halaman keranjang dan checkout, akan dirilis dalam beberapa minggu ke depan, membungkus integrasi dengan WooCommerce. Penambahan ini akan memungkinkan pengguna untuk sepenuhnya menyesuaikan seluruh corong eCommerce, dari penelusuran produk hingga checkout. Beta publik Divi 5 akan memperbaiki fitur -fitur ini lebih lanjut, menggabungkan umpan balik pengguna dan perbaikan bug tambahan untuk memastikan stabilitas.

Di luar kompatibilitas dan integrasi WooCommerce, Divi 5 terus berevolusi dengan fitur -fitur terbaru seperti Modul Carousel Grup untuk membuat slider produk dinamis, modul Lottie untuk menambahkan animasi ringan, dan sistem tata letak Flexbox baru untuk kontrol tata letak yang disempurnakan. Penambahan ini melengkapi modul WOO, menawarkan kemungkinan yang lebih kreatif untuk situs eCommerce.

Cobalah modul produk WOO Divi 5 hari ini

Modul produk WOO Divi 5 memungkinkan Anda untuk membuat halaman produk dan kategori yang menawan dengan fleksibilitas dan kreativitas yang tak tertandingi. Modul menawarkan perpaduan kebebasan kreatif, integrasi konten yang dinamis, dan kinerja, semuanya dalam antarmuka intuitif. Dari galeri produk yang dapat disesuaikan hingga tata letak khusus melalui pembangun tema, Divi 5 membuat membuat halaman toko yang berkonversi tinggi menjadi mudah.

Apakah Anda siap untuk menyelam ke Divi 5? Unduh Alpha Public Divi 5 terbaru untuk menjelajahi modul -modul ini dan lihat bagaimana mereka dapat mengubah situs WooCommerce Anda. Kami ingin mendengar pikiran Anda. Bagikan umpan balik Anda di komentar atau terhubung dengan kami di saluran media sosial kami.