Divi ile WooCommerce Ödeme Sayfası Şablonu Nasıl Yapılır

Rifat Divi Eğitimleri Dec 27, 2021

Bir WooCommerce Ödeme Sayfası oluşturmak, genellikle arka uçtaki PHP şablon dosyasında önemli ölçüde özelleştirme ve önemli miktarda özel CSS gerektirir. Ancak bu prosedür Divi'nin Woo Modülleri sayesinde eğlenceli ve kolay hale geldi! Bir WC Checkout Sayfasını güncellemek için Divi'yi kullandığınızda, WC kısa kodu, gelişmiş yerleşik tasarım seçenekleri kullanılarak görsel olarak şekillendirilmeye hazır, dinamik Woo Checkout Modüllerinin yapılandırılmış bir düzenine dönüşür. Bu, ödeme sayfasının tasarımı üzerinde tam kontrol sağlar.

Bu kılavuz nasıl kullanılacağını öğretecek DIVI tamamen benzersiz WooCommerce Ödeme Sayfası oluşturmak için. İlk olarak, ödeme sayfası için erişilebilir dinamik Woo Modüllerini kullanarak WooCommerce Ödeme Sayfası oluşturacağız. Ardından, işiniz bittiğinde, ödeme sayfası tasarımını Tema Oluşturucu'da bir ödeme sayfası şablonuna nasıl uygulayacağınızı göstereceğiz. Bu nedenle, Ödeme Sayfasının kendisini değiştirmek veya bir Ödeme Sayfası Şablonu geliştirmek isteyip istemediğiniz, Divi'nin kapsamına girdi. Kısa sürede görsel olarak çekici ödeme sayfaları oluşturma yolunda olacaksınız.

Tasarım Önizlemesi

Tasarımımız bu şekilde olacak.

WooCommerce Kontrol Çıkış Sayfası ve Divi

WooCommerce'i Divi sitenize kurduğunuzda, alışveriş sepeti sayfası, alışveriş sepeti sayfası, ödeme işlemi ve hesap sayfası gibi birincil WC sayfaları oluşturacaktır. Ardından, sayfanın içeriği, arka uç WordPress blok düzenleyicisinde bir kısa kod kullanılarak dağıtılır.

Harika Web Siteleri Oluşturun

En iyi ücretsiz sayfa oluşturucu Elementor ile

Şimdi başla

Bu Checkout sayfasında Divi Builder'ı etkinleştirirseniz, WooCommerce Checkout sayfasının içerik bileşenlerinin her biri, sayfayı özelleştirmek için kullanılabilecek Divi Woo Modülleri olarak yüklenecektir.

Divi'de Ödeme Sayfası Tasarlamak İçin Woo Modülleri

Divi, bir sayfa şablonuna etkileşimli içerik eklemek için birkaç temel modüle sahiptir. Bunlardan bazıları, Ödeme sayfasına uyarlanmış Woo Modülleri içerir.

Ödeme sayfası veya şablonu oluşturmak için aşağıdaki modüller gereklidir:

Gönderi Başlığı: Â Bir Ödeme sayfası şablonu oluştururken, bu, Ödeme sayfasının başlığını dinamik olarak görüntüler.

Woo Bildirimi: Â Bu modül birçok sayfa türüne (sepet, ürün ve ödeme) atanabilir. Gerektiğinde kullanıcıya önemli bildirimleri dinamik olarak gösterecektir.

Woo Checkout Faturalandırma: Â Bu modül, ödeme işlemi sırasında kullanılan fatura ayrıntıları formunu görüntüler.

Woo Checkout Shipping: Â Bu modül, ödeme işlemi sırasında görünen gönderi ayrıntıları formunu görüntüler.

Woo Checkout Bilgileri: Â Bu modül, ödeme işlemi boyunca kullanılan ek bilgi formunu gösterir.

Woo Checkout Ayrıntıları: Â Bu modül, satın alınan ürünler ve fiyatları da dahil olmak üzere ödeme sırasında sipariş ayrıntılarını görüntüler.

Woo Checkout Payment: Â Bu modül, ödeme sırasında ödeme türü seçimlerini ve ödeme formu ayrıntılarını görüntüler.

Başka bir woo modülü seçeneği:

Woo Breadcrumbs: Â WooCommerce Breadcrumb gezinme çubuğu görüntülenecektir.

Bir Ödeme Sayfası veya Şablon Oluşturun

Daha önce de söylediğimiz gibi, Divi Woo Modüllerini kullanarak kolayca özel bir WooCommerce Checkout sayfası oluşturabiliriz. Ancak, özel bir Checkout şablonu oluşturmak için aynı tasarım sürecini kullanabilirsiniz. Bu eğitici, ödeme sayfası için özel bir Ödeme sayfası düzeni oluşturacaktır. Ardından, Divi Tema Oluşturucu'yu kullanarak, bir Ödeme Sayfası Şablonu oluşturmak için özel ödeme sayfası düzeninden nasıl yararlanacağınızı göstereceğiz.

WooCommerce Ödeme Sayfası Düzeni Oluşturmak için Divi'yi Kullanma

Bu WooCommerce Checkout Sayfası öğreticisinin amacı, WooCommerce'de WooCommerce Checkout Sayfası olarak adlandırılan WooCommerce Checkout Sayfası için özel bir sayfa düzeni geliştirmektir. Dersin sonunda, yeni bir Ödeme Sayfası Şablonu oluşturmak için bu ödeme sayfası düzenini nasıl kolayca kaydedip Tema Oluşturucu'ya aktaracağınızı göstereceğiz.

WooCommerce Ödeme Sayfası Düzenleme

WordPress Kontrol Panelinden WooCommerce Ödeme Sayfasını düzenlemek için tıklayın. Sayfa, varsayılan olarak ödeme sayfası içeriğini oluşturmak için kullanılan kısa kodu içerecektir.

Sayfa düzenleyicinin üst kısmındaki Divi Builder'ı Kullan seçeneğini tıklayın.

Divi oluşturucu ile düzenlemeyi seçin.

Sıfırdan başlamak

Daha önce belirtildiği gibi, sayfa, Ödeme Sayfasının içeriğini oluşturan tüm özelleştirilebilir Divi Modülleri (önemli Woo Modülleri dahil) ile yüklenecektir. Tabii ki, isterseniz mevcut düzeni kullanabilir ve zaten orada olan modülleri değiştirmeye başlayabilirsiniz. Ancak bu kılavuz için sıfırdan başlayacağız.

Sayfanın altındaki seçenekler menüsüne girin ve düzeni temizlemek için Düzeni Temizle düğmesi (çöp kutusu simgesi) için EVET'i seçin.

Bölüm Arka Planı

Başlamak için yeni bir normal bölüme aşağıdaki gibi bir arka plan rengi ekleyin:

  • Arka Plan Rengi: #264653

Satır ve Sütun

Bir sonraki adım, bu bölüme tek sütunlu bir satır eklemek olacaktır.

Dinamik Ödeme Sayfası Başlığı Oluşturma

Ödeme sayfası için sayfa başlığını dinamik hale getirmek için sütuna bir yazı başlığı modülü ekleyin.

Yazı Başlığı İçeriği

Gönderi başlığı ayarlarında, öğeleri yalnızca başlığı gösterecek şekilde aşağıdaki gibi güncelleyin:

  • Başlığı Göster: EVET
  • Metayı Göster: HAYIR
  • Öne Çıkan Resmi Göster: HAYIR

Yazı Başlığı Metni

Gönderi başlığı metnine stil vermek için tasarım sekmesi altında aşağıdakileri güncelleyin:

  • Başlık Yazı Tipi: DM Serif Ekranı
  • Başlık Metin Rengi: #e9c46a
  • Başlık Metin Boyutu: 80px (masaüstü), 60px (tablet), 42px (telefon)
  • Başlık Satırı Yüksekliği: 1.2em

Dinamik Woo Bildirim Modülü

Ödeme sayfasıyla etkileşim kurarken bildirimleri görmek için Woo Notice modülünü sayfanın en üstüne yerleştirmek her zaman iyi bir fikirdir. Yalnızca gerektiğinde görüntülenecek bildirimler oluşturduğumuzu unutmayın.

Woo Notice Modülünü eklemek için gönderi başlığı modülüne gidin ve yeni bir Woo Notice modülü eklemek için tıklayın.

Woo Bildirim Sayfası Türü ve Arka Planı

Ardından, Woo Notice'in Sayfa Türü ve Arka Plan rengini aşağıdaki gibi güncelleyin:

  • Sayfa Türü: Ödeme Sayfası
  • Arka Plan Rengi: #2a9d8f

Başlık Metni

Tasarım sekmesinden aşağıdaki ayarları güncelleyin.

  • Başlık Yazı Tipi: Roboto
  • Başlık Yazı Tipi Ağırlığı: Orta
  • Başlık Metin Rengi: #e9c46a
  • Başlık Metin Boyutu: 14px
  • Başlık Satırı Yüksekliği: 1.8em
  • Bağlantı Metni Rengi: #f4a261

Woo Bildirim Alanları

Giriş formu ve kupon kodu gibi öğeler için alanlar ve alan adları, Ödeme Sayfası Bildirimlerinde bulunur. Bu alanlar için alan etiketlerinin stilini değiştirmek için aşağıdaki değişiklikleri yapın:

  • Gerekli Alan Gösterge Rengi: #e9c46a
  • Alan Etiketi Yazı Tipi: Roboto
  • Alan Etiketi Yazı Tipi Ağırlığı: Kalın
  • Yer Tutucu Rengi: #e9c46a
  • Alanlar Arka Plan Rengi: şeffaf
  • Alanlar Metin Rengi: #e9c46a
  • Alan Odak Metni Rengi: #e9c46a
  • Alan Dolgusu: 12 piksel üst, 12 piksel alt
  • Alanlar Kenarlık Genişliği: 1px
  • Alan Kenarlığı Rengi: rgba(255,255,255,0.32)

Woo Bildirim Düğmesi

Düğmeleri özelleştirmenin zamanı geldi.

  1. Düğme için Özel Stilleri Kullan: EVET
  2. Düğme Metin Boyutu: 14px
  3. Düğme Metin Rengi: #e9c46a
  4. Düğme Arka Plan Rengi: #2a9d8f
  5. Düğme Kenar Genişliği: 1px
  6. Düğme Kenar Rengi: #e9c46a
  7. Düğme Sınır Yarıçapı: 0px
  8. Düğme Harf Aralığı: 1px
  9. Düğme Yazı Tipi: Roboto
  10. Düğme Yazı Tipi Ağırlığı: Kalın
  11. Düğme Yazı Tipi Stili: TT
  12. Düğme Dolgusu: 12 piksel üst, 12 piksel alt, 24 piksel sol, 24 piksel sağ

Woo Bildirim Formu

Form seçenek grubu altında, bildirim formlarının her biri biçimlendirilebilir. Formlara hafif bir kenarlık vermek için aşağıdakileri güncelleyin:

  1. Yuvarlak Köşeler Oluşturun: 0px
  2. Form Kenarlığı Genişliği: 1px
  3. Form Kenarlığı Rengi: rgba(255,255,255,0.32)

Woo Bildirim Kutusu Gölgesi

Woo bildirim çubuğuna üst kenarlık benzeri bir tasarım eklemek için kutu gölgesi seçeneklerini aşağıdaki gibi güncelleyin:

  1. Kutu Gölgesi: ekran görüntüsüne bakın
  2. Kutu Gölgesi Yatay Konumu: 0px
  3. Kutu Gölge Dikey Konumu: 3px
  4. Gölge Rengi: #999e75

Woo Checkout Faturalandırma Modülü

Artık sayfa başlığımız ve bildirimlerimiz hazır olduğuna göre, ödeme sayfasının bir diğer önemli bileşeni olan Woo Checkout Faturalandırma içeriğini ekleyebiliriz.

Faturalama malzemesini eklemeden önce beşte üçü beşte ikisi sütun düzeniyle yeni bir satır oluşturun.

Sütun 1'e bir Woo Checkout faturalandırma modülü ekleyin.

Woo Checkout Fatura Başlığı Metni

Woo Checkout Faturalandırma modülünden, ayarı açın ve tasarım sekmesi altındaki aşağıdakileri ayarlayın.

  • Başlık Yazı Tipi: DM Serif Ekranı
  • Başlık Metin Rengi: #fff
  • Başlık Metin Boyutu: 30px (masaüstü), 24px (tablet), 18px (telefon)
  • Başlık Satırı Yüksekliği: 1.4em

Woo Checkout Faturalandırma Alanı ve Alan Etiketleri

Bildirim Modülü gibi, bu modül de alan ve alan etiketlerini biçimlendirme seçeneklerini içerir. Tüm alanlarımızın ve alan etiketlerimizin sayfa boyunca tutarlı olmasını istediğimiz için, Notice modülünden alan ve alan etiketi stillerini kopyalayabilir ve bunları Woo Checkout Faturalama modülüne yapıştırabiliriz.

Bu konuda nasıl gidileceği aşağıda açıklanmıştır:

  1. Sayfanın üst kısmındaki Bildirim Modülü ayarlarını açın.
  2. Tasarım sekmesi altında, Alan Etiketleri seçenek grubuna sağ tıklayın.
  3. Sağ tıklama menüsünden "Alan Etiketleri Stillerini Kopyala"yı seçin.

Kopyalanan stili yeni eklenen modüle yapıştırın.

Ve bunun gibi bir şey görünecek.

Woo Checkout Faturalandırma Formu Bildirimi

Form bildirimi, formu doldururken herhangi bir bildirimin veya hatanın dinamik olarak görüntülenmesinden sorumludur. Form bildirimini biçimlendirmek için Woo Checkout Faturalandırma ayarlarına gidin ve aşağıdaki değişiklikleri yapın:

  • Form Bildirimi Arka Plan Rengi: #e58991
  • Form Bildirim Doldurma: 8 piksel üst, 8 piksel alt
  • Form Bildirim Yazı Tipi: Roboto
  • Form Bildirim Metin Boyutu: 14px

Woo Checkout Fatura Aralığı ve Kenarlığı

Tasarımı bitirmek için, modülü aşağıdaki gibi biraz dolgu ve hafif bir kenarlık ekleyelim:

  • Dolgu: 16 piksel üst, 16 piksel alt, 16 piksel sol, 16 piksel sağ
  • Kenar Genişliği: 1px
  • Kenar Rengi: rgba(255,255,255,0.1)

Woo Checkout Nakliye ve Woo Checkout Bilgileri

Woo Checkout Shipping modülü ve Woo Checkout Information modülü, ödeme sayfası şablonu oluşturmak için gerekli bileşenlerdir. Ödemeyi tamamlamadan önce Woo Checkout Shipping modülü, gönderi ayrıntılarını girmek için gereken formu görüntüler. Ayrıca, Woo Checkout Information modülü, kullanıcıların ödeme yapmadan önce ek bilgi sağlamasına olanak tanıyan bir giriş formu görüntüler.

Modül Ekleme

Şimdi, gidin ve bir Woo ödeme nakliye modülü ekleyin.

Ayrıca bir Woo Checkout bilgi modülü ekleyin.

Her woo modülü (Ödeme Gönderimi ve Ödeme Bilgileri), Woo Checkout Faturalama modülü gibi görünmelidir. Her biri için ihtiyacımız olan stilleri her birine kopyalayabiliriz. Tasarımı kopyalayıp buraya yapıştıralım.

Woo Ödeme Ayrıntıları Modülü

Gönderim ve ekstra bilgi içeriğimizi tasarladığımıza göre, Woo Checkout Ayrıntıları içeriğini eklemeye hazırız. Bu, satın alma siparişi ayrıntılarını görüntüleyen ödeme sayfasının bir diğer önemli bileşenidir. Bir ürün listesi, ara toplamlar ve satın alma işleminin toplam fiyatını içerir. Ayrıca, uygulanmış olan ve bir bağlantı yoluyla geri alınabilen kupon tasarruflarını da gösterir.

Aynı satırın 2. sütunundaki ödeme ayrıntılarına yeni bir Woo Checkout Ayrıntıları modülü ekleyin.

Woo Ödeme Ayrıntıları Başlık Metni

Başlık metni ayarlarını aşağıdaki gibi güncelleyin:

  • Başlık Yazı Tipi: DM Serif Ekranı
  • Başlık Yazı Tipi Ağırlığı: Kalın
  • Başlık Metin Rengi: #e9c46a
  • Başlık Metin Boyutu: 24px (masaüstü), 22px (tablet), 18px (telefon)
  • Başlık Satırı Yüksekliği: 1.4em

Woo Checkout Ayrıntıları Sütun Etiketi

Sütun etiketlerine stil verelim:

  • Sütun Etiket Yazı Tipi: Roboto
  • Sütun Etiketi Yazı Tipi Ağırlığı: Kalın
  • Sütun Etiketi Metin Rengi: #ddb17c

Woo Checkout Ayrıntıları Gövde Metni

Listedeki her sütunun altındaki öğeleri hedefleyen gövde metnine stil vermek için aşağıdakileri güncelleyin:

  • Gövde Yazı Tipi: Roboto
  • Gövde Metni Rengi: #fff

Bağlantı sekmesi altında bağlantı metni rengini güncelleyin:

  • Bağlantı Metni Rengi: #e0816b

Woo Ödeme Ayrıntıları Tablo Kenarlığı

Bu tasarım için masa kenarlığını tamamen çıkaracağız. Bunu yapmak için aşağıdakileri güncelleyin:

  • Tablo Kenar Genişliği: 0px

Woo Ödeme Ayrıntıları Tablo Hücresi

Tablo içindeki tablo hücrelerine stil vermek için aşağıdakileri güncelleyin:

  • Tablo Hücre Dolgusu: 0 piksel kaldı
  • Tablo Hücre Kenarlığı Stili: yok

Woo Checkout Ayrıntıları Dolgu ve Kenarlık

Modülün tasarımını diğer modüllerle tutarlı tutmak için dolguyu ve kenarlığı aşağıdaki gibi güncelleyin:

  • Dolgu: 16 piksel üst, 16 piksel alt, 16 piksel sol, 16 piksel sağ
  • Kenar Genişliği: 1px
  • Kenar Rengi: rgba(255,255,255,0.1)

Woo Ödeme Ödeme Modülü

Gönderim ve ekstra bilgi içeriğimizi oluşturduğumuza göre, Woo Checkout Ayrıntıları içeriğini eklemeye hazırız. Bu, satın alma siparişi ayrıntılarını görüntüleyen ödeme sayfasının bir diğer önemli parçasıdır. Bir ürün listesi, ara toplamlar ve nihai satın alma fiyatını içerir. Ayrıca, uygulanmış olan ve bir bağlantıya tıklayarak çekilebilen kupon tasarruflarını da görüntüler.

Aynı satırın 2. sütunundaki ödeme ayrıntılarına yeni bir Woo Checkout Ayrıntıları modülü ekleyin.

Aşağıdaki ayarlamaları yapın.

  • Form bildirimi arka plan rengi: #E58991
  • Form bildirim yazı tipi: Roboto
  • Form bildirimi yazı tipi ağırlığı: Kalın
  • Form bildirimi yazı tipi boyutu: 16px
  • Düğme Ayarı: Önceki gibi
  • Aralık: 0px (Üst, Alt, Sol, Sağ)

Son sonuç

İşte son ödeme sayfamız nasıl görünüyor.

Toplama

İle Divi 'ın sağlam sayfa oluşturucu ve sezgisel Woo Modülleri, WooCommerce Ödeme Sayfası şablonu büyük ölçüde basitleştirilmiş ve güçlenen bir özel özellikler oluşturmak. Bu eğitim, bir ödeme sayfasını oluşturan temel parçaları birleştirmeye odaklandı. Ancak, ödeme sayfalarınızı bir sonraki seviyeye taşımak için diğer tüm benzersiz Divi modüllerinin ve özelliklerinin mevcut olduğunu unutmayın. Bu, Divi tasarım becerilerinizi geliştirmenize yardımcı olmalı ve daha da önemlisi, daha fazla dönüşüme yol açmalıdır.

Divi WordPress Theme