Divi Kozmetik Mağazası Düzen Paketine Ürün Arzularının Bir Listesi Nasıl Eklenir
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Her düzen paketiyle birlikte, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, Sürdürülebilir Divi Tasarım Girişimimizin bir parçası olarak, yeni kozmetik mağaza düzeni paketi Divi’yi kullanarak çevrimiçi mağazanıza ürün arzularının bir listesini nasıl ekleyeceğinizi göstereceğiz. Çevrimiçi mağazanıza bir arzu eklemek, ziyaretçilerin en sevdikleri ürünleri web sitenizde izlemesine ve bu ürünün dönüşümünü artırmanıza yardımcı olur. Kozmetik mağazası düzeni paketine ek olarak, ücretsiz bir Woocommerce ve WooCommerce Wishists eklentisine de ihtiyacımız var.
Sneak Peek Farklı parçalara ve adımlara girmeden önce, bu öğreticiden bekleyebileceğiniz üç şeyin bir gözüne bakalım:
Mağaza sayfanızdaki her ürün için ‘İstek Listesine Ekle’ düğmesi
Her ziyaretçi için benzersiz arzu listesi sayfası, arzu listesinden doğrudan sepetlerine ürün ekleyebilirler.
Tüm düzen paketiyle eşleşen ve ‘Arzu Listesine Ekle’yi de içeren ürün sayfası da
Arzu Listem: Otomatik Oluştur
Bir sonraki adıma devam edin, düğmeyi ayarlayın ve düğmenin konumunu değiştirin ve ihtiyaçlarınıza göre kopyalayın. İşleme adımlarında, ürünün otomatik veya manuel olarak silinmesini isteyip istemediğinizi seçebilirsiniz. Ziyaretçilerin istedikleri zaman öğeleri silmelerine izin verecekseniz, ‘Manuel’ seçin. Son olarak, ziyaretçileriniz arzu listelerini sosyal ağlarında da paylaşabilirler. İstediğiniz sosyal ağı etkinleştirebilir veya devre dışı bırakabilirsiniz. Bölüm 2: WooCommerce Dilek Listesi Eklentisinin Ayarları Adım 1: Eklenti Ayarlarını Açın WordPress Dashboard> TI WishList> Genel Ayarlar’ı açarak WooCommerce Wish Lists eklentisinde bazı ek ayar değişiklikleri yapmak için ihtiyacımız var. Adım 2: Ürün sayfaları düğmesindeki değişiklikler, ‘Ürün Sayfası Ayarları düğmesini’ bulana ve aşağıdaki değişiklikleri uygulayana kadar aşağı hareket edin: Düğme Türü: Düğme
Icon ‘Arzu Listesine Ekle’: Kalp
‘Desires listesine ekleyin’ Renk simgesi: Beyaz.
Adım 4: Ürün Değişiklikleri İstek Listesi Ürün Ayarlarında, ‘Sepete Ekle düğmesini görüntüle’ seçeneğini devre dışı bırakın. Bu düğme genellikle arzu listesindeki her ürünün hemen yanında görünür. Sepete ürün eklemek için zaten bir alternatif olduğundan (seçerek) bu seçeneği devre dışı bırakacağız. Adım 5: Ürün Hesaplamasındaki Değişiklikler Son Arzu Listesi, Aşağıdaki Ayarları İstek Listesi Ürün Sayma ayarlarına da uygulayın: İstek Listesi simgesi: Kalp Ikon Arzu Listesinin Rengi: Beyaz
Bölüm 3: Ana menüye bir Arzu Listesi sayfası ekleyin Adım 1: Menü eklentinizi açın Arzu Listesi, WordPress web sitenizde otomatik olarak bir Arzu Listesi sayfası oluşturdu. Bu sayfa ana menüye dahil değildir. Bu sayfayı eklemek için görünüm> menülere gidin.
Adım 2: Ana menüye Arzu Listesi sayfasını ekleyin, ardından sayfanızdaki Arzu Listesi sayfasını seçin ve menünüze ekleyin. Bu adımı bitirdikten sonra menünüzü kaydedin. Bölüm 4: Ürünü WooCommerce’a Ekle Adım 1: Yeni bir ürün ekleyin Şimdi WooCommerce Wishists eklentisine gereken tüm değişiklikleri yaptık, web sitemize çeşitli ürünler eklemeye hazırız. Adım 2: Her ürünün ürün adı, açıklama, resim, galeri ve fiyat ekleyin: İsim Bilgi
Kısa açıklama
Resim
Galeri
Fiyat
İstediğiniz kadar çok ürün oluşturun ve her ürün için aynı adımları tekrarlayın. Adım 3: Divi Post Ayarları Her ürün, Divi ürün ayarlarında da tam geniş bir sayfa düzeni gerektirir.
Bölüm 5: Tema ve Tipografi Aksanının Rengini Değiştirme Tema Ayarında Adım 1: Tema Ayarlamasını Açın, Tema Aksan Rengi ve TypeGrahpy’yi değiştirmediyseniz, görünüm> Özelleştirme> Gezinerek Özelleştirici Temasında devam edin ve yapın.
Adım 2: Tema aksanının rengini değiştirin, Genel Ayarlar> Düzen ayarlarını açarak tema aksanlarınızın rengi olarak ‘#2F3854’ seçin.
Bölüm 5: Visual Builder ile İstek Listesi sayfasını değiştirme Adım 1: Varsayılan Arama Sayfasının Varsayım Sayfasının Visual Builder ile açın. Neyse ki, bu sayfayı görsel bir oluşturucu kullanarak değiştirebiliriz. İstek listesi sayfasını görsel bir oluşturucu ile açmadan önce, iletişim sayfasının bazı bölümlerini Divi kütüphanemize kaydedeceğiz, böylece bir sonraki istek listesi sayfasında tekrar kullanabiliriz. Visual Builder ile iletişim sayfasını açarak başlayın.
Adım 2: Kahraman Bölümü’nü ve Aboneliği Divi Kütüphanesine kaydedin, ardından Kahraman Bölümü’nü ve Abonelik bölümünü, aşağıdaki yazdırılan ekranda işaretlenen simgeyi tıklayarak Divi kütüphanenize kaydedin, düzeninizi adlandırın ve ‘Kütüphaneye Kaydet düğmesine tıklayın. .
Adım 3: Visual Builder ile Arzu Listesi sayfasını aç şimdi bu iki bölüm Divi kütüphanemizde var, bir görsel oluşturucu ile istek listesi sayfasına devam edebilir ve açabiliriz. Divi kütüphanesinde depolanan iki parça bu sayfaya gidip sayfanızdaki doğru yere yerleştirirsiniz. Adım 5: Kahramanın dolgusunu hemen sayfada bir arzu listesi yapmak için değiştirin, kahramanlarımızın dolgusunu üst ve alt için ’30px’e indireceğiz. Bölüm 6: CSS ile Ürün Düğmesi ve Sayfasını Değiştirme Adım 1: Divi Woocommerce ve WooCommerce Wishists tema seçeneklerini açın ve her ikisi de üçüncü taraf eklentileridir. Ne yazık ki, Visual Builder ile ürün düğmesinde ve sayfasında herhangi bir değişiklik yapamayız. Ürün düğmesinin ve sayfanın kozmetik mağaza düzeni paketiyle eşleşmesini sağlamak için birkaç özel CSS kod hattı kullanacağız. Bu CSS kod satırını eklemek için WordPress Dashboard> Divi> tema seçeneklerini açın. Adım 2: Özel CSS kutusuna özel CSS kutusuna CSS kodunu ekleyin ve özel CSS kutusunu bulana kadar aşağıdaki CSS kodunu ekleyin: .Woocommerce div..Product form.cart .button { Arka Plan rengi: #2F3854; Border-Radius: 20px; yazı tipi boyutu: 12px; Metin-Transform: büyük harf;
Sınır: Yok;
Dolgu-sol: 30px;
Dolgu-sağ: 30px;
Dolgu Top: 10 piksel;
Dolgu Alt: 10 piksel;
Beyaz renk;
}
.Single-Product div.product form.cart .button.tinvwl_add_to_wishlist_button, div.product form.cart. tinvwl_add_to_wishlist_button, .wooocommerce ul.products li.producton.
{
Arka plan-rengi: #d18aa8;
Border-Radius: 20px; yazı tipi boyutu: 12px;
Metin-Transform: büyük harf;
Sınır: Yok;
Dolgu-sol: 30px;
Dolgu-sağ: 30px;
Dolgu Top: 10 piksel;
Dolgu Alt: 10 piksel;
Beyaz renk;
}
.WOOCOMMERCE.TINV-WISHLIST Button.button.alt, .WooCommerce Button.Button
{
Arka Plan rengi: #2F3854;
Border-Radius: 20px;
yazı tipi boyutu: 12px;
Metin-Transform: büyük harf;
Sınır: Yok;
Dolgu-sol: 30px;
Dolgu-sağ: 30px;
Dolgu Top: 10 piksel;
Dolgu Alt: 10 piksel;
Beyaz renk;
}
Body.WOOCOMMERCE .WOOCOMMERCE-SABS {
Sınır: Yok;
}
Body.WooCommerce #İçerik-alan div.product .wooocommerce-rabs ul.tabs, body.Woocommerce div.product .wooocommerce-rabs ul.tabs {
Arka plan: Beyaz;
Sınır: Yok;
}
Body.WOOCOMMERCE #Content-Area Div.Product .WOOCOMMERCE-TABS UL.TABS LI {
Arka plan: Beyaz;
Sınır: Yok;
}
.WooCommerce Div.Product .WOOCOMMERCE-TABS UL.TABS :: Önce {
Sınır: Yok;
}
Body.WOOCOMMERCE #Content-Area Div.Product .wooocommerce-rabs ul.tabs li.Active A, body.wooocommerce div.wooocommerce-tabs ul.tabs li.Active a {
Renk: #D18AA8! Önemli;
}
.WooCommerce. Miktar girişi.qty {
Arka plan rengi: Beyaz! Önemli;
Renk: Siyah! Önemli;
}
İşte burada! Bu yazıdaki son zihin, her ziyaretçinin favori ürünü için benzersiz web sitenize ürün arzularının bir listesini nasıl ekleyeceğinizi gösterdik. Bu kullanım durumu, tasarım ekibimizin her hafta sizinle yeni bir düzen paketini paylaştığı Divi girişimimizin bir parçasıdır. Eğer soruların varsa; Aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
