Divi Kullanarak Özelleştirilmiş Bir WooCommerce Web Sitesi Nasıl Oluşturulur (Kapsamlı Bir Kılavuz)

WooCommerce, WordPress tabanlı bir e-ticaret web sitesi oluşturmak için en popüler eklentidir. Son derece özelleştirilebilir, tasarımınızla benzersiz bir e-ticaret web sitesi oluşturmanıza olanak tanır. Kodlama beceriniz olmasa bile. Divi, kodlama olmadan tamamen özelleştirilmiş bir WooCommerce web sitesi oluşturmanıza yardımcı olabilir. Bu yazıda size nasıl olduğunu göstereceğiz.

Divi'nin kendisi, Elegant Themes'in bir ürünüdür. Divi Builder adlı yerleşik bir sayfa oluşturucu ile birlikte gelen 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ümlerini oluşturmak için kullanabileceğiniz bir tema oluşturucu özelliği ile birlikte gelir. WordPress'inizde WooCommerce kuruluysa, mağaza sayfası, tek ürün sayfası, ödeme sayfası vb. gibi özel WooCommerce sayfaları da oluşturabilirsiniz. Divi Builder'ın görsel düzenleyicisini kullanarak bunu yapabilirsiniz. Tek bir kod satırına dokunmanıza 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 Ana Sayfalarını Anlamak

Daha ileri adım atmadan önce, WooCommerce'in ana sayfalarını anlamak çok önemlidir. İşte WooCommerce'in ana sayfaları:

• Mağaza Sayfası
• Sepet Sayfası
• Ödeme Sayfası
• Müşterilerin Hesap Sayfası
• Tek Ürün Sayfası
• Ürün Arşivi Sayfaları

Bu sayfalar, WooCommerce eklentisinin yüklenmesi üzerine oluşturulmuştur. Bunlar, woocommerce/templates klasörü altında bulabileceğiniz şablon dosyaları tarafından kontrol edilir (tam yol: wp-content/plugins/woocommerce/templates ). Divi Builder ile, yukarıdaki WooCommerce varsayılan şablonlarını değiştirmek için özel şablonlar oluşturabilirsiniz. Özel şablonlar oluşturabileceğiniz WooCommerce sayfaları şunlardır:

• Mağaza Sayfası
• Sepet Sayfası
• Ödeme Sayfası
• Müşterilerin Hesap Sayfası
• Tek Ürün Sayfası
• Ürün Arşiv Sayfaları (Etiketler ve Kategoriler)

Divi Kullanarak WooCommerce Web Sitesi Nasıl Oluşturulur

Başlamadan önce, WordPress sitenize Divi temasını (veya başka bir temada kullanmayı tercih ederseniz Divi Builder eklentisini) yüklediğinizden emin olun. Ayrıca WooCommerce eklentisini kurduğunuzdan ve etkinleştirdiğinizden emin olun.

Hazır olduğunuzda, WooCommerce'in varsayılan şablonlarını değiştirmek için özel şablonlar oluşturmaya başlayabilirsiniz:

Özel Mağaza Sayfası Oluşturma

Divi Builder kullanarak özel bir WooCommerce mağaza sayfasının nasıl oluşturulacağını anlatan ayrı bir makale oluşturduk. İlginizi çekerse okuyabilirsiniz.

Divi Builder'ı kullanarak özel bir mağaza sayfası oluşturmaya başlamak için önce WordPress panonuzda Divi -> Theme Builder'a gidin. Artı düğmesine tıklayarak yeni bir şablon ekleyin. WooCommerce Sayfaları bloğunda Alışveriş'i seçin ve Şablon Oluştur düğmesini tıklayın.

Özel Gövde Ekle -> Özel Gövde Oluştur öğesine tıklayın.

Görünen iletişim kutusunda, özel mağaza sayfasını sıfırdan oluşturmak için en soldaki seçeneği ( SCRATCH OLUŞTUR ) seçebilir ve şablonu oluşturmaya başlamak için İnşaya Başla düğmesini tıklayabilirsiniz. Veya önceden hazırlanmış bir düzenden özel mağaza sayfası oluşturmak istiyorsanız, ÖNCEDEN YAPILAN BİR DÜZEN SEÇ seçeneğini de seçebilirsiniz.

Bir satır seçin ve ardından Mağaza modülünü ekleyin.

Gördüğünüz gibi, Mağaza modülü WooCommerce ürünlerinizi tuval alanına otomatik olarak yükler. Ayarlar panelindeki İçerik sekmesinde sayfa başına ürün sayısı ve sütun sayısı gibi ayarları yapabilirsiniz. Sayfalandırmayı etkinleştirmek için Elements bloğunu açabilirsiniz.

Mağaza modülünün stilini ayarlamak için ayarlar panelindeki Tasarım sekmesine gidebilirsiniz. Bu sekmede açabileceğiniz yaklaşık 14 blok var. Ürün öğelerinin tipografisi (yazı tipi ailesi, yazı tipi boyutu, yazı tipi stili vb.), metin rengi, görüntü boyutu vb. gibi şeyleri ayarlayabilirsiniz.

İhtiyaçlarınıza göre özel mağaza sayfanıza daha fazla modül ekleyebilirsiniz. İşiniz bittiğinde, Divi Builder düzenleyicisinden çıkmak için sağ üst köşedeki X simgesinin ardından değişiklikleri kaydetmek için sağ alt köşedeki Kaydet düğmesine tıklayabilirsiniz. Bu sizi Tema Oluşturucu düzenleyici sayfasına geri götürecektir.

Tema Oluşturucu sayfasında, az önce yaptığınız değişikliği uygulamak için Değişiklikleri Kaydet düğmesini tıklayın (bu durumda özel mağaza sayfası).

Özel Sepet Sayfası Oluşturma

Divi Builder'ı kullanarak özel bir WooCommerce alışveriş sepeti sayfası oluştururken, İçerik Gönderi modülünü kullanabilirsiniz. Modül, sepete eklenen ürünleri, ödeme butonu ile birlikte bir liste halinde gösterecektir. İşte örnek.

Divi Builder, alışveriş sepeti sayfası için önceden hazırlanmış bir düzen sunmaz, bu nedenle onu sıfırdan oluşturmanız gerekir. İlk olarak, WordPress kontrol panelinizde Divi -> Theme Builder'a gidin. Artı düğmesine tıklayarak yeni bir şablon ekleyin ve WooCommerce Sayfaları bloğunda Sepet'i seçin. Şablon Oluştur düğmesini tıklayın.

Özel Gövde Ekle -> Özel Gövde Oluştur öğesine tıklayın. Görünen iletişim kutusunda en soldaki seçeneği seçebilir ve sayfayı oluşturmaya başlamak için İnşaya Başla düğmesini tıklayabilirsiniz.

Bahsedildiği gibi, sepete eklenen ürünleri görüntülemek için İçerik Gönder modülünü kullanabilirsiniz. Bu modül dışında dilediğiniz modülü dilediğiniz gibi ekleyebilirsiniz.

Modülleri eklemeyi ve düzenlemeyi bitirdikten sonra, değişiklikleri kaydetmek için sağ alt köşedeki Kaydet düğmesine ve ardından Divi Builder düzenleyicisinden çıkmak için sağ üst köşedeki X simgesine tıklayabilirsiniz. Tema Oluşturucu sayfasında, az önce yaptığınız değişikliği uygulamak için Değişiklikleri Kaydet düğmesini tıklayın (bu durumda özel alışveriş sepeti sayfası).

Özel Ödeme Sayfası Oluşturma

Divi Builder'da özel bir ödeme sayfası oluşturma adımları, yukarıdaki özel alışveriş sepeti sayfasını oluşturmaya oldukça benzer. Ayrıca İçerik Gönderi modülünü de kullanabilirsiniz. Ödeme sayfası bağlamında modül, ödeme formunu aşağıdaki gibi görüntüler:

WordPress kontrol panelinizde Divi -> Theme Builder'a gidin. Tema Oluşturucu sayfasında, yeni bir şablon eklemek için artı düğmesini tıklayın. WooCommerce Sayfaları bloğunda Ödeme'yi seçin ve Şablon Oluştur düğmesini tıklayın.

Özel Gövde Ekle -> Özel Gövde Oluştur öğesine tıklayın. Divi Builder özel ödeme sayfası için önceden hazırlanmış bir düzen sunmadığından, görünen iletişim kutusunda en soldaki seçeneği tıklatabilirsiniz.

Bir satır ve ardından İçerik Gönderme modülü ekleyin.

İçerik Gönderi modülünü ayarlar panelinde özelleştirebilirsiniz. İçerik Gönderi modülünü özelleştirmeyi tamamladığınızda, ihtiyaçlarınıza göre başka modüller ekleyebilirsiniz.

Sayfayı düzenlemeyi bitirdikten sonra, değişikliği uygulamak için sağ alt köşedeki Kaydet düğmesini ve ardından Divi oluşturucu düzenleyicisinden çıkmak için sağ üst köşedeki X simgesini tıklayabilirsiniz. Tema Oluşturucu sayfasında, değişikliği uygulamak için Değişiklikleri Kaydet düğmesini tıklayın (bu durumda özel ödeme sayfası).

Özel Müşterilerin Hesap Sayfasının Oluşturulması

Sepet sayfası ve ödeme sayfası ile aynı şekilde, özel müşteri hesap sayfası oluştururken İçerik Gönderi modülünü de kullanabilirsiniz. Modül, müşterilerin hesap sayfası bağlamında, son siparişler, teslimat adresi vb. gibi WooCommerce ile ilişkili bağlantıları görüntüler.

Özel müşterilerin hesap sayfasını oluşturmaya başlamak için WordPress kontrol panelinizde Divi -> Theme Builder'a gidin. Artı düğmesine tıklayarak yeni bir şablon ekleyin. WooCommerce Sayfaları bloğunda Hesabım'ı seçin ve Şablon Oluştur düğmesini tıklayın.

Şablon eklendikten sonra Özel Gövde Ekle -> Özel Gövde Oluştur öğesine tıklayın. Divi Builder, müşterilerin hesap sayfası için önceden hazırlanmış bir düzen sunmadığından, görünen iletişim kutusunda en soldaki seçeneği ( SCRATCH OLUŞTURMA ) seçebilirsiniz.

Divi Builder düzenleyicisi açıldığında bir satır ekleyin ve İçerik Gönderi modülünü ekleyin.

İçerik Gönderi modülünü ayarlar panelinden özelleştirebilirsiniz. Modülü özelleştirdikten sonra, ihtiyaçlarınıza göre başka modüller ekleyebilirsiniz. Modülleri eklemeyi ve özelleştirmeyi bitirdikten sonra, değişiklikleri kaydetmek için sağ alt köşedeki Kaydet düğmesine tıklayabilir ve Divi Builder düzenleyicisini kapatmak için sağ üst köşedeki X simgesine tıklayabilirsiniz.

Tema Oluşturucu sayfasında, değişikliği uygulamak için Değişiklikleri Kaydet düğmesini tıklayın (bu sayfadaki özel müşterinin hesap sayfası).

Özel Tek Ürün Sayfası Oluşturma

Divi Builder ayrıca özel bir tek ürün sayfası oluşturmanıza da olanak tanır. Hatta özel tek ürün sayfasını belirli ürünlere, belirli kategorilerdeki ürünlere ve belirli etiketlere sahip ürünlere atayabilirsiniz. Divi Builder, tek ürün sayfası için düzen kitaplığında önceden hazırlanmış bir düzen sunmaz, ancak blog gönderileri aracılığıyla olanları sunar. Bunlardan biri de bu. Önceden hazırlanmış bir düzen aracılığıyla özel bir tek ürün sayfası oluşturmayı tercih etmeniz durumunda indirebilirsiniz.

Bu örnekte, sıfırdan özel bir tek ürün sayfasının nasıl oluşturulacağını göstereceğiz. Divi Builder'ın kendisi, özel tek bir ürün sayfasına ekleyebileceğiniz bazı modüller sunar:

• Woo Image: Ürün resmini görüntülemek için
• Woo Title: Ürün başlığını görüntülemek için
• Woo Derecelendirmesi: Ürün derecelendirmesini görüntülemek için
• Woo Fiyatı: Ürün fiyatını görüntülemek için
• Woo Açıklama: Ürün açıklamasını görüntülemek için
• Woo Sepete Ekle: Sepete ekle düğmesini eklemek için
• Woo Meta: Ürün metasını (SKU, kategoriler, etiketler) görüntülemek için

Özel bir tek ürün sayfası oluşturmaya başlamak için önce WordPress panonuzda Divi -> Theme Builder'a gidin. Şablon eklemek için artı düğmesine tıklayın. Ürünler bloğunda, özel şablonu nereye atamak istediğinizi seçin. Özel şablonu tüm ürünlere atamak istiyorsanız Tüm Ürünler seçeneğini seçebilirsiniz. Şablon Oluştur 'u tıklayın.

Özel Gövde Ekle -> Özel Gövde Oluştur öğesine tıklayın. Divi Builder, düzen kitaplığında önceden hazırlanmış tek bir ürün sayfası düzeni sunmadığından, görünen iletişim kutusunda en soldaki seçeneğe tıklayabilirsiniz.

Kanvas alanına herhangi bir modül eklemeden önce, bazı satırlar ve bölümler ekleyerek düzeni ayarlayabilirsiniz. Divi Builder kullanarak özel bir WooCommerce tek ürün sayfasının nasıl oluşturulacağı hakkında daha ayrıntılı talimatlar için önceki makalemizi okuyabilirsiniz.

Özel Ürün Arşiv 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. Özel tek ürün sayfasında olduğu gibi, belirli bir kategori veya ürüne özel ürün arşiv sayfası da atayabilirsiniz. İsterseniz birden fazla özel ürün arşiv sayfası oluşturabilirsiniz.

Özel ürün arşiv sayfası oluşturmak için ihtiyacınız olan ana modül Mağaza modülüdür. Özel bir ürün arşiv sayfası oluşturma adımları, yukarıda daha önce ele aldığımız gibi, özel Mağaza sayfasından çok farklı değildir. İlk olarak, WordPress kontrol panelinizde Divi -> Theme Builder'a gidin ve yeni bir şablon eklemek için artı düğmesine tıklayın. Arşiv Sayfaları bloğunda özel şablonu atamak istediğiniz bir ürün kategorisi/etiketi seçin. Şablon Oluştur düğmesini tıklayın.

Özel Gövde Ekle -> Özel Gövde Oluştur öğesine tıklayın. Divi Builder, ürün arşiv sayfası için önceden hazırlanmış bir düzen sunmadığından, görünen iletişim kutusunda en soldaki seçeneği seçebilirsiniz. Kanvas alan üzerine ihtiyaçlarınıza göre bazı bölümler ve satırlar ekleyebilirsiniz. Bölümler ve satırlar hazır olduğunda gerekli modülleri ekleyin. Yine Shop modülü, özel bir ürün arşiv sayfası oluşturmak için kullanabileceğiniz ana modüldür. Dolayısıyla bu modülün eklenmesi gerekmektedir.

Küçük bir not. Ürünleri mevcut arşive göre görüntülemek için Mağaza modülünü ayarlamanız gerekir. Bunu yapmak için ayarlar panelindeki İçerik sekmesinin altındaki İçerik bloğunu açın ve Geçerli Sayfayı Kullan seçeneğini etkinleştirin.

Arşiv başlığını dinamik olarak 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üzenleyicideki dinamik simgeye tıklayın ve görünen açılır menüden Gönderi/Arşiv Başlığı'nı seçin.

Metin modülünün stilini ayarlamak için ayarlar panelindeki Tasarım sekmesine gidebilirsiniz.

Mağaza modülü ve Metin modülü dışındaki diğer modülleri ihtiyaçlarınıza göre özel ürün arşiv sayfanıza ekleyebilirsiniz. Sayfayı düzenlemeyi bitirdikten sonra, değişikliği kaydetmek için sağ alt köşedeki Kaydet düğmesine tıklayabilir ve Divi Builder düzenleyicisinden çıkmak için sağ üst köşedeki X simgesine tıklayabilirsiniz. Tema Oluşturucu sayfasında, değişikliği uygulamak için Değişiklikleri Kaydet düğmesini tıklayabilirsiniz (bu durumda özel ürün arşivi).

İlgileniyorsanız, Divi Builder kullanarak WooCommerce'de özel bir ürün kategorisi sayfasının nasıl oluşturulacağını anlatan ayrı bir makalemiz var.

Tamamlandı.

Tüm özel WooCommerce sayfalarını oluşturdunuz. Bu, Divi Builder'ı kullanarak özelleştirilmiş WooCommerce web sitenizi oluşturduğunuz anlamına gelir.

Alt çizgi

Sayfa oluşturucu dönemi, kodlama olmadan benzersiz, güzel ve özelleştirilmiş bir web sitesi oluşturma fırsatı yarattı. Divi Builder ile özelleştirilmiş bir e-ticaret web sitesi oluşturarak bir adım daha ileri gidebilirsiniz. Divi Builder, canlı görsel düzenleyicisini kullanarak özelleştirilmiş bir WooCommerce destekli e-ticaret web sitesi oluşturmanıza olanak tanıyan bir WooCommerce oluşturucuyla birlikte gelir. WooCommerce'in mağaza sayfası, alışveriş sepeti sayfası, ödeme sayfası gibi varsayılan sayfalarını değiştirmek için yukarıda bahsettiğimiz gibi özel sayfalar oluşturabilirsiniz.

Divi Builder'ı kullanmak için iki seçenek vardır. İlk olarak, bağımsız bir eklenti olarak kullanabilirsiniz. İkincisi, Divi temasını kullanabilirsiniz. İkinci seçeneği tercih ederseniz, Divi temasının ayrılmaz bir parçası olduğu için Divi Builder eklentisini artık yüklemeniz gerekmez.