Divi ile Wooocommerce sayfa şablonu nasıl ödeme yapılır
WooCommerce Checkout sayfasının tasarlanması genellikle PHP şablon dosyasında arka uçta ve biraz özel CSS’de daha fazla ayarlama içerir. Ancak Woo Divi modülü ile bu işlem kolay ve eğlenceli! Divi kullanarak tuvalet ödeme sayfasını düzenlediğinizde, WC kısa kodu, güçlü bir varsayılan tasarım seçeneği kullanılarak görsel olarak tasarlanmaya hazır olan dinamik Woo ödeme modüllerinin yapılandırılmış bir düzenine dönüşecektir. Bu, ödeme sayfası tasarımının tam kontrolünü sağlar. Bu öğreticide, Divi ile sıfırdan eksiksiz bir özel WooCommerce Checkut sayfasının nasıl oluşturulacağını göstereceğiz. İlk olarak, ödeme sayfası için mevcut Dinamik Woo modülünü kullanarak WooCommerce Checkut sayfasını tasarlayacağız. Bittiğinde, tema üreticisindeki ödeme sayfası şablonuna nasıl bir ödeme sayfası tasarımı ekleyeceğinizi göstereceğiz. Yani, gerçek ödeme sayfasını ayarlamak mı yoksa bir ödeme sayfası şablonu oluşturmak mı istiyorsunuz, Divi size yardımcı oldu. Hemen inanılmaz bir ödeme sayfası tasarlayacaksınız.
Başlayalım! Aşağıdakilerden önce ve sonra gizlice göz atın, bu öğreticide tasarlayacağımız yeni ödeme sayfasına kıyasla varsayılan Divi ödeme sayfasının kısa bir görünümü bulunur.
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Birlikte takip edin ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Parçanın düzenini Divi kütüphanenize aktarmak için Divi kütüphanesine gidin.
İçe Aktar düğmesini tıklayın. Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin. Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Divi için Divi Tasarım Öncesi için Ödeme Sayfaları ve Ödeme Sayfaları Koleksiyonu İndirin DIVI için Ücretsiz Sepet ve Kontrol Sayfalarımızın bir parçası olarak indirilebilir. Doğrudan öğreticiye mi gidiyorsunuz? WooCommerce Ödeme Sayfaları ve Ödeme Bölümü Hakkında WooCommerce Divi sitenize her yüklediğinizde, WooCommerce (WC) mağaza sayfaları, sepet sayfaları, ödeme sayfaları ve hesap sayfaları dahil olmak üzere ana WC sayfalarını üretecektir. Sayfa içeriği, WordPress arka uç bloğu düzenleyicisinde kısa kodların kullanılması yoluyla dağıtıldı. Bu ödeme sayfasında Divi Builder’ı etkinleştirirseniz, Woocommerce ödeme sayfası içeriğinin her öğesi, bir divi woo modülü olarak yayınlanacak. Sayfayı düzenleyin. Divi Divi’de bir ödeme sayfası tasarlamak için woo modülü, sayfa şablonuna dinamik içerik eklemenin anahtarı olan çeşitli modüllerle birlikte gelir. Bazıları ödeme sayfası için özel bir Woo modülü içerir. Bir sayfa veya ödeme şablonları oluşturmanın anahtarı olan modül şunları içerir: Başlık gönderme – Bu, bir ödeme sayfası şablonu oluştururken dinamik ödeme sayfası başlığını görüntüler. WOO Noto – Bu modül çeşitli sayfa türlerine (sepet sayfaları, ürün sayfaları, ödeme sayfaları) ayarlanabilir. Bu, kullanıcılara gerektiğinde dinamik olarak önemli bildirim gösterecektir.
Woo Checkout Faturalandırması – Bu modül, kasalar sırasında kullanılan faturalandırma ayrıntılı formunu görüntüler.
Woo Checkout gönderim – Bu modül, kasalar sırasında kullanılan gönderim detay formunu görüntüler.
Woo Checkout Bilgileri – Bu modül, ödeme sırasında kullanılan ek bilgi formlarını görüntüler. Ayrıntılı Woo Checkout – Bu modül, satın alınan ürün ve fiyat da dahil olmak üzere siparişin ayrıntılarını görüntüler.
Woo Checkout Ödemesi – Bu modül, ödeme sırasında ödeme türlerinin ve ayrıntılı ödeme formlarının seçimini görüntüler.
Diğer isteğe bağlı Woo modülleri:
Woo Breadcrumbs – Bu, WooCommerce Breadbrumb navigasyon bıçaklarını gösterecektir.
Sayfa Tasarımı veya Ödeme Şablonu Belirtildiği gibi, özel bir WooCommerce Checkut sayfası tasarlamak için Divi Woo modülünü kolayca kullanabiliriz. Ancak, aynı tasarım işlemini kullanarak özel bir ödeme şablonu da oluşturmayı da seçebilirsiniz. Bu öğretici için ödeme sayfası için özel bir ödeme sayfası düzeni oluşturacağız. Ardından, Divi Tema Oluşturucunu kullanarak bir ödeme sayfası şablonu oluşturmak için nasıl özel bir ödeme sayfası düzenini kullanacağınızı göstereceğiz.
Bu WooCommerce Checkout öğreticisi için Divi ile WooOcommerce Checkout Düzenini tasarlayan amaç, Woocommerce Checkut sayfası için WooCommerce Checkut sayfası için özel bir sayfa düzeni oluşturmaktır. Öğreticinin sonunda, tema üreticisini kullanarak yeni bir ödeme sayfası şablonu oluşturmak için bu ödeme sayfasının düzenini kaydetmek ve içe aktarmak için kolay bir yol göstereceğiz. Başlangıç: WOOCOMMERCE CHARKOUT sayfasını WordPress Gösterge Tablosundan Düzenleme Woocommerce Checkut sayfasını düzenlemek için tıklayın. Varsayılan olarak, sayfada yalnızca ödeme sayfası içeriği üretmek için kullanılan kısa kodlar bulunur.
Sayfa düzenleyicisinin üst kısmındaki Divi Builder düğmesini kullanın.
Ardından, Divi Builder’ı başlatmak için Divi Builder düğmesine sahip düzenlemeyi tıklayın. Daha önce belirtildiği gibi başlamak için düzeni silin, sayfa, ödeme sayfası içeriğini oluşturan tüm ayarlanabilir divi modülleriyle (anahtar Woo modülü dahil) yüklenecektir. . Mevcut düzeni kullanabilir ve isterseniz mevcut modülleri ayarlamaya başlayabilirsiniz. Ancak bu öğretici için baştan başlayacağız. Düzeni silmek için, sayfanın altındaki Ayarlar menüsünü açın ve Düzeni Sil (Çöp simgesi) düğmesini tıklayın ve seçin.
Parçalar, satırlar ve arka plan sütunları başlatmak için arka plan rengini yeni normal bölüme aşağıdaki gibi ekleyin:
Arka plan rengi: #f7f3f0 Bir sonraki satır ve sütun, bölüme bir satır bir sütun ekleyin Ödeme sayfası için gerekli dinamik bir sayfa başlığı oluşturmak için dinamik bir ödeme sayfası başlığı oluşturun, başlık modülünü sütuna ekleyin. İçerik Gönderisi Başlık Gönderi başlığını ayarlarken, öğeleri yalnızca başlığı aşağıdaki gibi görüntüleyecek şekilde güncelleyin:
Etkinlik Başlığı: Evet Göster Meta: Hayır Üstün Görüntüler Göster: Hayır Metin Başlığı Gönderimi Metin Stili Metin Başlığı Gönderisini Ayarlamak için, Tasarım sekmesi altında aşağıdakileri güncelleyin:
Yazı tipi başlığı: Serif DM ekranı
Başlık metin rengi: #fff
Boyut Metin Başlığı: 80px (masaüstü), 60px (tablet), 42px (cep telefonu) Hat yüksekliği başlığı: 1.2em
Ödeme sayfası için dinamik bir WOO bildirim modülü tasarlamak, sayfanın üstüne WOO Bildirim modülünü eklemek için her zaman iyi bir fikirdir, böylece bildirimin ödeme sayfasıyla etkileşime girerken kullanıcı tarafından en görünür olması gerekir. Sadece gerektiğinde görüntülenecek bildirimi tasarladığımızı unutmayın. Bir WOO Bildirim Modülü eklemek için, Post başlık modülünün altına yeni bir WOO bildirim modülü eklemek için tıklayın. Bir sonraki WOO bildirim sayfasının türleri ve arka planları, sayfa türünü ve woo bildiriminin arka plan rengini şu şekilde güncelleyin:
Sayfa Türü: Ödeme sayfası
Arka plan rengi: RGBA (153,158,117,0.1)
Önemli: Woo’nun bildiriminin düzgün çalışması için ödeme sayfasını sayfa türü olarak seçtiğinizden emin olun. Başlık Metni Woo Bildirimi Tasarım sekmesi altında, başlık metin stilini aşağıdaki gibi güncelleyin: Yazı tipi başlığı: Roboto
Ağır yazı tipi başlığı: orta
Başlık metin rengi: #fff
Başlık Metin Boyutu: 14px Yüksek çizgi başlığı: 1.8em
Ardından bağlantı sekmesini seçin ve metin başlığının metin rengini güncelleyin:
Bağlantı metninin rengi: #999e75
Gövde metni Woo Bildirimi Başlık metninden sonra, içerik metnini aşağıdaki gibi güncelleyin:
Gövde yazı tipi: Roboto
Vücut metni rengi: #fff
Vücut Hattı Yüksekliği: 1.8EM
Ardından bağlantı sekmesini seçin ve bağlantı metnini güncelleyin: Bağlantıların yazı tipi ağırlığı: kalın
Bağlantı metninin rengi: #999e75
Woo Note Etiketi WOO Önsöz sayfasının bildirimi, gelen formlar ve kupon kodları gibi konular için alanlar ve alan etiketleri içerir. Bu alan için alan etiket stilini düzenlemek için aşağıdakileri güncelleyin:
Renk Alanı Göstergesi Gerekli: #fff
Yazı tipi etiketi yazı tipi: Roboto
Yazı tipi Yazı Tipi Etiket Alanı: Kalınlık
Ayrıca, Woo Note Alanı, Alan Stili seçeneğini şu şekilde güncelleyin: Yer tutucu rengi: #fff Alan arka plan rengi: şeffaf
Alan metni rengi: #fff
Odak odak metni rengi: #fff
Dolgu Alanı: 12 piksel üst, 12 piksel aşağıda Alan Sınır Genişliği: 1 piksel
Renk alanı sınırları: RGBA (255.255.255.0.32)
Woo Bildirim Düğmesi
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 14px
Metin Renk Düğmesi: #fff
Arka Plan Renk Düğmesi: #999E75
Sınır sınır genişliği: 1px Düğme rengi: #999E75
Sınır sınır yarıçapı: 0px
Mektup Mesafe Düğmesi: 1 piksel
Yazı tipi düğmesi: Roboto
Mektup Ağırlığı Düğmesi: Kalın
Yazı tipi stili düğmesi: TT
Dolgu düğmesi: 12 piksel üst, 12 piksel alt, 24 piksel sol, 24px sağ
WOO Bildirim Formu Her bildirim formu form seçeneği grubu altında düzenlenebilir. Form için bir ışık sınırı vermek için aşağıdakileri güncelleyin:
Yuvarlak açı şekli: 0px
Form Sınırı Genişliği: 1 piksel
Renk Sınır şekli: RGBA (255,255,255.0.32)
WOO Tasarım Bildirim Çubuğunu Üst Limit gibi vermek için Woo Bildirim Kutusunun Gölgesi, Kutu Gölgesi seçeneğini aşağıdaki gibi güncelleyin:
Gölge Kutusu: Ekran yakalamaya bakın Yatay konum gölge kutusu: 0px
Dikey Konum Gölge Kutusu: 3px
Gölge Renk: #999E75
Woo Checkout Faturalandırma Modülünü şimdi sayfa başlığı ve bildirimimizden sonra tasarladıktan sonra, ödeme faturalandırma içeriği, ödeme sayfasına diğer önemli öğeler eklemeye hazırız. Faturalandırma içeriği eklemeden önce, beşte beş iki sütun yapısı ile yeni bir satır oluşturun. Sütun 1’e Woo Checkout faturalandırma modülünü ekleyin.
Woo Kontrol Faturalandırma Başlık Metni Başlık metni seçeneğini ayarlayarak başlık metnini hedefleyebiliriz. Woo Checkout faturalandırmasını ayarlamak için sermayeyi açın ve tasarım sekmesi altında aşağıdakileri güncelleyin: Yazı tipi başlık: Serif DM ekran
Başlık metin rengi: #fff
Başlık Metin Boyutu: 30px (masaüstü), 24px (tablet), 18px (cep telefonu)
Çizgi Yüksekliği Başlığı: 1.4EM Woo ödeme faturalandırma alanı ve alan etiketleri bildirim modülü ile aynıdır, bu modül ayrıca alan ve alan etiketine bir stil verme seçeneği vardır. Tüm alanlarımızın ve alanlarımızın sayfalar boyunca uygun olmasını istediğimiz için, yapılan bildirim modülünün alan etiketini ve alanlarını kopyalayabilir ve stili woo checkut faturalandırma modülüne koyabiliriz. İşte bunu nasıl yapacağınız: Sayfanın üst kısmındaki bildirim modülü ayarlarını açın. Tasarım sekmesinin altındaki Alan Etiketi seçenek grubunu sağlayın.
Sağ tıklama menüsünden “Alan Etiketi Stilini Kopyala” ı seçin.
Şimdi kopyalanan stil ile, WOOUNUNU FADDERING modülüne kadar menü menüsündeki diğer Ayarlar menüsünü açın. Ardından menüden “Alan Etiketi Stilini Yapıştır” ı seçin.
Saha stilini kopyalamak için aynı işlemi de tekrarlayabiliriz. İşte bunu nasıl yapacağınız:
Sayfanın üst kısmındaki bildirim modülü ayarlarını açın. Tasarım sekmesinin altındaki saha seçeneği grubunu sağlayın.
Sağ tıklama menüsünden “Alan Stilini Kopyala” ı seçin.
Şimdi kopyalanan stil ile, WOOUNUNU FADDERING modülüne kadar menü menüsündeki diğer Ayarlar menüsünü açın. Ardından menüden “Alan Stilini Yapıştır” ı seçin.
Woo Checkout Fatura Formu Bildirimi Form Bildirimi, formu doldururken görünebilecek bildirimleri veya hataları dinamik görüntüleme. Form bildiriminin biçimini ayarlamak için, aşağıdaki woo ödeme faturalandırma ayarlarını açın ve aşağıdakileri güncelleyin: Renk Bildirimi Formu: #E0816B Dolgu Bildirim Formu: Yukarıda 8 piksel, 8px aşağıda
Nakliye Tasarlama Woo Checkouts ve Woo Checkout Bilgileri Bir ödeme sayfası şablonu oluşturmak için gereken bir sonraki anahtar öğesi Woo Checkout gönderim modülü ve woo checkut bilgi modülüdür. Woo Checkout gönderim modülü, ödemeyi tamamlamadan önce gönderim bilgilerini girmek için gereken formu görüntüler. Woo Checkout Bilgileri modülü, kullanıcıların kasadan önce ek bilgileri girmesini sağlayan bir giriş formu görüntüler. Bu düzen için Woo Checkout Teslimat Modülünü ekleyin, devam edin ve yeni Woo Checkout dağıtım modülünü doğrudan Woo Checkout faturalandırma modülünün altına ekleyin.
Woo Checkut Teslimat Modülünü Woo Checkout Teslimat Modülünün altına ekleyin, devam edin ve Woo Checkout Bilgi Modülünü ekleyin.
Woo Checkout ve Woo Checkout Teslimat Bilgileri Modülleri Düzenleme Bu iki WOO modülü (ödeme teslimi ve ödeme bilgileri) Woo Checkout faturalandırma modülünün tasarımına uygun olması gerektiğinden, ihtiyacımız olan stili her modüle kopyalayabiliriz. Başlığın metin stiline kopyalama ve sadık kalma, başlığın metin stiliyle başlayalım. Woo Checkout faturalandırma modülü için ayarları açın ve sağ tıklama menüsünü kullanarak başlık metin stilini kopyalayın. Ardından, WOO Checkout ve Woo Checkut Teslimat Bilgileri Modülünü seçmek için çoklu seçilen özelliği kullanın. Ardından, başlık başlığının başlığını seçilen modüllerden birine yapıştırın.
Alanın etiket stiline kopyalama ve yapışması, alan etiket kuvvetini kopyalamak ve eklemek için aynı işlemi tekrarlayın. Woo Checkout faturalandırma modülü için ayarları açın ve sağ tıklama menüsünü kullanarak alan etiket stilini kopyalayın. Ardından, WOO kontrolü ve Woo Checkut Teslimat Bilgileri modülünü seçmek için çok seçilmiş özelliği kullanın. Ardından, alan etiket kuvvetini seçilen modüllerden birine yapıştırın.
Saha kuvvetini de kopyalamak ve eklemek için aynı işlemi yeniden işlemek ve alanın stiline bağlı kalmak. Woo Checkout faturalandırma modülü için ayarları açın ve sağ tıklama menüsünü kullanarak alan stilini kopyalayın.
Ardından, WOO kontrolü ve Woo Checkut Teslimat Bilgileri modülünü seçmek için çok seçilmiş özelliği kullanın. Ardından saha stilini seçilen modüllerden birine yapıştırın.
Dolguları kopyalamak ve eklemek için aynı işlemi tekrarlayın ve takın. Woo Checkout faturalandırma modülü için ayarları açın ve sağ tıklama menüsünü kullanarak dolgu kopyalayın. Ardından, dağıtım bilgileri modülünü seçmek için çok seçilen özelliği kullanın WOO kontrolü ve woo kontrolü ve seçilen modüllerden birine dolgu yapıştırın. Sınırı kopyalamak ve takmak için aynı işlemi tekrar kopyalayın ve takın. Woo Checkout faturalandırma modülü için ayarları açın ve sağ -tıklama menüsünü kullanarak sınırı kopyalayın. Ardından, Dağıtım Bilgileri Modülü Woo Checkout ve Woo Checkout’u seçmek için çok seçilen özelliği kullanın ve sınır stilini seçilen modüllerden birine yapıştırın. Woo Checkout Detay Modülünü Tasarlama Teslimatımız ve ek bilgi içeriğimiz tasarlandıktan sonra Woo Checkout ayrıntılı içerik eklemeye hazırız. Bu, satın alma siparişinin ayrıntılarını görüntüleyen ödeme sayfasının bir başka anahtar öğesidir. Bu, ürünlerin bir listesi, alt kaslı ve toplam alımlar içerir. Ayrıca bağlantılarla silinebilecek kupon indirimleri de görüntüler. Ödeme ayrıntıları için, yeni Woo Checkout modülünü aynı satırda sütun 2’ye ekleyin. WOO Cepheut Detay Başlık Metni Sermaye Ayrıntısı Ayarları Woo Checkout, Tasarım sekmesini açın ve başlık metnini aşağıdaki gibi güncelleyin: Yazı tipi başlığı: Serif DM ekranı Ağır yazı tipi başlığı: kalın Başlık metin rengi: #fff Boyut metin başlığı: 24px (masaüstü), 22px (tablet), 18px (cep telefonu) Çizgi Yüksekliği Başlığı: 1.4EM Woo Constout Detay sütun etiketi Sütun etiketine bir stil vermek için aşağıdakileri güncelleyin: Sütun yazı tipi etiketi: Roboto Sütun Etiket Ağırlığı: Kalınlık Renk Metni Renk Sütunu: RGBA (255.255.255.0.32) Woo Checkut Detay İçerik Metni İçindekiler Metin Stilini Düzenlemek İçin Listedeki her sütunun altındaki öğeleri hedefleyen aşağıdakileri güncelleyin:
Gövde yazı tipi: Roboto
Vücut metni rengi: #fff
Bağlantı sekmesinin altında, bağlantının metninin rengini güncelleyin: bağlantının metninin rengi: #e0816b
WOO TAVSİYE TABLO SINIRLARI Bu tasarım için tablo sınırını hiç ortadan kaldıracağız. Bunu yapmak için aşağıdakileri güncelleyin:
Tablo Sınırı Genişliği: 0px WOO Kontrol Detayları Tablo hücresi Tablo hücre stilini düzenlemek için tabloda aşağıdakileri güncelleyin:
Dolgu Hücre Tablosu: 0px Sol
Hücre Sınır Stili Tablosu: Yok
Bu, tablo hücresindeki içeriği sola hizalar ve tablo hücresi sınırını tamamen siler. Modül tasarımının diğer modüllerle tutarlı kalması, dolgu ve sınırın şu şekilde güncellenmesi için woo ödeme dolgusu ve sınırının ayrıntıları:
Dolgu: 16px üst, 16px alt, 16px sol, 16px sağ
Sınır Genişliği: 1 piksel
Sınır rengi: RGBA (255,255,255.0.1)
Woo Checkout Ödeme Modülünü Tasarlama Şimdi ödeme ayrıntılı içeriğimiz tamamlandıktan sonra Woo Checkut ödeme içeriği eklemeye hazırız. Bu, ödeme sayfasının son anahtar öğesidir. Bu, farklı ödeme seçenekleri ve ana ödeme düğmesi için tıklanabilen radyo düğmesini içerir. Bu aynı zamanda varsayılan form bildirimini de içerir. Ödeme ödeme içeriği eklemek için, 2 sütundaki ödeme ayrıntıları altına yeni bir WOO ödeme ödeme modülü ekleyin. Woo checkut ödeme arka plan açık woo check bout ödeme ayarları ve şeffaf arka plan modülü verin:
Arka plan rengi: şeffaf Woo Checkut Payt Metin Sonraki, İçindekiler metin stilini aşağıdaki gibi güncelleyin:
Gövde yazı tipi: Roboto
Sekme Bağlantısı altında Renk Bağlantısı Metni Güncelleme:
Bağlantı metninin rengi: #999e75 Woo Check Payout Radyo düğmesi Sonraki, radyo düğmesi stilini aşağıdaki gibi güncelleyin:
Radyo düğmesi metin rengi: #fff
Radyo Düğmesi Yazı Tipleri: Robot -oktober Radyo Düğmesi: Kalınlık
Woo Checkut Araç İpucu Ödeme Aracı İpuçları, radyo düğmesi anahtarı açık olduğunda görüntülenen bir metin kutusudur. Araç ipucu stilini aşağıdaki gibi güncelleyelim: Arka Plan Rengi Araç İpucu: Şeffaf Araç İpucu Marjı: -10px üst, 17 piksel kaldı
Yazı Tipi Açıklama Araçları: Roboto Woo Checkout Form Bildirimi Woo Checkout ödeme modülü aynı form bildirim seçeneğine sahip olduğundan, mevcut form bildirim stilini Woo Checkout faturalandırma modülünden kopyalayabilir ve WOO ödeme ödeme modülüne koyabiliriz.
WOO PRACKOUT ÖDEME DÜĞMESİ Woo Checkout ödeme modülü için ödeme düğmesi stilini ayarlamak için WOO Bildirim Modülünden düğme stilini kopyalayın.
Ardından düğme stilini Woo Checkut ödeme modülüne yapıştırın.
Tasarımı tamamlamak, dolgu eklemek ve sınır eklemek için WOO kasası dolgu ve ödeme sınırları aşağıdaki gibi: Dolgu: 16px üst, 16px alt, 16px sol, 16px sağ
Yuvarlak açı: 0px
Sınır Genişliği: 1 piksel
Sınır rengi: RGBA (255,255,255.0.1) Bu, şimdi ödeme sayfamızın görüntülenmesinin sonucudur!
Bu noktada gerektiğinde daha fazla içerik ekleyin, ödeme sayfası şablonumuz için tüm önemli öğelere sahibiz. Ama burada durmak zorunda değilsin. Sayfaya istediğiniz içeriği gerektiği gibi ekleyebilirsiniz. Bu ödeme sayfası şablonundan (buradan indirilebilir) üstün demo için, birkaç özel navigasyon bağlantısına sahip sabit bir taraf ekliyoruz.
Ödeme sayfası için özel bir şablon oluşturma Bir ödeme sayfası şablonu oluşturmak istiyorsanız, ödeme sayfası şablonunda olduğu gibi bir ödeme sayfası şablonu oluşturmak için tema yapıcısını kullanabilirsiniz. Ancak, zaten bu öğreticiden tasarlanmış bir sayfa düzenimiz olduğundan, bu düzeni ödeme sayfası şablonuna ekliyoruz. WooCommerce sayfa düzenini Divi Kütüphanesine kaydedin, ödeme sayfasının düzenini ödeme sayfası şablonuna eklemeden önce, önce sayfanın düzenini Divi kütüphanesine kaydetmeliyiz. Bunu yapmak için ödeme sayfasının altındaki Divi Builder Ayarları menüsünü açın. Kütüphaneye Ekle, Düzeni adlandırın, ardından Kütüphaneye Kaydet’i tıklayın. Kasaya yeni bir ödeme sayfası şablonu yapın. İşte bunu nasıl yapacağınız:
WordPress kontrol panelinizi açın ve Divi> Tema Oluşturucusuna gidin. Ardından, yeni bir şablon eklemek için boş gri kutu alanına yeni şablon ekleme artı simgesini tıklayın. Şablon ayar sermayesinde, “Etkin Kullanım” sekmesi altında WooCommerce sayfa listesinin altındaki kontrolü seçin. Son olarak, bir şablon oluştur’u tıklayın. Ödeme Sayfası Düzenini Ekle Ödeme Şablonuna Yeni Bir Ödeme Şablonu oluşturulduktan sonra, şablona “Özel Gövde Ekle” yi tıklayın. Sembulan listesinde kütüphaneden ekle’yi seçin.
Kütüphaneden açılır yükten, kaydedilen düzenler sekmesinin altında, kütüphaneye kaydettiğiniz ödeme sayfası düzenini seçin.
Bittiğinde, ödeme şablonu tema yapıcısında bulunacaktır. Şablonu düzenlemek için şablon gövdesi alanındaki düzenleme simgesini tıklayın.
Ve bu tablet ve mobil cihazlarda görünüm.
Sert bir WooCommerce özel ödeme sayfasının şablonunu tasarlama sürecinin son zihni, Divi’nin güçlü bir görsel sayfa üreticisi ve sezgisel bir Woo modülü ile basitleştirilir ve güçlendirilir. Bu öğreticide, bir ödeme sayfası oluşturan temel öğeleri birleştirmeye odaklanıyoruz. Bununla birlikte, diğer tüm güçlü divi modülleri ve özellikleri, ödeme sayfanızı tamamen yeni bir seviyeye getirmenize yardımcı olmaya hazırdır. Umarım bu, Divi tasarım becerilerinizi geliştirmeye ve daha da önemlisi daha fazla dönüşüm üretmeye yardımcı olacaktır. Daha fazla bilgi için, divi’de bir wooocommerce sepet sayfası şablonunun nasıl tasarlanacağına veya divi için ücretsiz sepet sayfaları şablonumuzu ve ücretsiz ödeme sayfamızı nasıl indireceğinize bakın. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
Parçanın düzenini Divi kütüphanenize aktarmak için Divi kütüphanesine gidin.
İçe Aktar düğmesini tıklayın. Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin. Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Divi için Divi Tasarım Öncesi için Ödeme Sayfaları ve Ödeme Sayfaları Koleksiyonu İndirin DIVI için Ücretsiz Sepet ve Kontrol Sayfalarımızın bir parçası olarak indirilebilir. Doğrudan öğreticiye mi gidiyorsunuz? WooCommerce Ödeme Sayfaları ve Ödeme Bölümü Hakkında WooCommerce Divi sitenize her yüklediğinizde, WooCommerce (WC) mağaza sayfaları, sepet sayfaları, ödeme sayfaları ve hesap sayfaları dahil olmak üzere ana WC sayfalarını üretecektir. Sayfa içeriği, WordPress arka uç bloğu düzenleyicisinde kısa kodların kullanılması yoluyla dağıtıldı. Bu ödeme sayfasında Divi Builder’ı etkinleştirirseniz, Woocommerce ödeme sayfası içeriğinin her öğesi, bir divi woo modülü olarak yayınlanacak. Sayfayı düzenleyin. Divi Divi’de bir ödeme sayfası tasarlamak için woo modülü, sayfa şablonuna dinamik içerik eklemenin anahtarı olan çeşitli modüllerle birlikte gelir. Bazıları ödeme sayfası için özel bir Woo modülü içerir. Bir sayfa veya ödeme şablonları oluşturmanın anahtarı olan modül şunları içerir: Başlık gönderme – Bu, bir ödeme sayfası şablonu oluştururken dinamik ödeme sayfası başlığını görüntüler. WOO Noto – Bu modül çeşitli sayfa türlerine (sepet sayfaları, ürün sayfaları, ödeme sayfaları) ayarlanabilir. Bu, kullanıcılara gerektiğinde dinamik olarak önemli bildirim gösterecektir.
Woo Checkout Faturalandırması – Bu modül, kasalar sırasında kullanılan faturalandırma ayrıntılı formunu görüntüler.
Woo Checkout gönderim – Bu modül, kasalar sırasında kullanılan gönderim detay formunu görüntüler.
Woo Checkout Bilgileri – Bu modül, ödeme sırasında kullanılan ek bilgi formlarını görüntüler. Ayrıntılı Woo Checkout – Bu modül, satın alınan ürün ve fiyat da dahil olmak üzere siparişin ayrıntılarını görüntüler.
Woo Checkout Ödemesi – Bu modül, ödeme sırasında ödeme türlerinin ve ayrıntılı ödeme formlarının seçimini görüntüler.
Diğer isteğe bağlı Woo modülleri:
Woo Breadcrumbs – Bu, WooCommerce Breadbrumb navigasyon bıçaklarını gösterecektir.
Sayfa Tasarımı veya Ödeme Şablonu Belirtildiği gibi, özel bir WooCommerce Checkut sayfası tasarlamak için Divi Woo modülünü kolayca kullanabiliriz. Ancak, aynı tasarım işlemini kullanarak özel bir ödeme şablonu da oluşturmayı da seçebilirsiniz. Bu öğretici için ödeme sayfası için özel bir ödeme sayfası düzeni oluşturacağız. Ardından, Divi Tema Oluşturucunu kullanarak bir ödeme sayfası şablonu oluşturmak için nasıl özel bir ödeme sayfası düzenini kullanacağınızı göstereceğiz.
Bu WooCommerce Checkout öğreticisi için Divi ile WooOcommerce Checkout Düzenini tasarlayan amaç, Woocommerce Checkut sayfası için WooCommerce Checkut sayfası için özel bir sayfa düzeni oluşturmaktır. Öğreticinin sonunda, tema üreticisini kullanarak yeni bir ödeme sayfası şablonu oluşturmak için bu ödeme sayfasının düzenini kaydetmek ve içe aktarmak için kolay bir yol göstereceğiz. Başlangıç: WOOCOMMERCE CHARKOUT sayfasını WordPress Gösterge Tablosundan Düzenleme Woocommerce Checkut sayfasını düzenlemek için tıklayın. Varsayılan olarak, sayfada yalnızca ödeme sayfası içeriği üretmek için kullanılan kısa kodlar bulunur.
Sayfa düzenleyicisinin üst kısmındaki Divi Builder düğmesini kullanın.
Ardından, Divi Builder’ı başlatmak için Divi Builder düğmesine sahip düzenlemeyi tıklayın. Daha önce belirtildiği gibi başlamak için düzeni silin, sayfa, ödeme sayfası içeriğini oluşturan tüm ayarlanabilir divi modülleriyle (anahtar Woo modülü dahil) yüklenecektir. . Mevcut düzeni kullanabilir ve isterseniz mevcut modülleri ayarlamaya başlayabilirsiniz. Ancak bu öğretici için baştan başlayacağız. Düzeni silmek için, sayfanın altındaki Ayarlar menüsünü açın ve Düzeni Sil (Çöp simgesi) düğmesini tıklayın ve seçin.
Parçalar, satırlar ve arka plan sütunları başlatmak için arka plan rengini yeni normal bölüme aşağıdaki gibi ekleyin:
Arka plan rengi: #f7f3f0 Bir sonraki satır ve sütun, bölüme bir satır bir sütun ekleyin Ödeme sayfası için gerekli dinamik bir sayfa başlığı oluşturmak için dinamik bir ödeme sayfası başlığı oluşturun, başlık modülünü sütuna ekleyin. İçerik Gönderisi Başlık Gönderi başlığını ayarlarken, öğeleri yalnızca başlığı aşağıdaki gibi görüntüleyecek şekilde güncelleyin:
Etkinlik Başlığı: Evet Göster Meta: Hayır Üstün Görüntüler Göster: Hayır Metin Başlığı Gönderimi Metin Stili Metin Başlığı Gönderisini Ayarlamak için, Tasarım sekmesi altında aşağıdakileri güncelleyin:
Yazı tipi başlığı: Serif DM ekranı
Başlık metin rengi: #fff
Boyut Metin Başlığı: 80px (masaüstü), 60px (tablet), 42px (cep telefonu) Hat yüksekliği başlığı: 1.2em
Ödeme sayfası için dinamik bir WOO bildirim modülü tasarlamak, sayfanın üstüne WOO Bildirim modülünü eklemek için her zaman iyi bir fikirdir, böylece bildirimin ödeme sayfasıyla etkileşime girerken kullanıcı tarafından en görünür olması gerekir. Sadece gerektiğinde görüntülenecek bildirimi tasarladığımızı unutmayın. Bir WOO Bildirim Modülü eklemek için, Post başlık modülünün altına yeni bir WOO bildirim modülü eklemek için tıklayın. Bir sonraki WOO bildirim sayfasının türleri ve arka planları, sayfa türünü ve woo bildiriminin arka plan rengini şu şekilde güncelleyin:
Sayfa Türü: Ödeme sayfası
Arka plan rengi: RGBA (153,158,117,0.1)
Önemli: Woo’nun bildiriminin düzgün çalışması için ödeme sayfasını sayfa türü olarak seçtiğinizden emin olun. Başlık Metni Woo Bildirimi Tasarım sekmesi altında, başlık metin stilini aşağıdaki gibi güncelleyin: Yazı tipi başlığı: Roboto
Ağır yazı tipi başlığı: orta
Başlık metin rengi: #fff
Başlık Metin Boyutu: 14px Yüksek çizgi başlığı: 1.8em
Ardından bağlantı sekmesini seçin ve metin başlığının metin rengini güncelleyin:
Bağlantı metninin rengi: #999e75
Gövde metni Woo Bildirimi Başlık metninden sonra, içerik metnini aşağıdaki gibi güncelleyin:
Gövde yazı tipi: Roboto
Vücut metni rengi: #fff
Vücut Hattı Yüksekliği: 1.8EM
Ardından bağlantı sekmesini seçin ve bağlantı metnini güncelleyin: Bağlantıların yazı tipi ağırlığı: kalın
Bağlantı metninin rengi: #999e75
Woo Note Etiketi WOO Önsöz sayfasının bildirimi, gelen formlar ve kupon kodları gibi konular için alanlar ve alan etiketleri içerir. Bu alan için alan etiket stilini düzenlemek için aşağıdakileri güncelleyin:
Renk Alanı Göstergesi Gerekli: #fff
Yazı tipi etiketi yazı tipi: Roboto
Yazı tipi Yazı Tipi Etiket Alanı: Kalınlık
Ayrıca, Woo Note Alanı, Alan Stili seçeneğini şu şekilde güncelleyin: Yer tutucu rengi: #fff Alan arka plan rengi: şeffaf
Alan metni rengi: #fff
Odak odak metni rengi: #fff
Dolgu Alanı: 12 piksel üst, 12 piksel aşağıda Alan Sınır Genişliği: 1 piksel
Renk alanı sınırları: RGBA (255.255.255.0.32)
Woo Bildirim Düğmesi
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 14px
Metin Renk Düğmesi: #fff
Arka Plan Renk Düğmesi: #999E75
Sınır sınır genişliği: 1px Düğme rengi: #999E75
Sınır sınır yarıçapı: 0px
Mektup Mesafe Düğmesi: 1 piksel
Yazı tipi düğmesi: Roboto
Mektup Ağırlığı Düğmesi: Kalın
Yazı tipi stili düğmesi: TT
Dolgu düğmesi: 12 piksel üst, 12 piksel alt, 24 piksel sol, 24px sağ
WOO Bildirim Formu Her bildirim formu form seçeneği grubu altında düzenlenebilir. Form için bir ışık sınırı vermek için aşağıdakileri güncelleyin:
Yuvarlak açı şekli: 0px
Form Sınırı Genişliği: 1 piksel
Renk Sınır şekli: RGBA (255,255,255.0.32)
WOO Tasarım Bildirim Çubuğunu Üst Limit gibi vermek için Woo Bildirim Kutusunun Gölgesi, Kutu Gölgesi seçeneğini aşağıdaki gibi güncelleyin:
Gölge Kutusu: Ekran yakalamaya bakın Yatay konum gölge kutusu: 0px
Dikey Konum Gölge Kutusu: 3px
Gölge Renk: #999E75
Woo Checkout Faturalandırma Modülünü şimdi sayfa başlığı ve bildirimimizden sonra tasarladıktan sonra, ödeme faturalandırma içeriği, ödeme sayfasına diğer önemli öğeler eklemeye hazırız. Faturalandırma içeriği eklemeden önce, beşte beş iki sütun yapısı ile yeni bir satır oluşturun. Sütun 1’e Woo Checkout faturalandırma modülünü ekleyin.
Woo Kontrol Faturalandırma Başlık Metni Başlık metni seçeneğini ayarlayarak başlık metnini hedefleyebiliriz. Woo Checkout faturalandırmasını ayarlamak için sermayeyi açın ve tasarım sekmesi altında aşağıdakileri güncelleyin: Yazı tipi başlık: Serif DM ekran
Başlık metin rengi: #fff
Başlık Metin Boyutu: 30px (masaüstü), 24px (tablet), 18px (cep telefonu)
Çizgi Yüksekliği Başlığı: 1.4EM Woo ödeme faturalandırma alanı ve alan etiketleri bildirim modülü ile aynıdır, bu modül ayrıca alan ve alan etiketine bir stil verme seçeneği vardır. Tüm alanlarımızın ve alanlarımızın sayfalar boyunca uygun olmasını istediğimiz için, yapılan bildirim modülünün alan etiketini ve alanlarını kopyalayabilir ve stili woo checkut faturalandırma modülüne koyabiliriz. İşte bunu nasıl yapacağınız: Sayfanın üst kısmındaki bildirim modülü ayarlarını açın. Tasarım sekmesinin altındaki Alan Etiketi seçenek grubunu sağlayın.
Sağ tıklama menüsünden “Alan Etiketi Stilini Kopyala” ı seçin.
Şimdi kopyalanan stil ile, WOOUNUNU FADDERING modülüne kadar menü menüsündeki diğer Ayarlar menüsünü açın. Ardından menüden “Alan Etiketi Stilini Yapıştır” ı seçin.
Saha stilini kopyalamak için aynı işlemi de tekrarlayabiliriz. İşte bunu nasıl yapacağınız:
Sayfanın üst kısmındaki bildirim modülü ayarlarını açın. Tasarım sekmesinin altındaki saha seçeneği grubunu sağlayın.
Sağ tıklama menüsünden “Alan Stilini Kopyala” ı seçin.
Şimdi kopyalanan stil ile, WOOUNUNU FADDERING modülüne kadar menü menüsündeki diğer Ayarlar menüsünü açın. Ardından menüden “Alan Stilini Yapıştır” ı seçin.
Woo Checkout Fatura Formu Bildirimi Form Bildirimi, formu doldururken görünebilecek bildirimleri veya hataları dinamik görüntüleme. Form bildiriminin biçimini ayarlamak için, aşağıdaki woo ödeme faturalandırma ayarlarını açın ve aşağıdakileri güncelleyin: Renk Bildirimi Formu: #E0816B Dolgu Bildirim Formu: Yukarıda 8 piksel, 8px aşağıda
Yazı Tipi Bildirim Formu: Roboto
Metin Boyut Formu Bildirimi: 14px
WOO Tasarımı tamamlamak için faturalandırma mesafesi ve sınır, modülde biraz dolgu ve ışık kenarlığı verelim:
Dolgu: 16px üst, 16px alt, 16px sol, 16px sağ
Nakliye Tasarlama Woo Checkouts ve Woo Checkout Bilgileri Bir ödeme sayfası şablonu oluşturmak için gereken bir sonraki anahtar öğesi Woo Checkout gönderim modülü ve woo checkut bilgi modülüdür. Woo Checkout gönderim modülü, ödemeyi tamamlamadan önce gönderim bilgilerini girmek için gereken formu görüntüler. Woo Checkout Bilgileri modülü, kullanıcıların kasadan önce ek bilgileri girmesini sağlayan bir giriş formu görüntüler. Bu düzen için Woo Checkout Teslimat Modülünü ekleyin, devam edin ve yeni Woo Checkout dağıtım modülünü doğrudan Woo Checkout faturalandırma modülünün altına ekleyin.
Woo Checkut Teslimat Modülünü Woo Checkout Teslimat Modülünün altına ekleyin, devam edin ve Woo Checkout Bilgi Modülünü ekleyin.
Woo Checkout ve Woo Checkout Teslimat Bilgileri Modülleri Düzenleme Bu iki WOO modülü (ödeme teslimi ve ödeme bilgileri) Woo Checkout faturalandırma modülünün tasarımına uygun olması gerektiğinden, ihtiyacımız olan stili her modüle kopyalayabiliriz. Başlığın metin stiline kopyalama ve sadık kalma, başlığın metin stiliyle başlayalım. Woo Checkout faturalandırma modülü için ayarları açın ve sağ tıklama menüsünü kullanarak başlık metin stilini kopyalayın. Ardından, WOO Checkout ve Woo Checkut Teslimat Bilgileri Modülünü seçmek için çoklu seçilen özelliği kullanın. Ardından, başlık başlığının başlığını seçilen modüllerden birine yapıştırın.
Alanın etiket stiline kopyalama ve yapışması, alan etiket kuvvetini kopyalamak ve eklemek için aynı işlemi tekrarlayın. Woo Checkout faturalandırma modülü için ayarları açın ve sağ tıklama menüsünü kullanarak alan etiket stilini kopyalayın. Ardından, WOO kontrolü ve Woo Checkut Teslimat Bilgileri modülünü seçmek için çok seçilmiş özelliği kullanın. Ardından, alan etiket kuvvetini seçilen modüllerden birine yapıştırın.
Saha kuvvetini de kopyalamak ve eklemek için aynı işlemi yeniden işlemek ve alanın stiline bağlı kalmak. Woo Checkout faturalandırma modülü için ayarları açın ve sağ tıklama menüsünü kullanarak alan stilini kopyalayın.
Ardından, WOO kontrolü ve Woo Checkut Teslimat Bilgileri modülünü seçmek için çok seçilmiş özelliği kullanın. Ardından saha stilini seçilen modüllerden birine yapıştırın.
Dolguları kopyalamak ve eklemek için aynı işlemi tekrarlayın ve takın. Woo Checkout faturalandırma modülü için ayarları açın ve sağ tıklama menüsünü kullanarak dolgu kopyalayın. Ardından, dağıtım bilgileri modülünü seçmek için çok seçilen özelliği kullanın WOO kontrolü ve woo kontrolü ve seçilen modüllerden birine dolgu yapıştırın. Sınırı kopyalamak ve takmak için aynı işlemi tekrar kopyalayın ve takın. Woo Checkout faturalandırma modülü için ayarları açın ve sağ -tıklama menüsünü kullanarak sınırı kopyalayın. Ardından, Dağıtım Bilgileri Modülü Woo Checkout ve Woo Checkout’u seçmek için çok seçilen özelliği kullanın ve sınır stilini seçilen modüllerden birine yapıştırın. Woo Checkout Detay Modülünü Tasarlama Teslimatımız ve ek bilgi içeriğimiz tasarlandıktan sonra Woo Checkout ayrıntılı içerik eklemeye hazırız. Bu, satın alma siparişinin ayrıntılarını görüntüleyen ödeme sayfasının bir başka anahtar öğesidir. Bu, ürünlerin bir listesi, alt kaslı ve toplam alımlar içerir. Ayrıca bağlantılarla silinebilecek kupon indirimleri de görüntüler. Ödeme ayrıntıları için, yeni Woo Checkout modülünü aynı satırda sütun 2’ye ekleyin. WOO Cepheut Detay Başlık Metni Sermaye Ayrıntısı Ayarları Woo Checkout, Tasarım sekmesini açın ve başlık metnini aşağıdaki gibi güncelleyin: Yazı tipi başlığı: Serif DM ekranı Ağır yazı tipi başlığı: kalın Başlık metin rengi: #fff Boyut metin başlığı: 24px (masaüstü), 22px (tablet), 18px (cep telefonu) Çizgi Yüksekliği Başlığı: 1.4EM Woo Constout Detay sütun etiketi Sütun etiketine bir stil vermek için aşağıdakileri güncelleyin: Sütun yazı tipi etiketi: Roboto Sütun Etiket Ağırlığı: Kalınlık Renk Metni Renk Sütunu: RGBA (255.255.255.0.32) Woo Checkut Detay İçerik Metni İçindekiler Metin Stilini Düzenlemek İçin Listedeki her sütunun altındaki öğeleri hedefleyen aşağıdakileri güncelleyin:
Gövde yazı tipi: Roboto
Vücut metni rengi: #fff
Bağlantı sekmesinin altında, bağlantının metninin rengini güncelleyin: bağlantının metninin rengi: #e0816b
WOO TAVSİYE TABLO SINIRLARI Bu tasarım için tablo sınırını hiç ortadan kaldıracağız. Bunu yapmak için aşağıdakileri güncelleyin:
Tablo Sınırı Genişliği: 0px WOO Kontrol Detayları Tablo hücresi Tablo hücre stilini düzenlemek için tabloda aşağıdakileri güncelleyin:
Dolgu Hücre Tablosu: 0px Sol
Hücre Sınır Stili Tablosu: Yok
Bu, tablo hücresindeki içeriği sola hizalar ve tablo hücresi sınırını tamamen siler. Modül tasarımının diğer modüllerle tutarlı kalması, dolgu ve sınırın şu şekilde güncellenmesi için woo ödeme dolgusu ve sınırının ayrıntıları:
Dolgu: 16px üst, 16px alt, 16px sol, 16px sağ
Sınır Genişliği: 1 piksel
Sınır rengi: RGBA (255,255,255.0.1)
Woo Checkout Ödeme Modülünü Tasarlama Şimdi ödeme ayrıntılı içeriğimiz tamamlandıktan sonra Woo Checkut ödeme içeriği eklemeye hazırız. Bu, ödeme sayfasının son anahtar öğesidir. Bu, farklı ödeme seçenekleri ve ana ödeme düğmesi için tıklanabilen radyo düğmesini içerir. Bu aynı zamanda varsayılan form bildirimini de içerir. Ödeme ödeme içeriği eklemek için, 2 sütundaki ödeme ayrıntıları altına yeni bir WOO ödeme ödeme modülü ekleyin. Woo checkut ödeme arka plan açık woo check bout ödeme ayarları ve şeffaf arka plan modülü verin:
Arka plan rengi: şeffaf Woo Checkut Payt Metin Sonraki, İçindekiler metin stilini aşağıdaki gibi güncelleyin:
Gövde yazı tipi: Roboto
Sekme Bağlantısı altında Renk Bağlantısı Metni Güncelleme:
Bağlantı metninin rengi: #999e75 Woo Check Payout Radyo düğmesi Sonraki, radyo düğmesi stilini aşağıdaki gibi güncelleyin:
Radyo düğmesi metin rengi: #fff
Radyo Düğmesi Yazı Tipleri: Robot -oktober Radyo Düğmesi: Kalınlık
Woo Checkut Araç İpucu Ödeme Aracı İpuçları, radyo düğmesi anahtarı açık olduğunda görüntülenen bir metin kutusudur. Araç ipucu stilini aşağıdaki gibi güncelleyelim: Arka Plan Rengi Araç İpucu: Şeffaf Araç İpucu Marjı: -10px üst, 17 piksel kaldı
Yazı Tipi Açıklama Araçları: Roboto Woo Checkout Form Bildirimi Woo Checkout ödeme modülü aynı form bildirim seçeneğine sahip olduğundan, mevcut form bildirim stilini Woo Checkout faturalandırma modülünden kopyalayabilir ve WOO ödeme ödeme modülüne koyabiliriz.
WOO PRACKOUT ÖDEME DÜĞMESİ Woo Checkout ödeme modülü için ödeme düğmesi stilini ayarlamak için WOO Bildirim Modülünden düğme stilini kopyalayın.
Ardından düğme stilini Woo Checkut ödeme modülüne yapıştırın.
Tasarımı tamamlamak, dolgu eklemek ve sınır eklemek için WOO kasası dolgu ve ödeme sınırları aşağıdaki gibi: Dolgu: 16px üst, 16px alt, 16px sol, 16px sağ
Yuvarlak açı: 0px
Sınır Genişliği: 1 piksel
Sınır rengi: RGBA (255,255,255.0.1) Bu, şimdi ödeme sayfamızın görüntülenmesinin sonucudur!
Bu noktada gerektiğinde daha fazla içerik ekleyin, ödeme sayfası şablonumuz için tüm önemli öğelere sahibiz. Ama burada durmak zorunda değilsin. Sayfaya istediğiniz içeriği gerektiği gibi ekleyebilirsiniz. Bu ödeme sayfası şablonundan (buradan indirilebilir) üstün demo için, birkaç özel navigasyon bağlantısına sahip sabit bir taraf ekliyoruz.
Ödeme sayfası için özel bir şablon oluşturma Bir ödeme sayfası şablonu oluşturmak istiyorsanız, ödeme sayfası şablonunda olduğu gibi bir ödeme sayfası şablonu oluşturmak için tema yapıcısını kullanabilirsiniz. Ancak, zaten bu öğreticiden tasarlanmış bir sayfa düzenimiz olduğundan, bu düzeni ödeme sayfası şablonuna ekliyoruz. WooCommerce sayfa düzenini Divi Kütüphanesine kaydedin, ödeme sayfasının düzenini ödeme sayfası şablonuna eklemeden önce, önce sayfanın düzenini Divi kütüphanesine kaydetmeliyiz. Bunu yapmak için ödeme sayfasının altındaki Divi Builder Ayarları menüsünü açın. Kütüphaneye Ekle, Düzeni adlandırın, ardından Kütüphaneye Kaydet’i tıklayın. Kasaya yeni bir ödeme sayfası şablonu yapın. İşte bunu nasıl yapacağınız:
WordPress kontrol panelinizi açın ve Divi> Tema Oluşturucusuna gidin. Ardından, yeni bir şablon eklemek için boş gri kutu alanına yeni şablon ekleme artı simgesini tıklayın. Şablon ayar sermayesinde, “Etkin Kullanım” sekmesi altında WooCommerce sayfa listesinin altındaki kontrolü seçin. Son olarak, bir şablon oluştur’u tıklayın. Ödeme Sayfası Düzenini Ekle Ödeme Şablonuna Yeni Bir Ödeme Şablonu oluşturulduktan sonra, şablona “Özel Gövde Ekle” yi tıklayın. Sembulan listesinde kütüphaneden ekle’yi seçin.
Kütüphaneden açılır yükten, kaydedilen düzenler sekmesinin altında, kütüphaneye kaydettiğiniz ödeme sayfası düzenini seçin.
Bittiğinde, ödeme şablonu tema yapıcısında bulunacaktır. Şablonu düzenlemek için şablon gövdesi alanındaki düzenleme simgesini tıklayın.
Ve bu tablet ve mobil cihazlarda görünüm.
Sert bir WooCommerce özel ödeme sayfasının şablonunu tasarlama sürecinin son zihni, Divi’nin güçlü bir görsel sayfa üreticisi ve sezgisel bir Woo modülü ile basitleştirilir ve güçlendirilir. Bu öğreticide, bir ödeme sayfası oluşturan temel öğeleri birleştirmeye odaklanıyoruz. Bununla birlikte, diğer tüm güçlü divi modülleri ve özellikleri, ödeme sayfanızı tamamen yeni bir seviyeye getirmenize yardımcı olmaya hazırdır. Umarım bu, Divi tasarım becerilerinizi geliştirmeye ve daha da önemlisi daha fazla dönüşüm üretmeye yardımcı olacaktır. Daha fazla bilgi için, divi’de bir wooocommerce sepet sayfası şablonunun nasıl tasarlanacağına veya divi için ücretsiz sepet sayfaları şablonumuzu ve ücretsiz ödeme sayfamızı nasıl indireceğinize bakın. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
