Divi Eklentisi Vurgusu: WC Ürün Oluşturucu

WordPress için WooCommerce'in popülaritesi konusunda hiçbir soru yok. Popülaritesine rağmen WooCommerce ürün sayfası tasarımı sınırlıdır. Divi ve Extra gibi temalarda bile düzeni değiştirmek için yapılabilecek pek bir şey yok. Neyse ki, Divi için tam olarak bunu yapan birkaç üçüncü taraf eklentisi var.

DiviKingdom'dan WC Product Builder bu eklentilerden biridir. Her WooCommerce ürün öğesini bir Divi modülü olarak sağlar (toplam 20 Divi modülü), WooCommerce öğelerini ürün sayfasında Divi modüllerinin içine yerleştirebilmeniz için 14 kısa kod ekler ve Divi Builder'ı ürün sayfalarına ekler, böylece pratik olarak her tür oluşturabilirsiniz ürün açıklama düzenini hayal edebilirsiniz. Ayrıca, ürün sayfası düzenlerinin 8 demosunu içerir.

Bu eklenti vurgusunda, eklentiye ve demoların her birine bir göz atacağız. Örneklerin resimleri Elegant Theme'in ücretsiz Photo Marketplace düzen paketinden alınmıştır.

WC Ürün Oluşturucuyu Yükleme

Eklentiyi normal şekilde yükleyin ve etkinleştirin. Henüz WooCommerce'i etkinleştirmediyseniz, etkinleştirmeniz için sizi uyaracaktır.

Ardından aktivasyon anahtarınızı girmeniz gerekecek. Pano menüsünde Ayarlar , WC Ürün Üreticisi'ne gidin . Güncellemeler'i seçin ve anahtarınıza yapıştırın. Değişiklikleri Kaydet.

WC Ürün Oluşturucu Genel Ayarlar ve Kısa Kodlar

Genel Ayarlar sekmesinde, bir açılır kutudan varsayılan ürün düzeni sayfanızı seçebilirsiniz. Bunlar Divi Kitaplığınızdaki düzenlerdir. Bu, Divi Builder ile varsayılan olarak ayarlamak için önceden hazırlanmış bir düzen oluşturmanıza olanak tanır. Ürün sayfasında yeni bir düzen seçerek, isterseniz belirli ürünler için varsayılan düzeni geçersiz kılabilirsiniz.

Ürün Açıklaması için Divi Builder için Etkinleştir'i seçtiğinizden emin olun. Bunu her zaman PHP aracılığıyla ekledim, ancak bir düğmeyi tıklamayı tercih ederim. Bu, WooCommerce ürün düzenleyicisinin ürün açıklama alanında mizanpajlar oluşturmak için Divi Builder'ı kullanmanıza olanak tanır.

Kısa Kodlar sekmesi, metin, kaydırıcılar, sekmeler, geçişler vb. gibi Divi modüllerinin içerik alanı içindeki açıklamalar ve resimler gibi Woo öğelerini kopyalayıp yapıştırabilmeniz için 14 kısa kodun bir listesini sağlar. Buna gitmenizi gerektirse de Kısa kodu almak için sayfa, bunu kısa kodları almak için başka bir web sitesine gitmeyi tercih ederim. İhtiyacınız olursa geliştiricinin web sitesinde de bulunurlar.

WooCommerce Ürün Gönderilerinde WC Ürün Oluşturucuyu Kullanma

Ürün sayfasına birkaç yeni özellik eklendi:

• Ürün Divi Düzenini Seçin
• Ürün Kapak Resmi

Etkinleştirdiyseniz, Divi Builder otomatik olarak WooCommerce ürün düzenleyicisine eklenir ve ürün açıklama alanı için bir düzen oluşturmak üzere Divi Builder'ı kullanmanıza olanak tanır. Ürünler için düzenler Divi Kitaplığı içinde oluşturulur. Varsayılanı kullanabilir veya açılır kutudan yeni bir düzen seçebilirsiniz.

WC Ürün Oluşturucu Oluşturma Ürün Açıklama Düzeni

Standart ürün açıklama alanı TinyMCE düzenleyicisini kullanır. Yukarıdaki resim standart açıklamayı göstermektedir.

Bu, ürün sayfasındaki açıklama alanıdır. Resimler gibi diğer içerikler eklenebilir. Elbette Divi Builder ile çok daha fazlası yapılabilir.

Divi Builder ile bir düzen oluşturdum ve bir kaydırıcı ekledim.

Açıklama alanı artık düzenimi gösteriyor. Ayrıca bir arka plan ekledim ve metni açık hale getirdim.

WC Ürün Oluşturucu Modülleri

WC Product Builder, özel ürün sayfaları oluşturmanıza yardımcı olmak için Divi Builder'a 20 yeni modül ekler. Her WooCommerce öğesi ayrı bir modüldür, böylece yalnızca istediğiniz öğeleri kullanarak ve bunları istediğiniz yere yerleştirerek bir düzen tasarlayabilirsiniz. Modüllerin benzersiz simgeleri vardır, bu da onları bir bakışta bulmayı kolaylaştırır.

Divi Kitaplığında bir WC Ürün Oluşturucu Düzeni Oluşturma

WooCommerce ve Divi modüllerini kullanarak Divi Kitaplığında bir düzen oluşturdum. WooCommerce Ürün sayfasında, açılır kutudan düzeni seçeceğim.

Oluşturduğunuz düzen, varsayılan yerine gösterilecektir. Bu aslında Demo #1'in bir modifikasyonudur, bu yüzden stil veya düzen tasarımının çoğunu oluşturmam gerekmedi. Herhangi bir iyi yerleşim tasarımı gibi, demolar da zaman kazanmak için mükemmeldir.

WC Ürün Oluşturucu Demoları

Geliştiricinin web sitesindeki 8 demo, hızlı bir şekilde başlamanıza yardımcı olmak için ayrı bir indirme olarak dahil edilmiştir. Bazıları özel stil içerir. En az biri, kısa kod kullanma örneğini içerir.

Demoları Divi Kitaplığı'na yükleyin. Düzenler, normal düzenler gibi Divi Builder'a yüklenmez, bu nedenle bunları Woo Ürün düzenleyicisindeki Divi Builder'dan düzenleyemezsiniz.

Bunları düzenlemek için Divi Kitaplığında Düzenle'yi seçin (tıpkı kitaplıktaki herhangi bir düzen gibi). Bunları ayrıca gönderiler veya sayfalar içinde yükleyebilir veya oluşturabilir ve ürün sayfalarında kullanmak üzere kitaplığa kaydedebilirsiniz.

Bunları kullanmak için, sağdaki Ürün Divi Düzenini Seçin etiketli açılır kutudan istediğiniz düzeni seçin . Düzenleri önizleyemedim, bu yüzden düzeni görmek için ürünü güncellemem gerekiyordu. Yukarıdaki resim, her bir demo için kullanacağım ayarları göstermektedir. Ürün açıklamaları, ürün kapak resmi, öne çıkan resim ve ürün galerisi için bazı yapay metinler ekledim.

Varsayılan WooCommerce Ürün Düzeni

Bu örnek, standart Woo ürün düzenini kullanır. Demolarda nasıl ele alındıklarını görebilmemiz için birkaç ilgili ürün de ekledim.

Demo 1

Demo 1, bir başlık resmi ekler ve ürün adını başlığa yerleştirir. Ayrıca tüm kategorileri bir kenar çubuğuna ekler.

Demo 2

Demo 2, bir başlık görüntüsünün üzerine bir üst gezinme çubuğu ekler. Ürün resmi başlıkla örtüşüyor.

Demo 3

Demo 3, öne çıkan ürünlerin yanında bir ızgara içinde paralaks, gömülü bir video ve büyük galeri resimleri içeren bir başlık içerir.

Demo 4

Demo 4, başlık resmi olarak Ürün Kapak Resmini kullanır ve ürün ayrıntılarında ürün resmini göstermez. Öğelerin her biri tek bir satırdadır.

Demo 5

Demo 5, içerik haritaları, tek tek satırlara stil ve eşleşecek stil düğmeleri içeren sağlam bir arka plan başlığı ekler.

Demo 6

Demo 6, ilgili ürünleri açıklama alanına bir kenar çubuğu gibi yerleştirir.

Demo 7

Demo 7, alışveriş sepeti alanına gönderim bilgilerini ekler ve stil sekmelerinde kısa kodları kullanarak bilgi sağlar.

Demo 8

Demo 8, tam genişlikte bir CTA, tarz bir geri sayım sayacı, tanıtım yazıları, zarif bir bilgi düzeni, resimler ve açıklamalar, referanslar ve tam genişlikte CTA ile değişen CTA'lar ile tüm durakları ortaya çıkarır. Bu örnek yalnızca bir Woo modülü kullandığından ürün bilgilerimi kullanmaz.

WC Ürün Oluşturucu Kısa Kodlarını Divi Modülleriyle Kullanma

Kısa kodlar, WooCommerce modüllerini ürün sayfalarında ve düzenlerde normal Divi modülleri içinde kullanmanıza olanak tanır. Bu, ürünleri sekmeler, kaydırıcılar, geçişler, akordeonlar vb. içine yerleştirmenize olanak tanıyan bazı tasarım olasılıklarını açar.

Kısa kodlar yalnızca o ürün sayfasındaki ürün için geçerlidir, dolayısıyla bunları normal sayfalarda, gönderilerde veya widget'larda kullanamazsınız.

Demo #8'in CTA alanına bir geçiş ekledim ve başlık, açıklama, fiyat, derecelendirme ve sepete ekle düğmesini görüntülemek için kısa kodlar yerleştirdim.

Kısa kodlardaki öğeler, geçiş içinde görüntülenir. Divi Builder ile oluşturduğum açıklamayı bile gösteriyor. Kısa kod alabilen birkaç modül denedim ve her biri beklendiği gibi çalıştı.

Divi Builder ile oluşturduğum açıklamayı gösteren sekme modülüne bir göz atın.

WC Product Builder'ı Ekstra ile Kullanma

Düzenler, Extra ile aynı şekilde çalışır. Bu Demo 5. Kenar çubuğu olmadan kullanıyorum.

Ayrıca, Extra'nın WooCommerce özellikleriyle iyi çalışan ürün açıklama alanında da kullanabilirsiniz. Yukarıdaki örnek, standart WooCommerce ürün düzenini kullanır, ancak Divi Builder'ı kullanarak oluşturduğum ürün açıklamasını da kullanır.

Lisans, Belgeler ve Nereden Satın Alınır

Mevcut üç lisans vardır:

• Bir web sitesi – 19 $
• 5 web sitesi – 29 $
• Sınırsız – 39 $

Belgeler, geliştiricinin web sitesinde, soruları yanıtlamanıza ve başlamanıza yardımcı olmak için bir dizi blog yazısı olarak sağlanır.

Eklenti, geliştiricinin web sitesinden satın alınabilir.

Biten Düşünceler

WC Ürün Oluşturucu, her WooCommerce öğesini ayrı bir modüle dönüştürür ve bu, yeni WooCommerce ürün düzenleri oluşturmak için Divi Oluşturucu'ya birçok modül ekler. Ayrıca ürün açıklama alanına Divi Builder'ı ekler ve kısa kodlar kullanarak Divi modüllerine 14 farklı öğe ekleyebilirsiniz. Bu, birçok tasarım olanağı yaratır. Hayal gücünüzü harekete geçirmek ve başlamanıza yardımcı olmak için 8 demo düzeni bile eklediler.

Eklentiyi kullanımı kolay buldum. Düzenler özellikle yardımcı oldu. Kısa kodları kullanmanın bir örneğini eklediklerine sevindim. Kısa kodlu daha fazla örnek ve ürün açıklamasını kullanan birkaç örnek görmek isterim. Demolar çok fazla tasarım süresi kazandırır. WooCommerce ürün sayfalarınız için yeni düzenler oluşturmakla ilgileniyorsanız, WC Ürün Oluşturucu bir göz atmaya değer.

Senden duymak istiyoruz. WC Ürün Oluşturucu'yu kullandınız mı? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

660917131 / Shutterstock.com aracılığıyla Öne Çıkan Görsel