Divi ile Belirli Ürün Sayfalarına Dinamik Olarak Kupon Kodu Çubuğu Ekleme

Divi ve WooCommerce ile yaptığınız bir çevrimiçi mağazayı yönetirken, aciliyet duygusunu artırmak için zaman zaman web sitenizde kupon kodları göstermek isteyeceksiniz. Web genelinde, birçok çevrimiçi mağazanın kupon kodlarını sayfanın en üstüne yapıştırılmış bir çubukta paylaştığını fark edeceksiniz. Artık Divi's Theme Builder ile, kupon koduna uygun ürünlere bu tür kupon kodu çubuğunu otomatik olarak ekleyebilirsiniz.

Bu eğitimde, size bunu tam olarak nasıl yapacağınızı göstereceğiz. Bu eğitimde, kupon kodunu ayarlamaktan indirim kategorisindeki ürünler için ayrı bir ürün şablonu oluşturmaya kadar çeşitli bölümler vardır. Şablonun JSON dosyasını da ücretsiz olarak indirebileceksiniz! Kullandığımız genel stil, geçmişte paylaştığımız cesur ürün sayfası düzenine dayanmaktadır.

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Ürün Sayfası Şablonunu ÜCRETSİZ İndirin

Ürün sayfası şablonuna el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize 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.

Eğitime Genel Bakış

• Web sitenizde Divi ve WooCommerce eklentisinin kurulu olduğundan emin olun.
• Eğitimin ilk bölümünde yeni bir indirimli ürün kategorisi oluşturacağız
• Uygun ürünleri bu yeni ürün kategorisine atayacağız
• Ardından yeni bir kupon kodu oluşturacağız ve kupon kodunun yalnızca oluşturduğumuz ürün kategorisi için geçerli olduğundan emin olacağız.
• Tema oluşturucunun içinde, söz konusu ürün kategorisi için yeni bir şablon oluşturacağız.
• Bu şablon için normal ürün sayfası gövdesini yeniden kullanacağız ve Divi'nin yerleşik seçeneklerini kullanarak bir üst kupon kodu çubuğu ekleyeceğiz.

1. Yeni İndirimli Ürün Kategorisi Oluşturun

Ürün Kategorilerine Git ve Yeni İndirimli Ürün Kategorisi Ekle

WordPress web sitenize WooCommerce eklentisini yükleyerek başlayın ve yeni indirime uygun tüm ürünlere ayrılmış yeni bir ürün kategorisi ekleyin. Kupon kodunu mevcut ürün kategorilerinde kullanmayı planlıyorsanız, bunun yerine bunları kullanabilirsiniz.

2. Ürünleri Yeni İndirim Kategorisine Ata

Ürünü Düzenle

Ardından, satışa dahil etmek istediğiniz ürünleri açın.

Ürünleri Yeni İndirim Kategorisine Ata

Ve bunları yeni indirimli ürün kategorisine dahil edin.

3. WooCommerce Kupon Kodu Oluşturun

Kuponlara Git ve Yeni Kupon Ekle

Bu öğreticinin sonraki bölümü, yeni bir kupon kodu oluşturmayı ele alır. WordPress kontrol panelinize > Kuponlar > gidin ve 'İlk kuponunuzu oluşturun' seçeneğine tıklayın .

Kupon Kodu ve Kupon Verileri Ekle

En üste kupon kodunu ekleyin ve kupon kodunuza uygulamak istediğiniz genel ayarları seçin.

• İndirim kodu: İndirim kodu ekleyin
• İndirim türü: Yüzde indirim
• Kupon tutarı: Yüzde ekleyin
• Kupon son kullanma tarihi: Tarih seçin

Kullanım Kısıtlaması Ekle

Ardından kullanım kısıtlamasına geçin ve kupon kodunun yalnızca indirimli ürün kategorinizdeki ürünlerde çalıştığından emin olun.

• Ürün kategorileri: İndirim

4. İndirim Kategorisi için Yeni Şablon Ekle

Yeni Şablon Ekle

Kupon kodunu oluşturduktan sonra, ilgili ürün sayfalarına eklemenin zamanı geldi! Bunu yapmak için Divi Tema Oluşturucu'ya gidin ve yeni bir şablon ekleyin.

Kullanmak

Bu yeni şablonu indirimli ürün kategorisinde kullanın.

• Kullanım Süresi: Belirli Ürün Kategorisindeki Ürün: İndirim

5. Yeni Şablon için Global Ürün Sayfası Gövdesini Yeniden Kullanın

Ürün Şablonu Gövdesini Yeni Şablon Gövdesine Sürükleyin

Normal ürün sayfası şablonunuzun gövdesini yeni şablonunuza sürükleyerek yeniden kullanabilirsiniz. Bu öğreticide, başka bir öğreticide oluşturduğumuz kalın ürün sayfası düzenini kullanıyoruz. Düzenin JSON dosyasını blog gönderisinden indirebilirsiniz.

6. En İyi Kupon Kodu Çubuğunu Yeni Şablonun Gövdesine Ekleyin

Gövde Şablonu Düzenleyicisine Girin

Ürün sayfası gövdesini yeni şablonunuza ekledikten sonra düzenlemeye başlayabilirsiniz. Bu şablonda yaptığınız değişiklikler yalnızca indirimli ürün kategorisinin parçası olan ürün sayfalarında görünecektir.

En Üste Yeni Bölüm Ekle

Şablon düzenleyicinin içinde yapacağımız ilk şey, en üste yeni bir bölüm eklemek.

Arka plan rengi

Bölüm ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #e02b20

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Animasyon

Bir animasyon ekleyerek bölüm ayarlarını tamamlayın.

• Animasyon Stili: Slayt
• Animasyon Yönü: Aşağı
• Animasyon Süresi: 1500ms
• Animasyon Gecikmesi: 1000ms
• Animasyon Opaklığı Başlatma: %100
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış
• Animasyon Tekrarı: Bir kez

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

boyutlandırma

Satır ayarlarını açın ve satırın bölüm kabının tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütun 1

aralık

Ardından, sütun 1 ayarlarını açın ve biraz üst ve alt dolgu ekleyin.

• Üst Dolgu: 25px
• Alt Dolgu: 25px

2. sütun

Arka plan rengi

Sütun 2 ayarlarını da açın ve beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

aralık

Bu sütuna da bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 20px
• Alt Dolgu: 20px

Sınır

Ve bazı üst sol ve sağ kenarlık yarıçapı ekleyin.

• Sol Üst + Sağ Üst: 30 piksel

Sütun 1'e Metin Modülü Ekle

İçerik Ekle

Sütun 1'de ihtiyacımız olan ilk ve tek modül bir Metin Modülüdür. Seçtiğiniz bir kopyayı girin.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Montserrat
• Metin Rengi: #ffffff
• Metin Boyutu: 16px
• Metin Hizalama: Merkez

Sütun 2'ye Metin Modülü Ekle

İçerik Kutusuna Kupon Kodu Ekle

İkinci sütuna, öğreticinin ilk bölümünde eklediğiniz indirim koduyla başka bir Metin Modülü ekleyin.

Metin Ayarları

Modülün metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Montserrat
• Metin Yazı Tipi Ağırlığı: Ağır
• Metin Rengi: #000000
• Metin Boyutu: 19px
• Metin Hizalama: Merkez

boyutlandırma

Ardından, boyutlandırma ayarlarını değiştirin.

• Genişlik: %50
• Modül Hizalaması: Merkez

aralık

Biraz alt dolgu da ekleyin.

• Alt Dolgu: 10px

Sınır

Ve bir alt kenarlık ekleyerek modülün ayarlarını tamamlayın.

• Alt Kenar Genişliği: 1px
• Alt Kenarlık Rengi: #333333

7. Tema Oluşturucu Değişikliklerini Kaydet ve Sonucu Görüntüle

Değiştirilen ürün sayfasını tamamladıktan sonra, şablon değişikliklerini kaydedebilir, Tema Oluşturucu'dan çıkabilir ve sonucu indirimli ürün sayfalarında görüntüleyebilirsiniz!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, bir kupon kodu çubuğunun nasıl oluşturulacağını ve söz konusu kupon kodu için uygun olan ürün sayfalarında otomatik olarak gösterilmesini nasıl sağlayacağınızı gösterdik. Bu, ziyaretçilerinize ürünlerinizi satın almaları için ekstra teşvik vermenin harika bir yoludur. Şablon JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.