Divi kullanarak özel bir Wooocommerce web sitesi nasıl oluşturulur (Kapsamlı Kılavuz)

WooCommerce, WordPress tabanlı e-ticaret web siteleri oluşturmak için en popüler eklentidir. Bu, tasarımınızla benzersiz bir E-Niaga web sitesi oluşturmanıza olanak tanıyan çok ayarlanmıştır. Kodlama becerileriniz olmasa bile. Divi, kodlamadan tamamen ayarlanmış bir WooCommerce web sitesi oluşturmanıza yardımcı olabilir. Bu yazıda size yolu göstereceğiz. Divi, zarif temaların bir ürünüdür. Bu, Divi Builder adlı varsayılan bir sayfa yapımcısı ile donatılmış bir WordPress temasıdır. Divi Builder, özel bir başlık, özel başlık ve WordPress temanızın diğer bölümleri oluşturmak için kullanabileceğiniz tema üreticisi özellikleriyle birlikte gelir. WordPress’inize WooCommerce yüklediyseniz, mağaza sayfaları, tek ürün sayfaları, ödeme sayfaları vb. Bunu Visual Divi Builder düzenleyicisini kullanarak yapabilirsiniz. Tek bir kod satırına dokunmaya gerek yok. Divi Builder’ın kendisi iki versiyonda mevcuttur. Divi temasının ayrılmaz bir parçası olmasının yanı sıra, diğer WordPress temalarına yükleyebileceğiniz bağımsız bir eklenti olarak da mevcuttur.
WooCommerce’in ana sayfasını anlayın Daha ileri gitmeden önce, önce WooCommerce’in ana sayfasını anlamak önemlidir. İşte WooCommerce’in ana sayfası:
Mağaza sayfası
Sepet sayfası
Çıkış sayfası
Müşteri Hesabı Sayfası
Tek ürün sayfası
Ürün Arşivi Sayfası
Sayfalar WooCommerce eklenti kurulumundan sonra yapıldı. WooCommerce/Şablon klasörü altında bulabileceğiniz şablon dosyası tarafından kontrol edilir (tam yol: WP-Content/Eklentiler/WooCommerce/Şablonlar). Divi Builder ile, yukarıdaki varsayılan WooCommerce şablonunu değiştirmek için özel bir şablon oluşturabilirsiniz. Özel bir şablon oluşturabileceğiniz WooCommerce sayfası: Shop Page
Sepet sayfası
Çıkış sayfası
Müşteri Hesabı Sayfası
Tek ürün sayfası
Ürün arşiv sayfaları (etiketler ve kategoriler)
Divi kullanarak bir woocommerce web sitesi nasıl oluşturulur Başlamadan önce, WordPress sitenizde Divi temasını (veya diğer temalarda kullanmayı tercih ederseniz Divi Builder eklentisini) yüklediğinizden emin olun. Ayrıca, WooCommerce eklentisini yüklediğiniz ve etkinleştirdiğinizden emin olun. Hazır olduğunuzda, varsayılan WooCommerce şablonunu değiştirmek için özel bir şablon yapmaya başlayabilirsiniz: Özel Mağaza sayfamızı oluşturmak, Divi Builder kullanarak özel bir WooCommerce Shop sayfasının nasıl oluşturulacağını tartışan ayrı bir makale yaptı. İlgileniyorsanız okuyabilirsiniz.
Divi Builder kullanarak özel bir mağaza sayfası oluşturmaya başlamak için, WordPress kontrol panelinizde ilk, Divi -> Tema Oluşturucu Open. Plus düğmesini tıklayarak yeni bir şablon ekleyin. Woocommerce sayfa bloğundan alışverişi seçin ve şablon düğmesini tıklayın.
Özel gövde ekle -> Özel gövde oluşturun.

Görünen diyalogda, sıfırdan bir özel mağaza sayfası oluşturmak için en sol seçeneği seçebilir (sıfırdan oluşturun) ve bir şablon oluşturmaya başlamak için düğmeyi oluşturun. Veya önceden hazırlanmış düzenden özel bir mağaza sayfası oluşturmak istiyorsanız, önceden hazırlanmış bir düzen seçeneğini seçebilirsiniz.

Bir satır seçin, ardından Toko modülünü ekleyin. Gördüğünüz gibi, mağaza modülü WooCommerce ürününüzü tuval alanına otomatik olarak içerir. Sayfa başına ürün sayısı ve Ayarlar panelindeki İçerik sekmesindeki sütun sayısı gibi ayarlar yapabilirsiniz. Saysayı etkinleştirmek için Element Bloğunu açabilirsiniz. Mağaza modülünü ayarlamak için Tasarım sekmesini ayarlar panelinde açabilirsiniz. Bu sekmede açabileceğiniz yaklaşık 14 blok var. Tipografi (yazı tipi ailesi, yazı tipi boyutu, yazı tipi stili, vb.) Gibi şeyleri ürün öğelerinden (fiyat, başlık, satış rozeti vb.), Metin rengi, görüntü boyutu vb.

İhtiyaçlarınıza göre özel mağaza sayfanıza daha fazla modül ekleyebilirsiniz. Bittiğinde, Divi Builder düzenleyicisinden çıkmak için değişiklikleri ve ardından sağ üst köşedeki X simgesini saklamak için sağ alt köşedeki Kaydet düğmesini tıklayabilirsiniz. Bu sizi Tema Maker Editör sayfasına geri götürecektir.

Tema Maker sayfasında, yeni oluşturduğunuz değişiklikleri uygulamak için Değiştir düğmesini tıklayın (bu durumda özel mağaza sayfası).

Özel Tren Sayfası Oluşturma Divi Builder’ı kullanarak özel bir WooCommerce Sepet sayfası oluştururken içerik gönderme modülünü kullanabilirsiniz. Modül, listedeki arabaya eklenen ürünü, ödeme düğmesi ile birlikte görüntüler. İşte bir örnek.

Divi Builder, sepet sayfası için önceden yapılmış bir düzen sunmaz, bu yüzden baştan beri yapmanız gerekir. İlk olarak, WordPress kontrol panelinizde divi -> tema üreticisi açın. Plus düğmesini tıklayıp Woocommerce sayfa bloğunda bir sepet seçerek yeni bir şablon ekleyin. Bir şablon oluştur düğmesini tıklayın. Özel gövde ekle -> Özel gövde oluştur. Görünen diyalogda, en sol seçeneği seçebilir ve bir sayfa oluşturmaya başlamak için oluşturma düğmesini tıklayabilirsiniz. Belirtildiği gibi, arabaya eklenen ürünleri görüntülemek için içerik gönderme modülünü kullanabilirsiniz. Bu modül dışında, beğeninize herhangi bir modül ekleyebilirsiniz.

Modülü eklemeyi ve düzenlemeyi bitirdikten sonra, değişiklikleri depolamak için sağ alt köşedeki Kaydet düğmesini tıklayabilirsiniz, ardından Divi Builder düzenleyicisinden çıkmak için sağ üst köşedeki X simgesini takip edebilirsiniz. Tema Maker sayfasında, yeni oluşturduğunuz değişiklikleri uygulamak için Değiştir düğmesini tıklayın (bu durumda özel bir sepet sayfası).

Divi Builder’da özel bir ödeme sayfası oluşturmak için özel bir ödeme sayfası oluşturma adımları oluşturmak, yukarıdaki özel sepet sayfası oluşturmaya çok benzer. İçerik gönderme modülünü de kullanabilirsiniz. Ödeme sayfası bağlamında, modül ödeme formunu aşağıdaki gibi görüntüler:

Divi -> tema üreticisi WordPress kontrol panelinizde. Tema Maker sayfasında, yeni bir şablon eklemek için artı düğmesini tıklayın. WooCommerce sayfa bloğundan çıkın ve Şablon düğmesini tıklayın.

Özel gövde ekle -> Özel gövde oluşturun. Görünen diyalogda, Divi Builder daha önce özel bir ödeme sayfası için oluşturulan bir düzen sunmadığından en sol seçeneği tıklayabilirsiniz. Bir satır ekleyin, ardından Post İçerik Modülü. Post içeriği modülünü ayarlamayı bitirdikten sonra, ihtiyaçlarınıza göre başka bir modül ekleyebilirsiniz.

Sayfayı düzenlemeyi bitirdikten sonra, değişiklikleri uygulamak için sağ alt köşedeki Kaydet düğmesini tıklayabilirsiniz, ardından Divi Maker editöründen çıkmak için sağ üst köşedeki X simgesini takip edebilirsiniz. Tema Maker sayfasında değişiklikleri uygulamak için Değiştir düğmesini tıklayın (bu durumda özel bir ödeme sayfası). Özel bir müşteri hesap sayfası oluşturma Tıpkı bir sepet sayfası ve ödeme sayfası gibi, özel bir müşteri hesap sayfası oluştururken içerik gönderme modülünü de kullanabilirsiniz. Müşterinin hesap sayfası bağlamında, modül WooCommerce ile ilgili en son siparişler, gönderim adresleri vb.

Özel bir müşteri hesap sayfası oluşturmaya başlamak için WordPress kontrol panelinizde Divi -> Tema Makinesi’ni açın. Plus düğmesini tıklayarak yeni bir şablon ekleyin. WooCommerce sayfa bloğundan hesabımı seçin ve şablon düğmesini tıklayın.

Şablon eklendikten sonra, özel gövde ekle -> özel gövde oluştur’u tıklayın. Görünen diyalogda, Divi Builder, müşterinin hesap sayfası için daha önce oluşturulan düzeni sunmadığından en sol seçeneği (sıfırdan oluştur) seçebilirsiniz. Bir çizgi ekleyin ve Divi Builder editörü açıldıktan sonra içerik gönderme modülünü ekleyin.

İçerik Posta Modülünü Ayarlar panelinden ayarlayabilirsiniz. Modülü tamamladıktan sonra, ihtiyaçlarınıza göre başka bir modül ekleyebilirsiniz. Modülü eklemeyi ve ayarlamayı bitirdikten sonra, değişiklikleri kaydetmek için sağ alt köşedeki Kaydet düğmesini tıklayabilir ve Divi Builder düzenleyicisini kapatmak için sağ üst köşedeki X simgesini tıklayabilirsiniz. Tema Maker sayfasında değişiklikleri uygulamak için Değiştir düğmesini (bu sayfadaki özel müşteri hesap sayfaları) tıklayın. Belirli bir tek ürün sayfası oluşturmak Divi Builder ayrıca özel bir tek ürün sayfası oluşturmanızı sağlar. Özellikle belirli ürünler, belirli kategoriler altında ürünler ve belirli etiketlere sahip ürünler için tek bir ürün sayfası bile ayarlayabilirsiniz. Divi Builder, bir ürün sayfası için düzen kütüphanesinde önceden hazırlanmış düzen sunmaz, ancak blog yayınları aracılığıyla sunar. Bunlardan biri bu. Önceki düzen üzerinden özel bir tek ürün sayfası oluşturmayı tercih ederseniz indirebilirsiniz. Bu örnekte, başlangıçtan itibaren nasıl özel bir ürün sayfası yapacağınızı göstereceğiz. Divi Builder’ın kendisi, özel bir tek ürün sayfasına ekleyebileceğiniz birkaç modül sunuyor: woo Image: ürün resimlerini görüntülemek için

Woo Başlığı: Ürün başlığını görüntülemek için

Woo Sıralama: Ürün Sıralamasını Görüntülemek için

Woo Fiyatı: Ürün fiyatlarını görüntülemek için

Woo Açıklama: Ürün açıklamalarını görüntülemek için
Woo Sepete Ekle: Sepete Ekle düğmesini eklemek için
Woo Meta: Ürün Meta’yı görüntülemek için (SKU, kategori, etiket)
Özel bir tek ürün sayfası oluşturmaya başlamak için, WordPress kontrol panelinizde ilk olarak divi -> tema üreticisi açın.Bir şablon eklemek için artı düğmesini tıklayın.Ürün bloğunda, özel bir şablon ayarlamak istediğinizi seçin.Tüm ürünler için özel bir şablon ayarlamak istiyorsanız, tüm ürünlerin seçeneklerini seçebilirsiniz.Bir şablon oluştur’u tıklayın.
Özel gövde ekle -> Özel gövde oluşturun. Divi Builder, düzen kitaplığında tek bir ürün sayfası düzeni sunmadığından, görünen diyalogda en sol seçeneği tıklayabilirsiniz. Tuval alanına herhangi bir modül eklemeden önce, birkaç sıra ve parça ekleyerek düzeni ayarlayabilirsiniz. Divi Builder’ı kullanarak tek bir ürün sayfası WooCommerce Custom nasıl oluşturulacağına dair daha ayrıntılı talimatlar için önceki makalemizi okuyabilirsiniz. Özel Ürün Arşivi Sayfası Oluşturma (Ürün Kategorisi/Etiket Sayfası) Divi Builder ile oluşturabileceğiniz son WooCommerce sayfası, ürün kategorisi veya ürün etiketi olsun, ürün arşiv sayfasıdır. Tıpkı tek bir özel ürün sayfası gibi, belirli bir kategoriye veya ürüne özel bir ürün arşiv sayfası da ayarlayabilirsiniz. İsterseniz birkaç özel ürün arşiv sayfası yapabilirsiniz. Özel bir ürün arşivi sayfası oluşturmak için ihtiyacınız olan ana modül bir mağaza modülüdür. Özel bir ürün arşivi sayfası oluşturma adımları, yukarıda daha önce tartıştığımız gibi özel mağaza sayfasından çok farklı değildir. İlk olarak, WordPress kontrol panelinizde Divi -> Tema Oluşturucu açın ve yeni bir şablon eklemek için Plus düğmesini tıklayın. Block Arşivi sayfasında özel bir şablon ayarlamak istediğiniz ürün kategorisini/etiketini seçin. Şablon düğmesini tıklayın.
Özel gövde ekle -> Özel gövde oluşturun. Görünen diyalogda, Divi Builder, daha önce ürün arşivi sayfası için yapılan düzeni sunmadığından en sol seçeneği seçebilirsiniz. Tuval alanında, ihtiyaçlarınıza göre birkaç parça ve satır ekleyebilirsiniz. Bölüm ve satır hazır olduktan sonra gerekli modülü ekleyin. Bir kez daha, mağaza modülü, özel bir ürün arşivi sayfası oluşturmak için kullanabileceğiniz ana modüldür. Yani, bu modülü eklemek gerekir. Küçük bir not. Mevcut arşivlere dayalı ürünleri görüntülemek için bir mağaza modülü ayarlamanız gerekir. Bunu yapmak için, Ayarlar panelindeki içerik sekmesinin altındaki içerik bloğunu açın ve geçerli sayfayı kullanma seçeneğini etkinleştirin.
Dinamik bir arşiv başlığı görüntülemek için Divi Builder’ın dinamik metin özelliğini kullanabilirsiniz. İlk olarak, metin modülünü tuval alanına ekleyin. Eklendikten sonra, Ayarlar panelindeki İçerik sekmesinin altındaki metin bloğunu açın. Metin düzenleyicisindeki dinamik simgeyi tıklayın ve görünen gerilme menüsünde Post/Arşiv Başlıkını seçin.
Metin modülünü düzenlemek için Ayarlar panelindeki Tasarım sekmesini açabilirsiniz. İhtiyaçlarınıza göre özel ürün arşiv sayfanıza mağaza ve metin modülünün yanı sıra başka bir modül ekleyebilirsiniz. Sayfayı düzenlemeyi bitirdikten sonra, değişiklikleri kaydetmek için sağ alt köşedeki Kaydet düğmesini tıklayabilir ve Divi Builder düzenleyicisinden çıkmak için sağ üst köşedeki X simgesini tıklayabilirsiniz. Tema Maker sayfasında, değişiklikleri uygulamak için Değiştir düğmesini (bu durumda özel ürün arşivleri) tıklayabilirsiniz. İlgileniyorsanız Divi Builder’ı kullanarak Woocommerce’de özel bir ürün kategorisi sayfasının nasıl oluşturulacağını tartışan ayrı bir makalemiz var. Tamamlandı. Tüm Kustom Woocommerce sayfalarını oluşturdunuz. Bu, Divi Builder kullanarak özel wooocommerce web sitenizi yeni oluşturduğunuz anlamına gelir. Sayfa Maker ERA’nın alt çizgisi, kodlamadan benzersiz, güzel ve ayarlanmış bir web sitesi oluşturma fırsatları açtı. Divi Builder ile, ayarlanmış bir E-Niaga web sitesi oluşturarak daha da ileri gidebilirsiniz. Divi Builder, doğrudan görsel düzenleyicisini kullanarak görsel olarak uyarlanmış WooCommerce ile çalışan E-Niaga web sitesi oluşturmanıza izin veren bir WooCommerce üreticisi ile birlikte gelir. Yukarıda tartıştığımız gibi mağaza sayfası, sepet sayfası, ödeme sayfası vb. Gibi varsayılan WooCommerce sayfasını değiştirmek için özel bir sayfa oluşturabilirsiniz. Divi Builder’ı kullanmak için iki seçenek var. İlk olarak, bağımsız bir eklenti olarak kullanabilirsiniz. İkincisi, divi temasını kullanabilirsiniz.
Son seçeneği tercih ederseniz, Divi Builder eklentisini tekrar yüklemenize gerek yoktur, çünkü bu Divi temasının ayrılmaz bir parçasıdır. Divi Builder’ı alın

Divi kullanarak özel bir Wooocommerce web sitesi nasıl oluşturulur (Kapsamlı Kılavuz)