Divi ile Wooocommerce Sepet Sayfa Şablonu Nasıl Yapılır
WooCommerce Sepet sayfası, çevrimiçi mağazalar için WooCommerce (WC) kullanan herhangi bir Divi sitesi için çok önemlidir. Ancak genellikle sepet sayfaları tasarım açısından zorluk yaşama eğilimindedir, çünkü sayfanın tasarlanması genellikle sepet sayfaları şablonunu harici olarak ayarlamayı ve daha sonra saf sayfa şablonunu harici CSS ile düzenlemeyi içerir. Ancak yeni Woo Divi modülü ile bu işlem kolay ve eğlenceli! Bu öğreticide, Siteniz için Divi Tema Oluşturucu’yu kullanarak siteniz için nasıl bir WC Sepet Sayfa Şablonu oluşturacağınızı göstereceğiz. Sepet sayfası için yeni bir şablon hazırlamanın ve Divi Builder’da bulunan uygun dinamik Woo modülünü kullanarak bir şablon tasarlamanın hızlı bir yolunu göstereceğiz.
Başlayalım! Aşağıdakilerden önce ve sonra gizlice göz atın, bu öğreticide tasarlayacağımız yeni sepet sayfasına kıyasla Divi’nin varsayılan sayfalarının kısa bir görüntüsü var.
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!
Şablonun düzenini web sitenize aktarmak için, Divi Tema Oluşturucuunu açmanız ve .json dosyasını tema üreticisine aktarmak için taşınabilirlik seçeneğini kullanmanız gerekir.
Bittiğinde, Sepet şablonu tema üreticisinde mevcut olacak. Şablonu düzenlemek için, şablon gövdesi alanındaki düzenleme simgesini tıklayın. Sadece öğreticiye gidin? WooCommerce Divi sitenize her yüklediğinizde WooCommerce Sepet Sayfaları ve Bölümleri Hakkında WooCommerce (WC), mağaza sayfaları, sepet sayfaları, ödeme sayfaları ve hesap sayfaları dahil olmak üzere ana tuvalet sayfalarını üretecektir. Sayfa içeriği, WordPress arka uç blok düzenleyicisinde kısa kodlar kullanılarak dağıtıldı. Bu sepet sayfasındaki Divi Builder’ı etkinleştirirseniz, WooCommerce Sepet sayfa içeriğinin her öğesi, sayfayı düzenlemek için kullanılabilen bir Divi Woo modülü olarak yüklenir. Divi Divi’de bir sepet sayfası tasarlamak için woo modülü, sayfa şablonuna dinamik içerik eklemenin anahtarı olan çeşitli modüllerle birlikte gelir. Bazıları sepet sayfaları için özel bir Woo modülü içerir. Bir araba veya şablon sayfası oluşturmanın anahtarı olan modül şunları içerir:
Gönderi başlığı – Bu, bir tramvay sayfası şablonu oluştururken Troli sayfası başlığını dinamik olarak 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 CART Ürünleri – Bu modül, kullanıcıların şu anda sepetlerinde sahip oldukları ürünlerin bir listesini görüntüler.
WOO CART Toplamları – Bu modül şu anda subtotal, nakliye ve kullanıcı sepetindeki ürünler için toplam fiyatlara sahiptir.
Diğer isteğe bağlı modüller şunları içerir:
Woo Breadcrumbs – Bu, WooCommerce Breadbrumb navigasyon bıçaklarını gösterecektir.
Woo Cross Sars-Bu, sepetteki öğelerle bağlantılı çapraz satan ürünleri dinamik olarak görüntüleyecek. Belirtildiği gibi bir sepet veya şablon tasarlayın, bir WooCommerce özel sepet sayfası tasarlamak için Divi Woo modülünü kolayca kullanabiliriz. Sepet sayfaları için özel şablon yapma ihtiyacı. Bu öğretici için, Divi Tema İnşaatçısı kullanarak bir sepet sayfası şablonu oluşturacağız. Bu Wooocommerce Sepet Sayfa Şablonu için divi ile wooocommerce sepet sayfaları şablonları tasarlayan amaç, Divi’deki WooCommerce Sepet sayfasına ayarlanan şablonlar için özel bir gövde alanı oluşturmaktır. Bu şablon için özel bir başlık veya altbilgi alanı oluşturmayacağız, ancak bu şablonu kendi web sitenizde kendi başlık ve altbilginizle kolayca kullanabilirsiniz.
Sepet sayfasının başlaması için özel bir şablon yapın, aşağıdakileri yapalım:
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.
Sermaye şablonu ayarlarında, “Etkin Kullanım” sekmesi altında, WooCommerce sayfaları listesinin altında bir sepet seçin.
Son olarak, bir şablon oluştur’u tıklayın.
Yeni bir sepet şablonundan sonra, şablona “Özel Gövde Ekle” alanı tıklayın. Popup listesinde özel gövdeyi oluştur seçeneğini seçin.
Şablon düzeni düzenleyicisine bir satır ve sütun yapısı yapın, iki taraflı çeyrek sütun yapısı 0 ile yeni bir özel parça ekleyin.
Ardından, parçanın ortasına bir sütun satırı ekleyin. Arka Plan Bölümü Parçanın ayarlarını açın ve arka plan rengini aşağıdaki gibi ekleyin: Renk Arka Plan: #F7F3F0 Tasarım sekmesinin altındaki boyutu, aşağıdakileri güncelleyin: Talang genişliği: 2 İç Genişlik:% 100
Maksimum iç genişlik: yok Yükseklik min: 100vh
Bir sonraki bölüm alanı, aşağıdaki bölümlere ve sütunlara bazı boşluklar ekler:
Dolgu: 0px üst, 40 piksel sol, 40px sağ
Sütun 1 Dolgu: 90 piksel üst
Sütun 3 Dolgu: 84px Bu düzen için özel bir navigasyon bağlantısı oluşturarak, mağazalar, sepetler ve kontroller oluşturan ana sayfalara bazı özel navigasyon bağlantıları yapacağız. Bu, kullanıcıların satın alma işleminde gezinmesini kolaylaştıracaktır.
Sol sütunda yeni bir açıklama modülü ekleyin. Bu, web sitenizdeki mağaza sayfasına bir bağlantı olarak kullanılacaktır.
Blurb’un sermaye düzenlemesinde, içeriği aşağıdaki gibi güncelleyin:
Başlık: Mağaza İçindekiler: Boş Bırak
Simgeler kullanın: evet Simge: Ekran görüntüsüne bakın
Statik bir bağlantı URL’si eklemek yerine, mağaza sayfasına dinamik bağlantılar ekleyebiliriz. İşte nasıl yapılacağı.
İmleci modül bağlantısı URL giriş kutusuna gidin ve “Dinamik İçeriği Kullan” simgesini tıklayın.
Dağınık, listeden sayfa bağlantısını seçin.
Capital Link Capital’de, aşağı listeden Shop sayfasını seçin. Sonra değişikliği kaydedin.
Tasarım sekmesinin altında, simge stilini aşağıdaki gibi güncelleyin:
Ikon Renk: RGBA (55,61,75.0.3)
Görüntünün/simgenin yerleştirilmesi: sol
Resim genişliği/simgesi: 16px Ardından, başlık metnini güncelleyin:
Yazı tipi başlığı: Roboto
Ağır yazı tipi başlığı: orta
Başlık Metin Rengi: RGBA (55,61,75,0.3) Son dokunuş için, boyutu ve mesafeyi aşağıdaki gibi güncelleyin:
İçerik Genişliği:% 100
Marj: 10 piksel aşağıda
Animasyonlu resim/simge: animasyon olmadan Bu, açıklamanın (veya navigasyon bağlantısının) tablet ve cep telefonu üzerindeki tarayıcının tam genişliğine ulaşmasını ve ekleyeceğimiz bir sonraki açıklama arasında biraz boşluk yapmasını sağlayacaktır.
Sonraki iki bağlantıyı oluşturmak için, toplam üç bağlantı olması için iki kez tasarladığımız mevcut bulanıklık modülünü çoğaltın.
İkinci bağlantı, yaptığımız sayfa olan bir sepet bağlantısıdır. Öne çıkmak için, ikinci açıklama için ayarları açın ve metnin simgesini ve rengini güncelleyin:
Renk simgesi: #373D4B
Başlık Metin Rengi: #373D4B Şimdi geriye kalan şey, her birinin dinamik sayfa bağlantısı URL’si olması için modül bağlantısının başlığının ve URL’sinin başlığını güncellemektir. Satır ayarlarını ayarlayarak sayfanın ortasındaki Woo Doubcle Modülünü ve Woo Sepet ürünlerini ekleyeceğiz. Ancak eklemeden önce satır ayarlarını optimize etmemiz gerekir. Dolgu satırı aşağıdaki satır ayarlarını ve güncellemeleri açın: Dolgu (masaüstü): 72 piksel yukarıda,% 6 sol,% 6 sağ
Dolgu: (tablet ve cep telefonu): 0px üst, 0px sol, 0px sağ
Sırt sınırı Sınır Genişliği: 1 piksel
Sepet sayfası için dinamik bir WOO bildirim modülü tasarlamak, sayfanın üstüne bir Woo bildirim modülü eklemek için her zaman iyi bir fikirdir, böylece bildirimin sepet 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, bir sütun satırına yeni WOO bildirim modülünü eklemek için tıklayın.
Woo Not Sayfalarının Türleri ve Arka Planı Sonraki, Sayfa Türünü ve Renk Arka Planı Woo Bildirimi şu şekildedir: Sayfaların Türü: Sepet Sayfaları
Arka plan rengi: RGBA (153,158,117,0.1)
Önemli: Woo’nun bildiriminin düzgün çalışması için sayfa türü olarak bir sepet sayfası 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: #373D4B
Başlık Metin Boyutu: 14px Yüksek çizgi başlığı: 1.8em
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 Düğmenin sınır genişliği: 0px
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: 0.8EM üst, 0.8em aşağıda, 1em sol, 1em sağ
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
Dikey Konum Gölge Kutusu: 0px
Bulanık Güç Gölgesi Kutusu: 0px
Gölge kutularının dağılımının gücü: 0px Gölge Renk: #999E75
WOO bildirimi altında varsayılan marjı ortadan kaldırmak için, devam eden sekmeyi açın ve aşağıdaki özel CSS’yi ana öğeye ekleyin: marj-alt: 0! Önemli;
Sepet sayfası için gerekli dinamik bir sayfa başlığı oluşturmak için dinamik bir sepet sayfası başlığı oluşturun, WOO bildirim modülünün altındaki başlık modülünü 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: #373D4B
Boyut Metin Başlığı: 80px (masaüstü), 60px (tablet), 42px (cep telefonu)
Hat yüksekliği başlığı: 1.2em Dinamik Woo Sepet Ürünleri Tasarlama Şimdi sayfamızın başlığı zaten orada, sepet sayfası şablonuna woo sepeti ürünleri, diğer temel öğeler eklemeye hazırız. Post başlık modülünün altında, Woo CART ürün modülünü ekleyin.
Sepette zaten bir ürün yoksa modül yapay içerik görüntülenmelidir. Bu, tasarım sürecini görselleştirmeye yardımcı olacaktır. Woo Sepet Ürün gövdesi metni ve Woo Sepet Ürün ayarlarındaki içerik metin seçeneklerini ayarlayarak ürün başlığı bağlantısını, fiyat metnini ve subtotal metnini hedefleyebiliriz. Sermaye Woo Sepet Ürün Yönetmeliği’ni açın ve Tasarım sekmesi altında aşağıdakileri güncelleyin:
Gövde yazı tipi: Roboto
Renkli Metin Bağlantısı: #373D4B
Not: Bağlantının metni, ürün sütunu altındaki ürün başlığı bağlantısını hedefler. Woo Sepet Ürün Tablosu, Masa Hücreleri ve Sil simgeleri bildiğiniz gibi, sepet ürünleri tablo yapısında düzenlenmiştir. Varsayılan modül seçenekleriyle tabloların tablolarını ve tablolarını hedefleyebiliriz. Bu örnek için aşağıdakileri güncelleyin: Talang ve masa sınırları: evet
Dolgu Hücre Tablosu: 0px
Ardından, her bir ürünün sol tarafındaki Silin (“X”) rengini aşağıdaki gibi güncelleyin:
Simge metninin rengini silin: #373D4B Woo CART ürün alanımız, varsayılan modül alanı seçeneğini kullanarak sepet ürünleri alanını da hedefleyebilir. Bu, miktar alanı ve kupon kodu kutusu gibi şeyleri hedefleyecektir. Alan seçeneği altında aşağıdakileri güncelleyin:
Alan Arka Plan Rengi: Şeffaf Dolgu: 10 piksel üst, 10 piksel aşağıda
Yuvarlak açı alanı: 0px
Alan Sınır Genişliği: 1 piksel
Renk Alanı Sınırları: RGBA (0.0,0,0.16) WOO Sepet Ürün Düğmesi Modülü Woo Sepet Ürün Modülü, Varsayılan Modül düğmesi seçeneğine ayarlanabilen iki düğme (“” Uygula “ve” Güncelleme “düğmesini uygulayın) içerir. WOO Bildirim Modülündeki düğmeyi ayarladığımız için, WOO DIPT modülü ayarlarını açtığımız ve düğme seçeneği anahtarını bulun. Ardından, Anahtar düğmesini sağlayın veya başka bir Ayarlar menüsünü açmak için “Üç Nokta” simgesini tıklayın. Orada tuz düğmesi stilini seçin.
Geçerli düğme stili kopyalandığında, WOO Sepet Ürün Modülü ayarlarını açın ve düğme seçeneği grubundaki diğer ayarlar menüsünü açın ve düğme stili çubuğunu seçin. Bu, düğme stilini Woo’nun bildirim modülünden buna kopyalayacaktır.
Düğme stili yerine geçtikten sonra, düğmenin arka plan rengini aşağıdaki gibi değiştirin:
Arka Plan Renk Düğmesi: #373D4B
“Güncelleme Güncelleme” düğmesi, her gerekmediğinde durumdan devre dışı bırakılmış bir duruma sahiptir. Devre dışı bırakılmış düğme stilini de ayarlayabiliriz. Şimdilik, geçerli düğme stilini kopyalayın ve doğru tıklayın Menü ayarları kullanılarak devre dışı bırakılan düğme stiline yapıştırın. Woo Sepet Ürün Görüntüsü Bu modüldeki ürünün ürün stilini de değiştirebilir. Şimdilik, boyutlandırma seçeneğinin altındaki görüntünün boyutunu aşağıdaki gibi değiştirelim:
Resim Genişliği: 80px Özel Tablo Düzeni Tablodaki ürün bilgileri için daha fazla yatay boşluk yapmak istiyorsanız, tablonun düzenini Kalıcı Varsayılan Wooocommerce’ın baş harflerine (veya otomatik olarak) değiştirebilirsiniz. Bunu yapmak için, gelişmiş sekmeyi açın ve tabloya aşağıdaki özel CSS ekleyin: masa-ödenek: başlangıç! Önemli; toplam woo dinamik sepet modülü Tasarlayın Sepet sayfası şablonunu tamamlamamız gereken son anahtar öğe woo sepetidir Tottions Modülü. Bu modül toplam dinamik sepet içeriği ve “Kontrol etmeye devam et” düğmesini görüntüler. Bu düzen için devam edin ve toplam sepet modülünü sağ sütuna ekleyin. İlk sepet düğmesi, WOO Bildirim Modülü (daha önce yaptığımız gibi) için kullanılan düğme stilini kopyalayalım ve düğme stilini toplam sepet modülüne yapıştıralım. Bu bize “Ödeme yapmaya devam et” düğmesi için uygun bir düğme stili verecektir. Tabii ki, Varsayılan Modül seçeneğini kullanmak istediğiniz gibi düğme stilini kolayca ayarlayabilirsiniz. Toplam Sepet Metni Metin stili başlık modülünü ayarlamak için toplam sepet, toplam sepet modülünü açın ve tasarım sekmesinin altında aşağıdakileri güncelleyin:
Yazı tipi başlığı: Serif DM ekranı Başlık Metin Boyutu: 30px (masaüstü), 24px (tablet), 18px (cep telefonu)
Yüksek çizgi başlığı: 1.8em Tablo Sınırları ve Hücre Sınırları Toplam sepet masası varsayılan olarak birkaç tablo stiline sahip olacaktır. Varsayılan tablo ve masa hücresi seçenekleriyle düzenlemeyi seçebilirsiniz. Bu düzen için, her ikisi için de sınır kuvvetini ortadan kaldıracağız. Bunu yapmak için aşağıdakileri güncelleyin: Sınır Kuvvetleri Tablosu: Yok Hücre Sınır Stili Tablosu: Yok Woo Sepet ürünlerinde kullanılan aynı toplam sepet sepet sepetini sağlamak, Woo Sepet Ürün Modülünden alan kuvvetlerini kopyalamak ve toplam sepet modülüne yapıştırmak için toplam sepet sütunu. Bu noktada gerektiğinde daha fazla içerik ekleyin, Sepet sayfamız için şablon için tüm anahtar unsurlar. Ama burada durmak zorunda değilsin. Sayfaya istediğiniz içeriği gerektiği gibi ekleyebilirsiniz. İşte bazı fikirler:
Woo Cross Sells modülünü, arabaya eklenen ürünle bağlantılı çapraz satan ürünleri görüntülemek için ekleyin.
İlk satın alma işleminde indirim almak için Optin e -posta ekleyin.
Satın alma işleminin tamamlanmasını teşvik etmek için bir kupon kodu görüntüleyen bir promosyon ekleyin. Bu ücretsiz düzen gösterisi için sepet ürünleri altında iyi bir kayıt e-postası ekliyoruz.
Nihai sonuç, sepet sayfa şablonumuzun nihai sonucuna bakalım.
Ve bu tablet ve mobil cihazlarda görünüm. Özel WooCommerce Sepet sayfalarının şablonunu tasarlama sürecinin son zihni, güçlü bir divi tema üreticisi ve sezgisel bir woo modülü ile basitleştirilir ve büyük ölçüde güçlendirilir. Bu öğreticide, bir sepet sayfası oluşturan temel öğeleri birleştirmeye odaklanıyoruz. Bununla birlikte, diğer tüm güçlü divi modülleri ve özellikleri, sepet 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. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
Şablonun düzenini web sitenize aktarmak için, Divi Tema Oluşturucuunu açmanız ve .json dosyasını tema üreticisine aktarmak için taşınabilirlik seçeneğini kullanmanız gerekir.
Bittiğinde, Sepet şablonu tema üreticisinde mevcut olacak. Şablonu düzenlemek için, şablon gövdesi alanındaki düzenleme simgesini tıklayın. Sadece öğreticiye gidin? WooCommerce Divi sitenize her yüklediğinizde WooCommerce Sepet Sayfaları ve Bölümleri Hakkında WooCommerce (WC), mağaza sayfaları, sepet sayfaları, ödeme sayfaları ve hesap sayfaları dahil olmak üzere ana tuvalet sayfalarını üretecektir. Sayfa içeriği, WordPress arka uç blok düzenleyicisinde kısa kodlar kullanılarak dağıtıldı. Bu sepet sayfasındaki Divi Builder’ı etkinleştirirseniz, WooCommerce Sepet sayfa içeriğinin her öğesi, sayfayı düzenlemek için kullanılabilen bir Divi Woo modülü olarak yüklenir. Divi Divi’de bir sepet sayfası tasarlamak için woo modülü, sayfa şablonuna dinamik içerik eklemenin anahtarı olan çeşitli modüllerle birlikte gelir. Bazıları sepet sayfaları için özel bir Woo modülü içerir. Bir araba veya şablon sayfası oluşturmanın anahtarı olan modül şunları içerir:
Gönderi başlığı – Bu, bir tramvay sayfası şablonu oluştururken Troli sayfası başlığını dinamik olarak 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 CART Ürünleri – Bu modül, kullanıcıların şu anda sepetlerinde sahip oldukları ürünlerin bir listesini görüntüler.
WOO CART Toplamları – Bu modül şu anda subtotal, nakliye ve kullanıcı sepetindeki ürünler için toplam fiyatlara sahiptir.
Diğer isteğe bağlı modüller şunları içerir:
Woo Breadcrumbs – Bu, WooCommerce Breadbrumb navigasyon bıçaklarını gösterecektir.
Woo Cross Sars-Bu, sepetteki öğelerle bağlantılı çapraz satan ürünleri dinamik olarak görüntüleyecek. Belirtildiği gibi bir sepet veya şablon tasarlayın, bir WooCommerce özel sepet sayfası tasarlamak için Divi Woo modülünü kolayca kullanabiliriz. Sepet sayfaları için özel şablon yapma ihtiyacı. Bu öğretici için, Divi Tema İnşaatçısı kullanarak bir sepet sayfası şablonu oluşturacağız. Bu Wooocommerce Sepet Sayfa Şablonu için divi ile wooocommerce sepet sayfaları şablonları tasarlayan amaç, Divi’deki WooCommerce Sepet sayfasına ayarlanan şablonlar için özel bir gövde alanı oluşturmaktır. Bu şablon için özel bir başlık veya altbilgi alanı oluşturmayacağız, ancak bu şablonu kendi web sitenizde kendi başlık ve altbilginizle kolayca kullanabilirsiniz.
Sepet sayfasının başlaması için özel bir şablon yapın, aşağıdakileri yapalım:
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.
Sermaye şablonu ayarlarında, “Etkin Kullanım” sekmesi altında, WooCommerce sayfaları listesinin altında bir sepet seçin.
Son olarak, bir şablon oluştur’u tıklayın.
Yeni bir sepet şablonundan sonra, şablona “Özel Gövde Ekle” alanı tıklayın. Popup listesinde özel gövdeyi oluştur seçeneğini seçin.
Şablon düzeni düzenleyicisine bir satır ve sütun yapısı yapın, iki taraflı çeyrek sütun yapısı 0 ile yeni bir özel parça ekleyin.
Ardından, parçanın ortasına bir sütun satırı ekleyin. Arka Plan Bölümü Parçanın ayarlarını açın ve arka plan rengini aşağıdaki gibi ekleyin: Renk Arka Plan: #F7F3F0 Tasarım sekmesinin altındaki boyutu, aşağıdakileri güncelleyin: Talang genişliği: 2 İç Genişlik:% 100
Maksimum iç genişlik: yok Yükseklik min: 100vh
Bir sonraki bölüm alanı, aşağıdaki bölümlere ve sütunlara bazı boşluklar ekler:
Dolgu: 0px üst, 40 piksel sol, 40px sağ
Sütun 1 Dolgu: 90 piksel üst
Sütun 3 Dolgu: 84px Bu düzen için özel bir navigasyon bağlantısı oluşturarak, mağazalar, sepetler ve kontroller oluşturan ana sayfalara bazı özel navigasyon bağlantıları yapacağız. Bu, kullanıcıların satın alma işleminde gezinmesini kolaylaştıracaktır.
Sol sütunda yeni bir açıklama modülü ekleyin. Bu, web sitenizdeki mağaza sayfasına bir bağlantı olarak kullanılacaktır.
Blurb’un sermaye düzenlemesinde, içeriği aşağıdaki gibi güncelleyin:
Başlık: Mağaza İçindekiler: Boş Bırak
Simgeler kullanın: evet Simge: Ekran görüntüsüne bakın
Statik bir bağlantı URL’si eklemek yerine, mağaza sayfasına dinamik bağlantılar ekleyebiliriz. İşte nasıl yapılacağı.
İmleci modül bağlantısı URL giriş kutusuna gidin ve “Dinamik İçeriği Kullan” simgesini tıklayın.
Dağınık, listeden sayfa bağlantısını seçin.
Capital Link Capital’de, aşağı listeden Shop sayfasını seçin. Sonra değişikliği kaydedin.
Tasarım sekmesinin altında, simge stilini aşağıdaki gibi güncelleyin:
Ikon Renk: RGBA (55,61,75.0.3)
Görüntünün/simgenin yerleştirilmesi: sol
Resim genişliği/simgesi: 16px Ardından, başlık metnini güncelleyin:
Yazı tipi başlığı: Roboto
Ağır yazı tipi başlığı: orta
Başlık Metin Rengi: RGBA (55,61,75,0.3) Son dokunuş için, boyutu ve mesafeyi aşağıdaki gibi güncelleyin:
İçerik Genişliği:% 100
Marj: 10 piksel aşağıda
Animasyonlu resim/simge: animasyon olmadan Bu, açıklamanın (veya navigasyon bağlantısının) tablet ve cep telefonu üzerindeki tarayıcının tam genişliğine ulaşmasını ve ekleyeceğimiz bir sonraki açıklama arasında biraz boşluk yapmasını sağlayacaktır.
Sonraki iki bağlantıyı oluşturmak için, toplam üç bağlantı olması için iki kez tasarladığımız mevcut bulanıklık modülünü çoğaltın.
İkinci bağlantı, yaptığımız sayfa olan bir sepet bağlantısıdır. Öne çıkmak için, ikinci açıklama için ayarları açın ve metnin simgesini ve rengini güncelleyin:
Renk simgesi: #373D4B
Başlık Metin Rengi: #373D4B Şimdi geriye kalan şey, her birinin dinamik sayfa bağlantısı URL’si olması için modül bağlantısının başlığının ve URL’sinin başlığını güncellemektir. Satır ayarlarını ayarlayarak sayfanın ortasındaki Woo Doubcle Modülünü ve Woo Sepet ürünlerini ekleyeceğiz. Ancak eklemeden önce satır ayarlarını optimize etmemiz gerekir. Dolgu satırı aşağıdaki satır ayarlarını ve güncellemeleri açın: Dolgu (masaüstü): 72 piksel yukarıda,% 6 sol,% 6 sağ
Dolgu: (tablet ve cep telefonu): 0px üst, 0px sol, 0px sağ
Sırt sınırı Sınır Genişliği: 1 piksel
Sınır rengi: RGBA (55,61,75.0.14)
Üst sınır genişliği: 0px
Sepet sayfası için dinamik bir WOO bildirim modülü tasarlamak, sayfanın üstüne bir Woo bildirim modülü eklemek için her zaman iyi bir fikirdir, böylece bildirimin sepet 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, bir sütun satırına yeni WOO bildirim modülünü eklemek için tıklayın.
Woo Not Sayfalarının Türleri ve Arka Planı Sonraki, Sayfa Türünü ve Renk Arka Planı Woo Bildirimi şu şekildedir: Sayfaların Türü: Sepet Sayfaları
Arka plan rengi: RGBA (153,158,117,0.1)
Önemli: Woo’nun bildiriminin düzgün çalışması için sayfa türü olarak bir sepet sayfası 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: #373D4B
Başlık Metin Boyutu: 14px Yüksek çizgi başlığı: 1.8em
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 Düğmenin sınır genişliği: 0px
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: 0.8EM üst, 0.8em aşağıda, 1em sol, 1em sağ
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
Dikey Konum Gölge Kutusu: 0px
Bulanık Güç Gölgesi Kutusu: 0px
Gölge kutularının dağılımının gücü: 0px Gölge Renk: #999E75
WOO bildirimi altında varsayılan marjı ortadan kaldırmak için, devam eden sekmeyi açın ve aşağıdaki özel CSS’yi ana öğeye ekleyin: marj-alt: 0! Önemli;
Sepet sayfası için gerekli dinamik bir sayfa başlığı oluşturmak için dinamik bir sepet sayfası başlığı oluşturun, WOO bildirim modülünün altındaki başlık modülünü 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: #373D4B
Boyut Metin Başlığı: 80px (masaüstü), 60px (tablet), 42px (cep telefonu)
Hat yüksekliği başlığı: 1.2em Dinamik Woo Sepet Ürünleri Tasarlama Şimdi sayfamızın başlığı zaten orada, sepet sayfası şablonuna woo sepeti ürünleri, diğer temel öğeler eklemeye hazırız. Post başlık modülünün altında, Woo CART ürün modülünü ekleyin.
Sepette zaten bir ürün yoksa modül yapay içerik görüntülenmelidir. Bu, tasarım sürecini görselleştirmeye yardımcı olacaktır. Woo Sepet Ürün gövdesi metni ve Woo Sepet Ürün ayarlarındaki içerik metin seçeneklerini ayarlayarak ürün başlığı bağlantısını, fiyat metnini ve subtotal metnini hedefleyebiliriz. Sermaye Woo Sepet Ürün Yönetmeliği’ni açın ve Tasarım sekmesi altında aşağıdakileri güncelleyin:
Gövde yazı tipi: Roboto
Renkli Metin Bağlantısı: #373D4B
Not: Bağlantının metni, ürün sütunu altındaki ürün başlığı bağlantısını hedefler. Woo Sepet Ürün Tablosu, Masa Hücreleri ve Sil simgeleri bildiğiniz gibi, sepet ürünleri tablo yapısında düzenlenmiştir. Varsayılan modül seçenekleriyle tabloların tablolarını ve tablolarını hedefleyebiliriz. Bu örnek için aşağıdakileri güncelleyin: Talang ve masa sınırları: evet
Dolgu Hücre Tablosu: 0px
Ardından, her bir ürünün sol tarafındaki Silin (“X”) rengini aşağıdaki gibi güncelleyin:
Simge metninin rengini silin: #373D4B Woo CART ürün alanımız, varsayılan modül alanı seçeneğini kullanarak sepet ürünleri alanını da hedefleyebilir. Bu, miktar alanı ve kupon kodu kutusu gibi şeyleri hedefleyecektir. Alan seçeneği altında aşağıdakileri güncelleyin:
Alan Arka Plan Rengi: Şeffaf Dolgu: 10 piksel üst, 10 piksel aşağıda
Yuvarlak açı alanı: 0px
Alan Sınır Genişliği: 1 piksel
Renk Alanı Sınırları: RGBA (0.0,0,0.16) WOO Sepet Ürün Düğmesi Modülü Woo Sepet Ürün Modülü, Varsayılan Modül düğmesi seçeneğine ayarlanabilen iki düğme (“” Uygula “ve” Güncelleme “düğmesini uygulayın) içerir. WOO Bildirim Modülündeki düğmeyi ayarladığımız için, WOO DIPT modülü ayarlarını açtığımız ve düğme seçeneği anahtarını bulun. Ardından, Anahtar düğmesini sağlayın veya başka bir Ayarlar menüsünü açmak için “Üç Nokta” simgesini tıklayın. Orada tuz düğmesi stilini seçin.
Geçerli düğme stili kopyalandığında, WOO Sepet Ürün Modülü ayarlarını açın ve düğme seçeneği grubundaki diğer ayarlar menüsünü açın ve düğme stili çubuğunu seçin. Bu, düğme stilini Woo’nun bildirim modülünden buna kopyalayacaktır.
Düğme stili yerine geçtikten sonra, düğmenin arka plan rengini aşağıdaki gibi değiştirin:
Arka Plan Renk Düğmesi: #373D4B
“Güncelleme Güncelleme” düğmesi, her gerekmediğinde durumdan devre dışı bırakılmış bir duruma sahiptir. Devre dışı bırakılmış düğme stilini de ayarlayabiliriz. Şimdilik, geçerli düğme stilini kopyalayın ve doğru tıklayın Menü ayarları kullanılarak devre dışı bırakılan düğme stiline yapıştırın. Woo Sepet Ürün Görüntüsü Bu modüldeki ürünün ürün stilini de değiştirebilir. Şimdilik, boyutlandırma seçeneğinin altındaki görüntünün boyutunu aşağıdaki gibi değiştirelim:
Resim Genişliği: 80px Özel Tablo Düzeni Tablodaki ürün bilgileri için daha fazla yatay boşluk yapmak istiyorsanız, tablonun düzenini Kalıcı Varsayılan Wooocommerce’ın baş harflerine (veya otomatik olarak) değiştirebilirsiniz. Bunu yapmak için, gelişmiş sekmeyi açın ve tabloya aşağıdaki özel CSS ekleyin: masa-ödenek: başlangıç! Önemli; toplam woo dinamik sepet modülü Tasarlayın Sepet sayfası şablonunu tamamlamamız gereken son anahtar öğe woo sepetidir Tottions Modülü. Bu modül toplam dinamik sepet içeriği ve “Kontrol etmeye devam et” düğmesini görüntüler. Bu düzen için devam edin ve toplam sepet modülünü sağ sütuna ekleyin. İlk sepet düğmesi, WOO Bildirim Modülü (daha önce yaptığımız gibi) için kullanılan düğme stilini kopyalayalım ve düğme stilini toplam sepet modülüne yapıştıralım. Bu bize “Ödeme yapmaya devam et” düğmesi için uygun bir düğme stili verecektir. Tabii ki, Varsayılan Modül seçeneğini kullanmak istediğiniz gibi düğme stilini kolayca ayarlayabilirsiniz. Toplam Sepet Metni Metin stili başlık modülünü ayarlamak için toplam sepet, toplam sepet modülünü açın ve tasarım sekmesinin altında aşağıdakileri güncelleyin:
Yazı tipi başlığı: Serif DM ekranı Başlık Metin Boyutu: 30px (masaüstü), 24px (tablet), 18px (cep telefonu)
Yüksek çizgi başlığı: 1.8em Tablo Sınırları ve Hücre Sınırları Toplam sepet masası varsayılan olarak birkaç tablo stiline sahip olacaktır. Varsayılan tablo ve masa hücresi seçenekleriyle düzenlemeyi seçebilirsiniz. Bu düzen için, her ikisi için de sınır kuvvetini ortadan kaldıracağız. Bunu yapmak için aşağıdakileri güncelleyin: Sınır Kuvvetleri Tablosu: Yok Hücre Sınır Stili Tablosu: Yok Woo Sepet ürünlerinde kullanılan aynı toplam sepet sepet sepetini sağlamak, Woo Sepet Ürün Modülünden alan kuvvetlerini kopyalamak ve toplam sepet modülüne yapıştırmak için toplam sepet sütunu. Bu noktada gerektiğinde daha fazla içerik ekleyin, Sepet sayfamız için şablon için tüm anahtar unsurlar. Ama burada durmak zorunda değilsin. Sayfaya istediğiniz içeriği gerektiği gibi ekleyebilirsiniz. İşte bazı fikirler:
Woo Cross Sells modülünü, arabaya eklenen ürünle bağlantılı çapraz satan ürünleri görüntülemek için ekleyin.
İlk satın alma işleminde indirim almak için Optin e -posta ekleyin.
Satın alma işleminin tamamlanmasını teşvik etmek için bir kupon kodu görüntüleyen bir promosyon ekleyin. Bu ücretsiz düzen gösterisi için sepet ürünleri altında iyi bir kayıt e-postası ekliyoruz.
Nihai sonuç, sepet sayfa şablonumuzun nihai sonucuna bakalım.
Ve bu tablet ve mobil cihazlarda görünüm. Özel WooCommerce Sepet sayfalarının şablonunu tasarlama sürecinin son zihni, güçlü bir divi tema üreticisi ve sezgisel bir woo modülü ile basitleştirilir ve büyük ölçüde güçlendirilir. Bu öğreticide, bir sepet sayfası oluşturan temel öğeleri birleştirmeye odaklanıyoruz. Bununla birlikte, diğer tüm güçlü divi modülleri ve özellikleri, sepet 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. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
