Divi'niz için WooCommerce Sepeti Akış Zaman Çizelgesi Nasıl Tasarlanır

Yayınlanan: 2023-02-01

WooCommerce, WordPress'in en sevilen e-ticaret eklentilerinden biridir. Bunu desteklemek için Divi, varsayılan WooCommerce sayfalarınızı tasarlama konusunda daha fazla kontrol sahibi olmanızı sağlayan birkaç yeni Woo merkezli modülle çıktı. Bugünün gönderisinde, Divi için bir WooCommerce sepet zaman çizelgesi geliştirmeye çalışacağız. Bu zaman çizelgesi için, kullanıcı yolculuğunun görsel bir temsilini oluşturacağız. Kullanıcıya mağazadan kasaya nasıl geçtiğini görsel olarak göstermek istiyoruz.

Sepet Sayfası Şablonu

Masaüstü Görünümü

Sepet Akış Zaman Çizelgesi ile Divi Oyuncak Mağazası Sepeti - Sepet Şablonu

Tablet ve Mobil Görünüm

WooCommerce Sepet Sayfası Zaman Çizelgesi Tableti ve Mobil Görünüm

Ödeme Sayfası Şablonu

Sepet Akış Zaman Çizelgesi ile Divi Oyuncak Mağazası Ödeme Sayfası - Ödeme Şablonu

Tablet ve Mobil Görünüm

Tablette ve mobilde Divi Oyuncak Mağazası Ödeme Sayfası

Sepet ve Ödeme Şablonunu ÜCRETSİZ İndirin

Ücretsiz alışveriş sepeti ve satın alma şablonunu elinize almak için önce aşağıdaki düğmeyi kullanarak bunları indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak bültenimize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndir
Ücretsiz İndir

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzeni Paketinin bir kopyasının yanı sıra tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası gönderelim. Devam edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, aşağıya e-posta adresinizi yazın ve düzen paketine erişmek için indir'i tıklayın.

Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişim elde etmek için lütfen e-posta adresinizi kontrol edin!

Alışveriş Sepeti ve Ödeme Şablonlarını İndirme ve Yükleme

Divi Theme Builder'a gidin

Şablonu yüklemek için WordPress web sitenizin arka ucundaki Divi Theme Builder'a gidin.

Divi Theme Builder'ı açın

Genel Varsayılan Web Sitesi Şablonunu Yükle

Ardından, sağ üst köşede iki oklu bir simge göreceksiniz. simgesine tıklayın.

Şablonu Divi Theme Builder'a aktarın

İçe aktarma sekmesine gidin, bu gönderide indirebildiğiniz JSON dosyasını yükleyin ve 'Divi Tema Oluşturucu Şablonlarını İçe Aktar'ı tıklayın.

Şablonu Divi Theme Builder'a aktarmayı tamamlayın

Divi Theme Builder Değişikliklerini Kaydet

Dosyayı yükledikten sonra yeni bir alışveriş sepeti, ödeme ve alışveriş şablonu göreceksiniz. Şablonların etkinleştirilmesini istediğiniz anda Divi Theme Builder değişikliklerini kaydedin.

WooCommerce Şablonları için Tema Oluşturucu Değişikliklerini Kaydet

Sıfırdan WooCommerce Sepeti Zaman Çizelgesi Nasıl Oluşturulur

Biraz daha uğraşmak istiyorsanız, blog gönderimizin bir sonraki bölümü size Divi için WooCommerce sepet zaman çizelgesini nasıl yeniden oluşturacağınızı gösterecek. Kendi sepet zaman çizelgenizi özelleştirmek için bu eğitimdeki adımları kullanabilirsiniz. Bir sonraki WooCommerce ve Divi projeniz için ilham kaynağı olarak kullanın! Oluşturacağımız WooCommerce alışveriş sepeti zaman çizelgesi şöyle görünür:

Sepet Sayfası

Sepet sayfasında WooCommerce alışveriş sepeti zaman çizelgesi

Ödeme Sayfası

Ödeme sayfasında WooCommerce sepet zaman çizelgesi

Divi için bu WooCommerce sepeti zaman çizelgesi de mobil uyumludur. Mobil cihazlarda yatay bir zaman çizelgesi olarak kalır:

Mobil cihazlarda WooCommerce zaman çizelgesi

Artık ne inşa edeceğimize dair görsel bir rehberimiz olduğuna göre başlayalım!

Divi Theme Builder'ı kurun

WooCommerce'in sepet ve ödeme sayfalarını etkilemek için bu şablonları oluşturacağız. Böylelikle Divi Theme Builder'da görevimize başlıyoruz.

Divi Theme Builder'ı açın

Sepet Şablonu Oluştur

Yeni Şablon Ekle kartındaki artı simgesine tıklayın .

Sepet Şablonu Oluştur

Ardından, Yeni Şablon Oluştur'u seçin .

Yeni Şablon Oluştur'u seçin

Ardından, oluşturmakta olduğunuz yeni şablona ekleyebileceğiniz tüm çeşitli atamaları içeren kalıcı bir kutu sunulur. Bizim durumumuzda, WooCommerce mağazamızın alışveriş sepeti sayfası için bir şablon oluşturacağız. Bu nedenle, modal kutuyu aşağı kaydırın ve WooCommerce başlığı altında Sepet'i seçin . Seçildikten sonra, Şablon Oluştur'u tıklayın . Bunu yaptığımızda yeni oluşturduğumuz şablonu sepet sayfasına atıyoruz.

Sepet Şablonu Oluşturmayı Tamamlayın

Ödeme Şablonu Oluşturun

Ödeme şablonunu oluşturmak için aynı adımlardan geçeceğiz. Yeni Şablon Ekle kartındaki artı simgesine tıklayın .

Sepet Şablonu Oluştur

Yine, Yeni Şablon Oluştur'u seçin .

Yeni Şablon Oluştur'u seçin

Ödeme sayfası için, modal kutuyu aşağı kaydırmamız ve WooCommerce başlığı altında Ödeme'yi seçmemiz gerekecek. Seçildikten sonra, Şablon Oluştur'u tıklayın .

Şablonları ve Ödevleri Kaydet

Alışveriş sepeti ve ödeme şablonlarımız oluşturulduğundan artık onları kaydedebiliriz. Divi Theme Builder'ın üstündeki yeşil Değişiklikleri Kaydet düğmesine tıklayın.

Şablonları ve Ödevleri Kaydet

WooCommerce Sepeti Akış Zaman Çizelgesini Oluşturmaya Başlayalım

Sepet Sayfası Şablonunu Ayarlama

Şimdi eğlence başlıyor! Sepet sayfası için sepet akış zaman çizelgemizi oluşturmaya başlayacağız. Bunun için az önce oluşturduğumuz Cart şablonu içerisinden Add Custom Body butonuna tıklıyoruz .

Gövdeyi Sepete Ekle Sayfa Şablonu

Bu şablonları ve atamalarını oluşturduğumuza benzer şekilde, modal kutuda görünen Özel Gövde Oluştur düğmesine tıklayacağız .

Gövdeyi Sepete Ekle Sayfa Şablonu

Yeni Bölüm ve Satır Ekleme

Artık Divi Builder'da olduğumuza göre yeni bir satır ekleyeceğiz. Bu satırda beş sütun olacak.

Beş sütunlu yeni bir satır ekleyin

Blurb Modülleri Ekle

Yeni satırınızın 1, 3 ve 5. sütunlarına üç Tanıtım Modülü ekleyin.

Sütunlara Blurb Modülleri ekleyin

İşte kullanacağımız her Tanıtım Modülünün içeriği:

İlk Tanıtım Yazısı (1. Sütun)

  • Başlık: Dükkan
  • Gövde: Boş bırakın
  • Simge Kullan: Evet
  • Simge: Aşağıdaki ekran görüntüsüne bakın
  • Modül Bağlantı URL'si: /shop (Veya mağaza sayfanıza özel bağlantınız)

İkinci Tanıtım Yazısı (3. Sütun)

  • Başlık: İnceleme
  • Gövde: Boş bırakın
  • Simge Kullan: Evet
  • Simge: Aşağıdaki ekran görüntüsüne bakın
  • Modül Bağlantı URL'si: /cart (Veya sepet sayfanıza özel bağlantınız)

Üçüncü Tanıtım Yazısı (Sütun 5)

  • Başlık: Ödeme
  • Gövde: Boş bırakın
  • Simge Kullan: Evet
  • Simge: Aşağıdaki ekran görüntüsüne bakın
  • Modül Bağlantı URL'si: /checkout (Veya ödeme sayfanıza özel bağlantınız)

Şimdi, WooCommerce zaman çizelgemiz bu noktada şöyle görünecek:

Stil olmadan WooCommerce alışveriş sepeti zaman çizelgesi

Tanıtım Yazılarına Bağlantılar Ekleme

Alışveriş sepeti ve ödeme sayfası için şablonlar oluştururken, müşterinin hangi sayfalara geldiği önemli değil, Blurb Modüllerimizin kolay erişilebilir olmasına ihtiyacımız var. WooCommerce zaman çizelgesinin temel bir özelliği, son kullanıcının - müşterinizin - ödeme işleminin çeşitli aşamaları arasında kolayca gezinebilmesidir. Sitemizin varsayılan mağaza, alışveriş sepeti ve ödeme sayfalarına bağlantı eklemek için öncelikle ilk tanıtım yazısı olan alışverişin modül ayarlarına gireceğiz .

Shop Blurb'a Bağlantılar Ekleme

Modülün ayarlar kutusu göründüğünde, Link başlığına ineceğiz. Bağlantıyı Modül Bağlantısı URL'si kutusuna ekleyeceğiz çünkü bu, özel tıklamalarınızın - İster Tanıtım Başlığı ister simgenin kendisi olsun - nereye gittiklerinden bağımsız olarak, gitmeleri gereken sayfaya yönlendirilmelerini sağlayacaktır.

Ödeme zaman çizelgesi sürecinde Blurb Modüllerine bağlantılar ekleyin

Her bir Blurb Modülüne standart WooCommerce sayfalarının bağlantılarını ekleyeceğiz. WooCommerce kurulumunuzda bu sayfalar için özel bağlantılar oluşturduysanız, bağlantıları buna göre ayarlayın. İlk olarak Shop Blurb Modülü ile başlıyoruz. Modül Bağlantı URL'si için /shop giriyoruz. Bu, WooCommerce'deki mağaza sayfası için varsayılan URL'dir. Unutmayın, bu URL'yi değiştirdiyseniz, bunun yerine özel URL'nizi buraya girin.

Varsayılan WooCommerce Shop sayfası bağlantısına bağlantı için /shop bağlantısı ekleyin

Değişikliklerinizi kaydetmek için yeşil onay işareti düğmesini tıklayın . Ardından, İnceleme Özeti Modülüne geçiyoruz. Bu modül, sepet sayfasına bağlantı görevi görür. Yine Link sekmesine gidiyoruz ve ardından Modül Bağlantı URL'sini /cart , Modül URL'sine ekliyoruz .

Sepet Blurb Modülüne bağlantı ekle

Son Tanıtım Tanıtımı Modülü, Ödeme Tanıtımı Modülü için, /checkout olan varsayılan WooCommerce ödeme sayfası bağlantısına bağlanacağız.

WooCommerce standart Ödeme Sayfası bağlantısına bağlantı ekleyin

Stil Blurb Modülleri

Ardından, eklenen Blurb Modüllerimizin stilini oluşturmaya başlayacağız. Modüllerde fareyle üzerine gelme stillerini kullanacağız. Bu, WooCommerce sepet zaman çizelgesinin kullanıcı deneyimine (UX) yardımcı olur. Şu anda bulunduğumuz sayfayı temsil eden Blurb Modülünün farklı bir renk olmasını istiyoruz. Ayrıca, üzerine geldiğimizde simgenin büyümesini ve rengini değiştirmesini istiyoruz.

Blurb Modülü Stili

  • Simge Rengi: #eac989
  • Vurgulu Simge Rengi: #9fa2ce
  • Metin Hizalama: Merkez

Tanıtım Yazısı Simge Rengi

  • Başlık Metni:
    • Başlık Başlık Metni: H4
    • Başlık Fontu: Baskerville
    • Başlık Yazı Tipi Ağırlığı: Kalın
    • Başlık Metin Rengi: #354e7c

Blurb başlık metni stili

Dönüşüm:

  • Dönüşüm Ölçeği (Masaüstü): %100
  • Dönüşüm Ölçeği (Vurgulu): %115

Blurb Dönüştürme Ayarları

İlk Blurb Modülü için tasarım ayarlarını belirledikten sonra, bunları sıramızdaki diğer Blurb Modüllerine genişleteceğiz.

Açıklama Modülü stilini, bölümümüzdeki tüm tanıtım yazılarını kapsayacak şekilde genişletme

Stillerimizi yalnızca bölümümüzdeki Blurb Modüllerine genişletmek istiyoruz. Özellikle içinde zaten içerik bulunan bir sayfada çalışıyorsanız buna dikkat etmek önemlidir.

Açıklama Modülü stilini, bölümümüzdeki tüm tanıtım yazılarını kapsayacak şekilde genişletme

Sepet Blurb Modülünü Şekillendirme

Ödeme işleminin farklı aşamalarını belirtmek için, kullanıcımızın üzerinde bulunduğu mevcut aşamaya farklı bir simge rengi vereceğiz. Örneğin, sepet sayfasındalarsa, işlemin sepet aşamasına atıfta bulunarak Tanıtım Modülünün rengini değiştiririz.

Geçerli sayfa Blurb Modülü rengi güncelleniyor

Sepet Sayfası Blurb Modülü:

  • Simge Rengi (Masaüstü): #f6c6c5
  • Simge Rengi (Vurgulu): #9fa2ce

Zaman Çizelgesi Bölücüler Ekle

Tanıtım Modülümüzü oluşturup biçimlendirdikten sonra, Bölücü Modüllerimizi eklemeye ve biçimlendirmeye başlayacağız. Sıramızın ikinci ve dördüncü sütunlarında Bölücü Modülü kullanıyoruz.

WooCommerce sepet zaman çizelgesine bölücüler ekleyin

Stil Zaman Çizelgesi Bölücüler

Ardından, stilimizi Bölücü Modüllerimize ekleyeceğiz.

Bölücü Ayarları

Görünürlük:

  • Bölücüyü Göster: Evet

Astar:

  • Çizgi Rengi: #354e7c
  • Çizgi Stili: Noktalı
  • Satır Konumu: Dikey Ortalanmış

boyutlandırma

  • Bölücü Ağırlığı: 5 piksel

Bölücü Modüller için Ayarlar

Bu Bölücü Modülün stillerini satırımızdaki diğer modüle kopyalayıp yapıştırmak için gerçekten harika bir Divi özelliği kullanalım. İlk önce, tamamladığımız Divider Modülümüze sağ tıklayacağız . İkinci olarak Copy Module Settings seçeneğine tıklıyoruz . Ardından, şu anda stilsiz olan Divider Modülüne sağ tıklıyoruz. Son olarak Paste Module Settings seçeneğine tıklıyoruz . Kazanılan zaman kazanılan zamandır!

Bölücü Modüller için modül stillerini kopyalayıp yapıştırın

Özel CSS Ekleme

WooCommerce sepet zaman çizelgemiz şu anda böyle görünüyor:

WooCommerce Sepet Ödeme Zaman Çizelgesi

Bölücü Modüllerimizin doğru şekilde hizalandığından emin olmak ve zaman çizelgesi modülümüzü mobil uyumlu hale getirmek için sıramıza biraz CSS ekleyeceğiz.

Özel CSS ile WooCommerce Sepeti Zaman Çizelgesi satırı

Özel CSS'imizi eklemek için öncelikle WooCommerce Sepet Zaman Çizelgemiz için Satır Ayarlarını girmemiz gerekiyor. Ardından Gelişmiş Sekmesini seçiyoruz . Son olarak, Ana Öğeye aşağıdaki CSS'yi ekleyeceğiz:

Özel CSS:

display:flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;

Bunu Satır Ayarlarına ekledikten sonra yeşil onay işaretine tıklayarak ayarlarımızı kaydediyoruz.

Mobil Duyarlılık için Nihai Özelleştirme

Divi'nin inanılmaz bir avantajı, çeşitli öğeleri oldukça derinlemesine özelleştirebilmenizdir. Satırımızın son sütunundaki son Blurb Modülünde son bir düzenleme yapmamız gerekiyor. Bu değişiklik, mobil ve daha küçük ekranlarda daha iyi görünmesine yardımcı olacaktır. Divi'nin stilimizde ayrıntıya inmemize izin vermesi, işimizin hem müşterilerimiz hem de kendi web sitelerimiz için iyi görünmesini sağlıyor.

Sütunlar için dolgu, kenar boşluğu ve CSS düzenleme

Mobilde son sütunun diğer Blurb Modüllerinden nasıl biraz daha düşük olduğuna dikkat edin. Bunu değiştireceğiz! Bunun için üçüncü ve son modülün ayarlarına gireceğiz . Ardından, Space > Margin'e gideceğiz. Masaüstü görünümü için kenar boşluğu bırakacağız. Ancak, tabletler için 15 piksellik bir alt kenar boşluğu ekleyeceğiz .

Blurb Modülünüze bir alt kenar boşluğu ekleyin

Son olarak, mobil cihazlar için 21 piksellik bir alt kenar boşluğu ekleyeceğiz.

Mobil cihazlar için Blurb Modülünüze bir alt kenar boşluğu ekleyin

Artık, kullanıcıları mağazadan kasaya yönlendirmek için kullanabileceğimiz, tamamen mobil uyumlu bir WooCommerce alışveriş sepeti zaman çizelgemiz var.

Ödeme Sayfasını Ayarlama

Sepet sayfamızda WooCommerce alışveriş sepeti akışı zaman çizelgemizin temelini oluşturduk. Ancak, yaptığımız işi ödeme sayfası şablonumuza ekleyerek zaman çizelgemizi tamamlamamız gerekiyor. Ödeme sayfası için sürecimizi kolaylaştırmak için Divi'nin OG özelliğini, Sağ Tıklama Menüsünü kullanacağız. Başlayalım!

WooCommerce Sepeti Akış Zaman Çizelgesini Sepet Sayfasından Kopyala

Sepet sayfasına geri döneceğiz. Ancak, vücut için Divi Builder'a girmeyeceğiz.

Alışveriş sepeti gövdesini ödeme sayfası için hazırlayın

Sepet şablonunun Özel Gövdesine sağ tıklayın . Ardından, sağ tıklama menüsünden Kopyala seçeneğine tıklayın.

Sağ tıklayın, gövde şablonunu sepet şablonundan ödeme şablonuna kopyalayın

Cart şablonunda yaptığımız işi kopyaladığımıza göre artık bunu checkout şablonuna yapıştıracağız. Bunun için checkout sayfası şablonu içerisinden Add Custom Body butonuna sağ tıklıyoruz . Bunu yaptıktan sonra, menü Yapıştır seçeneğini gösterecektir. Özel Gövdeyi sepet sayfası şablonundan ödeme sayfası şablonuna kopyalamak için Yapıştır'a tıklayın .

Sepet şablonunun gövde içeriğini yapıştırmak için sağ tıklayın

Şimdi hem alışveriş sepeti hem de ödeme sayfası şablonlarının özel bir gövdeye sahip olduğunu göreceksiniz. Bu, web tasarım sürecimizde zaman kazanmamıza yardımcı olacaktır. Teşekkürler, Divi Ödeme şablonundaki değişikliklerimizi kaydetmek için oluşturucunun üst kısmındaki yeşil Değişiklikleri Kaydet düğmesini tıklayacağız .

Ödeme sayfasının gövde şablonu için değişiklikleri kaydedin

Ödeme Sayfası Şablonunu Güncelle

Artık tasarım sürecimizden biraz zaman ayırdığımıza göre, projemizin geri kalanıyla iyi çalıştığından emin olmak için çıkış sayfasındaki son düzenlemeleri yapalım. Önce, ödeme sayfası şablonunun Özel Gövdesini düzenlemek için kalem simgesini tıklayın .

Ödeme özel gövde modülünü düzenleyin

Stil Kontrol Simgesi

Ödeme simgemizi şekillendirmeye başlayalım. Ödeme simgesinin Modül Ayarlarını açacak olan dişli simgesine tıklayın .

Ödeme simgesini düzenle

Modül Ayarları modülünün Tasarım sekmesine gidin . Görüntü ve Simge başlığına tıklayın . Simge rengini düzenleyeceğiz. Bu nedenle, damlalık simgesine tıklayın ve #f6c6c5 onaltılık kodunu girin . Bu, simgeyi geçerli sayfayı belirtmek için kullandığımız pembe renk yapacaktır.

Ödeme simgesi rengini güncelle

Sepet Simgesini Güncelle

Geri dönüp sepet simgesinin simge rengini güncellememiz gerekecek. Bunun için modülün modül ayarlarına geri döneceğiz. Ardından, sepet simgesinin dişli çark simgesini tıklıyoruz .

Ödeme sayfası şablonundaki sepet simgesi rengini güncelleyin

Yine modül ayarlarından Tasarım sekmesine geçeceğiz. Ardından, Görüntü ve Simge başlığının altında damlalık aracına tıklayın . Ardından, #eac989 onaltılık kodunu ekleyin.

Ödeme sayfası şablonundaki sepet simgesi rengi güncellendi

Divi Builder'dan çıktıktan sonra ayarlarınızı ve tüm sıkı çalışmanızı kaydetmeyi unutmayın .

Tüm değişiklikleri kaydet

Hepsini bir araya koy

Bu öğreticiyi sepet zaman çizelgesini oluşturmaya odaklamış olsak da, şablonu tamamlamak için kullanılan başka WooCommerce modülleri de var. Bu eğitim için, stil için ilham kaynağı olarak ÜCRETSİZ Divi Oyuncak Mağazası Düzen Paketini kullandık. Mağazanızı tamamlamak için her şablon sayfasına eklemeniz gereken diğer WooCommerce modüllerini burada bulabilirsiniz.

Sepet Sayfası Şablonu

  • Woo Cart Ürünleri: Bu, WooCommerce sepetini görüntüler
  • Woo Cart Totals: Bu modül ile ara toplamı, vergileri ve daha fazlasını sergileyin

Diğer Woo modülleriyle alışveriş sepeti sayfalarına genel bakış

Ödeme Sayfası Şablonu

  • Woo Bildirim Modülü: Bu modülü, kontrol etme ile ilgili herhangi bir hatayı, bilgiyi veya bildirimi göstermek için kullanırız.
  • Woo Checkout Faturalandırma: Bu modül, müşterilerinizin fatura ayrıntılarını renklendirecek
  • Woo Checkout Ayrıntıları: Sepet toplamlarının aksine, bu modül gerçek ürün adlarını, miktarını ve daha fazlasını gösterecektir.
  • Woo Checkout Faturalandırma: Mevcut ödeme yöntemlerini göstermek için bu modülü ödeme sayfasına ekledik

Diğer Woo modülleriyle ödeme sayfalarına genel bakış

Sonuç olarak

Alışveriş sepeti zaman çizelgesine sahip olmak, müşterilerinizin mağazanızda gerçekleştirdiği sürecin görsel bir sunumunu ekler. Divi ile WooCommerce mağazanızı özelleştirme ve ek bir parça oluşturma gücüne sahipsiniz. Divi, burada öğrendiklerinizi kendi müşterilerinize ve kişisel web sitelerinize taşıyabilmeniz için size araçlar sunar. Bu öğreticiyi vahşi doğada kullanırsanız sizden haber almak isterim!