Divi 5'in WooCommerce ürün modülleri hakkında bilmeniz gereken her şey

WooCommerce ile uyumluluk artık Divi 5'e genişletildi ve WooCommerce'in yerleşik şablonlarına güvenmeden ürün sayfaları üzerinde tam kontrol sağlıyor. Yeni entegre WooCommerce ürün modülleri, modern düzen kontrolüne sahip ürün sayfaları oluşturmak için Flexbox da dahil olmak üzere Divi 5'in tüm özelliklerine dokunurken, markanızla eşleşen ve satışları artırmaya yardımcı olan ilgi çekici, kullanıcı dostu düzenler tasarlamanıza olanak tanır.

Bu yazıda, modüllerin temel özelliklerini ele alacağız ve bunları bir sonraki Divi 5 e -ticaret web siteniz için nasıl kullanacağınızı göstereceğiz. Hadi dalalım.

WooCommerce ürün modülleri nelerdir?

WOO ürün modülleri, WOO ile çalışan mağazalar için ürün ve kategori sayfalarını özelleştirmek için tasarlanmış Divi 5 içindeki özel içerik öğeleridir. Bu modüller, eklenti ile standart gelen WooCommerce şablonlarının yerini alarak özelleştirilebilir düzenler oluşturmanızı sağlar. Bu geleneksel şablonlardan farklı olarak, Divi 5'in modülleri, WooCommerce'in temel işlevselliğiyle uyumluluğu korurken yaratıcı özgürlüğe izin verir.

Divi 5'teki 17 WooCommerce modülünün piyasaya sürülmesi önemli bir kilometre taşını işaret ediyor. Tüm ürün ve kategori sayfası tasarım yönlerini kapsayan bu modüller artık eski modda değil, yani hepsi Divi 5'in modern mimarisi için tamamen optimize edildi. Daha verimli bir temele geçiş ile Divi 5 daha iyi performans gösterir, daha ölçeklenebilir ve WordPress'in geleceği ile uyumludur.

Sepet ve ödeme sayfalarına odaklanan geri kalan 8 Woo modülünün yakında piyasaya sürülmesi bekleniyor.

Divi 5'in WooCommerce Ürün Modüllerinin Temel Özellikleri

WooCommerce ürün modüllerinin Divi 5'e entegre edilmesini bekleyebileceğiniz temel özellikleri gözden geçirelim.

Kapsamlı Modül Seti

Divi 5'in WooCommerce ürün modüllerinin ilk partisi, ürün ve kategori sayfası tasarımının belirli bir yönünü ele almak için tasarlanmış araçları içerir. Bu modüller:

• Woo Breadcrumbs: Kullanıcıların mağazada kolayca gezinmelerine yardımcı olmak için navigasyon ekmek kırıntıları izleri görüntüler.
• WOO Bildirimi: Sepet güncellemeleri, hatalar veya onaylar gibi sistem mesajlarını gösterir.
• Woo Ürünü Sepete Ekle: İsteğe bağlı miktar kontrolleri ile Sepet'e Ekle düğmesi oluşturur.
• WOO Ürün Açıklaması: Çıkışlar Ana Uzun biçimli ürün açıklamasını.
• Woo Ürün Galerisi: Izgara veya kaydırıcı formatlarında ek ürün görüntüleri görüntüler.
• Woo Ürün Görüntüleri: Ana ürün görüntüsünü veya bir görüntü galerisini gösterir.
• Woo Ürün Bilgileri: Ağırlık, boyutlar veya özellikler gibi ürün ayrıntılarını görüntüler.
• Woo Ürün Meta: Ürün SKU, kategorileri ve etiketleri gösterir.
• Woo Ürün Fiyatı: Satış fiyatları da dahil olmak üzere ürünün fiyatını görüntüler.
• Woo Ürün Derecelendirmesi: Ortalama yıldız derecelendirmesini ve inceleme sayısını gösterir.
• Woo Ürün İncelemeleri: Müşterilerin ürün incelemelerini görüntülemesine ve göndermelerine olanak tanır.
• Woo Ürün Stoku: Ürün kullanılabilirliğini ve stok seviyelerini gösterir.
• Woo Ürün sekmeleri: Açıklama, ek bilgiler ve incelemeler için varsayılan ürün sekmelerini görüntüler.
• Woo Ürün Başlığı: Ürünün adını özelleştirilebilir bir başlık olarak çıkarır.
• WOO Ürün Upsell: Daha yüksek değerli alımları teşvik etmek için ürünleri teşvik eder.
• Woo ürünleri: Kategori sayfaları için özelleştirilebilir ürün ızgaraları oluşturur.
• WOO ile ilgili ürünler: İlgili ürünleri kategorilere veya etiketlere göre görüntüler.

Bu modüller birlikte, navigasyon ekmek kırıntılarından dinamik ürün ekranlarına kadar ürün ve kategori sayfaları oluşturmak için ihtiyacınız olan her şeyi sağlar.

Yaratıcı Özgürlük

Divi 5'in WooCommerce ürün modülleri, kullanıcıları standart WooCommerce şablonlarının kısıtlamalarından serbest bırakır. Bu modüllerle, ürün sayfalarınızın düzeni, yapısını ve tasarımını tamamen kontrol ederek benzersiz deneyimler yaratabilirsiniz.

Modüller dinamik içeriği destekler, yani ürün verilerini doğrudan WooCommerce'den çeker ve fiyatlar, stok seviyeleri ve açıklamalar için gerçek zamanlı güncellemeler sağlar. Bu, üçüncü taraf eklentileri veya özel kod gerektirmeden etkileşim ve dönüşümleri yönlendiren sayfalar oluşturmanızı sağlar.

Özelleştirme Seçenekleri

Her modülün hepsi görsel oluşturucu içinde yönetilebilen geniş tasarım ayarlarına sahiptir. Ürün galerileri, satış rozetleri, düğmeler ve daha fazlası gibi öğeleri tipografi, renkler, aralık ve animasyon seçenekleriyle özelleştirebilirsiniz.

Örneğin, bir kaydırıcı veya ızgaradaki görüntüleri görüntülemek için Woo Ürün Galerisi modülünün düzenini ayarlayabilir, WOO ürününü özel renkler ve havza efektleri ile sepet düğmesine ekleyebilir veya WOO ürün derecelendirme modülünü tasarımınızla mükemmel bir şekilde hizalamak için Woo ürün derecelendirme modülünü değiştirebilirsiniz.

Bu ayarlar, uyumlu, markalı mağaza sayfaları kolaylıkla oluşturmanıza olanak tanır.

Tema İnşaatçısı ile Dinamik Şablonlar

Divi 5'in tema oluşturucu, ürün ve kategori sayfaları için küresel şablonlar oluşturmanıza izin vererek WooCommerce ürün modüllerinin tüm potansiyelini benimsemenizi sağlar. Tema Builder ile, mağazanızdaki tüm ürünler ve kategoriler için geçerli olan tek bir şablon tasarlayarak tutarlı, uyumlu bir görünüm sağlayabilirsiniz.

Dinamik WooCommerce içeriği için Loop Builder

Divi 5 döngü oluşturucu, dinamik woo içeriği oluşturmak için alternatif bir yol sunar. Loop Builder ile WooCommerce ürünlerini sorgulayabilir ve herhangi bir divi öğesini kullanarak esnek ürün döngüleri tasarlayabilir, özel ürün modüllerinin sabit yapısının ötesine geçen düzenler, listeler ve atlıkarıncalar oluşturabilirsiniz. Tek ürün düzeni için WOO ürün modüllerini kullanın; Ürün koleksiyonları ve arşivleri için Loop Builder'ı kullanın.

Divi 5'in WooCommerce Ürün Modülleri Nasıl Kullanılır

Bu bölüm, yeni WooCommerce ürün modüllerini kullanarak Divi 5'in tema oluşturucusunda bir ürün sayfası oluşturarak size yol gösterecektir.

Yeni Bir Tema Oluşturucu Şablonu Oluşturun

WordPress kontrol panelinde Divi> Tema Oluşturucu'ya gidin. + Yeni şablon ekleyin .

İletişim kutusu göründüğünde yeni şablon oluştur'u tıklayın.

Ardından, şablonumuzu ürünlerimize atamamız gerekecek. Ürünler altında, şablonu atamak için tüm ürünleri seçin.

Atamak için şablon oluştur'u tıklayın.

Özel gövde ekle tıklayın. Bu, ürün sayfa şablonumuzun gövdesini oluşturmamızı sağlayacaktır.

İletişim kutusu göründüğünde özel gövdeyi oluşturun .

Ürün şablonunu oluşturun

Tema oluşturucu başlatıldığında, sıfırdan bir şablon oluşturabilir, önceden hazırlanmış bir düzen seçebilir veya AI ile inşa edebilirsiniz. Bu öğretici için yapıdan sıfırdan seçeceğiz.

Yeni bir satır eklemek için Yeşil + simgesini tıklayın.

Seçenekler göründüğünde , iki sütunlu satırı seçin. Herhangi bir Divi 5 sayfasına veya şablonuna eklediğiniz yeni satırlar varsayılan olarak FLOX kullanır. Divi 5'in FlexBox Düzen Sistemi, WooCommerce ürün modüllerinizin farklı ekran boyutlarında nasıl yığınını değiştirmek de dahil olmak üzere, ürün sayfalarınızın her zamankinden daha fazla göründüğü konusunda size daha fazla kontrol sağlar.

Woo Ürün Modülleri seçeneğini ortaya çıkarmak için aşağı kaydırın. Tıklandıktan sonra 17 Divi 5 Woo modülü ve 8 eski (Divi 4) modülünüz olacak.

Woo Ürün Görüntüleri Modülünü Ekleyin

Woo Ürün Görüntüleri modülünü bulun ve seçin ve ilk sütuna ekleyin.

Bu yazı varsayılan olarak içerik sekmesindeki ürün alanında seçilir. Mevcut bir ürün kullanarak şablonu oluşturmak istiyorsanız, açılır menüden seçin. Bu, şablonunuzun onu oluştururken nasıl görüneceğini önizlemenin harika bir yoludur. Son kaydetmeden önce bu gönderiye geri döndürmeyi unutmayın.

Ayarları ortaya çıkarmak için öğeler açılır menüsünü genişletin. Burada, öne çıkan görüntü, galeri görüntüleri ve satış rozeti dahil olmak üzere modülde hangi görüntülerin görüntülenmesini kontrol edebilirsiniz.

Ayarları ortaya çıkarmak için Tasarım sekmesindeki resim açılır menüsünü tıklayın. Burada, görüntüyü mevcut tüm alanı (Fullwidth'i zorla) işgal etmeye, bir kenarlık, kutu gölgesi ekleyebilir, aralığı ayarlamaya veya filtre eklemeye zorlayabilirsiniz.

Ayrıca satış rozetini arka plan rengi, metin, sınırlar ve daha fazlası atayarak stil yapabilirsiniz.

Woo Ürün Başlık Modülünü ekleyin

2. sütunda, WOO ürün başlık modülünü seçmek için WOO ürün modüllerini tıklayın ve kaydırın.

Bir ürün seçmek ve şablonda nasıl görüneceğini önizlemek için içerik sekmesinin ürün alanındaki açılır menüyü kullanın.

Ardından, modülün tasarım sekmesine gidin ve başlık metni açılır menüsünü genişletin. Burada bir yazı tipi atayabilir ve istediğiniz gibi başlığı şekillendirebilirsiniz.

Woo Ürün Fiyat Modülünü Ekleyin

Ürün başlığı altında, yeni bir modül eklemek için tıklayın. WOO ürün fiyat modülünü seçmek için WOO ürün modüllerini seçin ve kaydırın.

Tasarım sekmesinde, metin, satış metni, yeni fiyat metni ve daha fazlası dahil olmak üzere ürünün fiyatının her yönünü şekillendirebilirsiniz.

Woo Ürün Derecelendirme Modülünü ekleyin

Ardından, Woo Ürün Derecelendirme Modülünü Woo Fiyat Modülü altına ekleyeceğiz.

Elementlerin altındaki İçerik sekmesinde, yıldız derecelendirmesini ve müşteri incelemelerini göstermeyi veya gizlemeyi seçebilirsiniz.

Tasarım sekmesinde, Düzen açılır menüsü, yıldız derecelendirmesinin nasıl görüntüleneceğini seçmenizi sağlar. Elemanlar satır içi veya istiflenebilir.

Diğer stil seçenekleri arasında yıldızlar için bir renk, metin boyutu ve harf aralığı ve derecelendirme metni için şekillendirme seçenekleri bulunur.

Woo Ürün Açıklama Modülünü ekleyin

Woo Star derecelendirme modülünün altında, yeni bir Woo modülü eklemek için tıklayın. Bu sefer Woo Ürün Açıklama Modülünü seçeceğiz. İçerik sekmesinde hangi açıklamayı görüntüleyeceğini seçin (açıklama veya kısa açıklama).

Tasarım sekmesinde, açıklamayı yazı tipi, ağırlık, stil, hizalama, renk, boyut ve daha fazlası seçenekleriyle şekillendirebilirsiniz.

Woo ürününü ekle Sepet modülüne ekle

Ardından, WOO Ürün eklentisini sepet modülüne ekleyeceğiz. Müşterilerinizin ürünü arabalarına eklemelerine ve ürüne atanan varyasyonları seçmelerine izin verecektir.

İçerik sekmesindeki öğeler geçişler, miktar alanını ve kullanılabilir stoku göstermenize veya gizlemenize olanak tanır. Hızlı Not: Stok miktarının görüntülenmesi için Woo ürününün kendisindeki stoku yönetmeyi kontrol etmelisiniz.

Tasarım sekmesindeki markanızı eşleştirmek için alan etiketlerini, metnini, açılır menüleri (varyasyonlar için) ve düğmeyi şekillendirebilirsiniz.

SKU numaralarını ve kategorilerini görüntülemek için Woo Ürün Meta Modülü gibi modüller eklemeye devam edin.

Ayrıca, ürününüz hakkında bir açıklama, incelemeler ve ek bilgiler görüntülemek için Woo Ürün sekmeleri modülünü de ekleyebilirsiniz.

Maksimum erişim için, sitenizin ziyaretçilerinin mağazanızdaki ek ürünleri keşfetmeye teşvik etmek için ürün şablonunuzda bir dizi ilgili ürün görüntüleyerek bir dönüşüm şansını artırabilirsiniz.

Şablonu kaydetmek

Modül eklemeyi bitirdikten sonra, ihtiyacınız olan ek değişiklikleri yapın ve daha sonra tema oluşturucunun sağ üst köşesindeki Kaydet düğmesine tıklayarak şablonu kaydedin.

Ardından, Tema Oluşturucu Gösterge Tablosu'na dönmek için Çıkış düğmesini tıklayın.

Tema Oluşturucu Gösterge Tablosu'na geri döndüğünde, şablonu kaydetmek ve Woo ürünlerinize uygulamak için değişiklikleri kaydet'i tıklayın.

Gördüğünüz gibi, Divi 5'in Woo ürün modülleriyle bir ürün şablonu oluşturmak basit bir işlemdir. Bu öğreticideki tüm modülleri kapsamayacağız, ancak hepsini kullanarak ziyaretçilerinizi meşgul eden etkileyici ürün veya kategori sayfaları oluşturabilirsiniz.

Dosyaları İndirin

Ücretsiz indir

Divi bültenine katılın, size Ultimate Divi açılış sayfası düzen paketinin bir kopyasının yanı sıra tonlarca şaşırtıcı ve ücretsiz divi kaynakları, ipuçları ve püf noktalarının bir kopyasını e -postayla göndereceğiz. Takip et ve hiçbir zaman bir divi ustası olacaksınız. Zaten abone olduysanız, aşağıdaki e -posta adresinizi yazın ve Düzen Paketine erişmek için İndir'i tıklayın.

İNDİRMEK

Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ Haftalık Divi Düzen Paketlerine erişin!

Divi 5'in WooCommerce entegrasyonu için sırada ne var?

Sepet ve ödeme sayfalarına odaklanan ikinci WooCommerce modülleri, önümüzdeki birkaç hafta içinde piyasaya sürülecek ve WooCommerce ile entegrasyonu tamamlayacak. Bu eklemeler, kullanıcıların ürün taramasından kasaya kadar tüm e -ticaret hunisini tam olarak özelleştirmelerini sağlayacaktır. Divi 5 genel beta, istikrarı sağlamak için kullanıcı geri bildirimleri ve ek hata düzeltmeleri ekleyerek bu özellikleri daha da geliştirecektir.

WooCommerce uyumluluğu ve entegrasyonunun ötesinde, Divi 5, dinamik ürün kaydırıcıları oluşturmak için Grup Carousel modülü, hafif animasyonlar eklemek için Lottie modülü ve gelişmiş düzen kontrolü için yeni bir Flexbox Düzen Sistemi gibi son özelliklerle gelişmeye devam ediyor. Bu eklemeler, e -ticaret siteleri için daha da yaratıcı olanaklar sunarak WOO modüllerini tamamlar.

Bugün Divi 5'in Woo ürün modüllerini deneyin

Divi 5'in Woo ürün modülleri, eşsiz esneklik ve yaratıcılıkla büyüleyici ürün ve kategori sayfaları oluşturmanıza olanak tanır. Modüller, hepsi sezgisel bir arayüz içinde yaratıcı özgürlük, dinamik içerik entegrasyonu ve performansın bir karışımını sunar. Özelleştirilebilir ürün galerilerinden tema oluşturucu aracılığıyla özel düzenlere kadar Divi 5, yüksek dönüştürücü mağaza sayfalarını kolaylaştırır.

Divi 5'e dalmaya hazır mısınız? Bu modülleri keşfetmek ve WooCommerce sitenizi nasıl dönüştürebileceklerini görmek için en son Divi 5 genel alfa indirin. Düşüncelerinizi duymak isteriz. Geri bildirimlerinizi yorumlarda paylaşın veya sosyal medya kanallarımızda bizimle bağlantı kurun.