Divi's Cosmetics Shop Düzen Paketine Ürün İstek Listeleri Nasıl Eklenir

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi yerleşim paketi sunuyoruz. Her düzen paketiyle birlikte, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, Divi'nin yeni Kozmetik Mağazası Düzen Paketini kullanarak çevrimiçi mağazanıza nasıl ürün istek listeleri ekleyeceğinizi göstereceğiz. Online mağazanıza istek listeleri eklemek, ziyaretçilerinizin web sitenizdeki favori ürünlerini takip etmelerine ve bu ürünlerdeki dönüşümleri artırmanıza yardımcı olur. Kozmetik Mağazası Düzen Paketine ek olarak, ücretsiz WooCommerce ve WooCommerce İstek Listeleri eklentilerine de ihtiyacımız olacak.

Gizlice Bakış

Farklı kısımlara ve adımlara geçmeden önce, bu eğitimden bekleyebileceğiniz üç şeye hızlıca bir göz atalım:

• Mağaza sayfanızdaki her ürün için 'İstek Listesine Ekle' düğmeleri
• Her ziyaretçi için benzersiz bir istek listesi sayfası, istek listelerinden ürünleri doğrudan sepetlerine ekleyebilirler.
• Tüm düzen paketiyle eşleşen ve bir 'İstek Listesine Ekle' düğmesini de içeren ürün sayfaları

Bölüm 1: WooCommerce ve WooCommerce İstek Listeleri Eklentisini İndirin ve Etkinleştirin

Adım 1: WooCommerce'i İndirin ve Etkinleştirin

Aşağıdaki sayfaya gidip indirme düğmesine tıklayarak WooCommerce'i indirerek başlayın. Ardından, WordPress Panonuz > Eklentiler > Yeni Ekle > WooCommerce Yükle seçeneğine gidin ve etkinleştirin .

2. Adım: WooCommerce'i kurun

WooCommerce'i web sitenize ilk kez kurarken, kurulumdan geçmeniz gerekecek (veya şimdilik atlayabilirsiniz).

Adım 3: WooCommerce İstek Listelerini İndirin ve Etkinleştirin

Ayrıca WordPress web sitemizde WooCommerce İstek Listeleri eklentisine ihtiyacımız olacak. Yine WordPress Panonuz > Eklentiler > Yeni Ekle > WooCommerce İstek Listeleri eklentisini yükleyin ve etkinleştirin.

Adım 4: WooCommerce İstek Listelerini Ayarlayın

WooCommerce İstek Listeleri eklentisinin de bir kurulumu vardır. Giriş bölümünü atladıktan sonra, Sayfa Düzeninize aşağıdaki ayarları uygulayın:

• Varsayılan İstek Listesi Adı: Seçimin Kopyası
• İstek Listem: Otomatik Olarak Oluştur

Bir sonraki adım olan düğme ayarlarına geçin ve düğme konumunu değiştirin ve ihtiyaçlarınıza göre kopyalayın.

İşleme adımında, ürünlerin otomatik olarak mı yoksa manuel olarak mı kaldırılmasını istediğinizi seçebilirsiniz. Ziyaretçilerin istedikleri zaman öğeleri kaldırmalarına izin verecekseniz, 'Manuel'i seçin.

Son olarak, ziyaretçileriniz de istek listelerini sosyal ağlarında paylaşabilecekler. Saymasını istediğiniz sosyal ağı etkinleştirebilir veya devre dışı bırakabilirsiniz.

Bölüm 2: WooCommerce İstek Listeleri Eklenti Ayarları

1. Adım: Eklenti Ayarlarına gidin

WordPress Dashboard > TI İstek Listesi > Genel Ayarlar'a giderek WooCommerce İstek Listeleri eklentisinde bazı ek ayar değişiklikleri yapmamız gerekecek.

2. Adım: Ürün Sayfası Düğme Değişiklikleri

'Ürün Sayfası Düğme Ayarları' ile karşılaşana kadar aşağı kaydırın ve aşağıdaki değişiklikleri ona uygulayın:

• Düğme Türü: Düğme
• 'İstek Listesine Ekle' Simgesi: Kalp
• 'İstek Listesine Ekle' Simge Rengi: Beyaz

3. Adım: Ürün Listeleme Düğmesi Değişiklikleri

'Ürün Listeleme Düğmesi Ayarları' bölümüne geçin ve daha önce yapılan ayarların aynısını düğmeye uygulayın.

4. Adım: İstek Listesi Ürün Değişiklikleri

İstek Listesi Ürün Ayarlarında, 'Sepete Ekle Düğmesini Göster' seçeneğini devre dışı bırakın. Bu düğme normalde istek listesindeki ürünlerin her birinin hemen yanında görünür. Ürünleri sepete eklemek için zaten bir alternatif olduğu için (seçerek), bu seçeneği devre dışı bırakacağız.

Adım 5: İstek Listesi Ürünleri Sayaç Değişiklikleri

Son olarak, İstek Listesi Ürün Sayacı ayarlarına da aşağıdaki ayarları uygulayın:

• İstek Listesi Simgesi: Kalp
• İstek Listesi Simge Rengi: Beyaz

Bölüm 3: İstek Listesi Sayfasını Birincil Menüye Ekle

1. Adım: Menülerinize gidin

İstek listesi eklentisi, WordPress web sitenizde otomatik olarak bir istek listesi sayfası oluşturdu. Bu sayfa henüz Birincil Menü'ye dahil edilmemiştir. Bu sayfayı eklemek için Görünüm > Menüler'e gidin.

Adım 2: İstek Listeleri Sayfasını Birincil Menüye Ekleyin

Ardından, sayfalarınızdaki İstek Listesi sayfasını seçin ve menünüze ekleyin. Bu adımı tamamladıktan sonra menünüzü kaydedin.

Bölüm 4: WooCommerce'e Ürün Ekleme

Adım 1: Yeni Ürün Ekle

WooCommerce İstek Listeleri eklentisinde gerekli tüm değişiklikleri yaptığımıza göre, çeşitli ürünleri web sitemize eklemeye hazırız.

2. Adım: Ürün Adı, Açıklama, Resim, Galeri ve Fiyatı Ekleyin

Her ürünün aşağıdakilere ihtiyacı vardır:

• İsim
• Açıklama
• Kısa Açıklama
• resim
• Galeri
• Fiyat

İstediğiniz kadar ürün oluşturun ve her biri için aynı adımı tekrarlayın.

3. Adım: Divi Gönderi Ayarları

Her ürünün Divi Ürün Ayarlarında da Tam Genişlikte Sayfa Düzeni olması gerekir.

Bölüm 5: Tema Özelleştiricide Tema Vurgu Rengini ve Tipografiyi Değiştirin

1. Adım: Tema Özelleştiriciyi Açın

Tema Vurgu Rengini ve Tipografiyi henüz değiştirmediyseniz, bunu Tema Özelleştirici içinde Görünüm > Özelleştir seçeneğine giderek yapın.

2. Adım: Tema Vurgu Rengini Değiştirin

Genel Ayarlar > Düzen Ayarları'na giderek Tema Vurgu Renginiz olarak '#2f3854'ü seçin.

3. Adım: Tipografiyi Değiştirin

Genel Ayarlar > Tipografi > bölümüne geri dönün ve Kozmetik Mağazası Düzen Paketi ile eşleşen aşağıdaki ayarları uygulayın:

• Başlık Satır Yüksekliği: 1,2
• Başlık Yazı Tipi: Yeseva One
• Gövde Yazı Tipi: Montserrat

Bölüm 5: İstek Listesi Sayfasını Visual Builder ile Değiştirin

1. Adım: Visual Builder ile İletişim Sayfasını Açın

İstek listesi sayfası varsayılan olarak biraz sade görünüyor. Neyse ki, Visual Builder'ı kullanarak bu sayfayı değiştirebiliriz. İstek Listesi sayfasını Visual Builder ile açmadan önce, İletişim sayfasının bazı bölümlerini Divi Kitaplığımıza kaydedeceğiz, böylece bunları bir sonraki İstek Listesi sayfasında yeniden kullanabiliriz. Visual Builder ile İletişim sayfasını açarak başlayın.

Adım 2: Kahraman Bölümünü Kaydedin ve Bölüme Abone Olun Divi Kitaplığına

Ardından, aşağıdaki yazdırma ekranında işaretli simgeye tıklayarak, düzeninize bir ad vererek ve 'Kütüphaneye Kaydet' düğmesine tıklayarak hem kahraman bölümünü hem de abone bölümünü Divi Kitaplığınıza kaydedin.

3. Adım: İstek Listeleri Sayfasını Visual Builder ile açın

Artık Divi Kütüphanemizde bu iki bölüme sahip olduğumuza göre, Visual Builder ile İstek Listesi sayfasını açabiliriz.

4. Adım: Kaydedilmiş Bölümleri İstek Listeleri Sayfasına Ekleyin

Divi kitaplığınızdaki kayıtlı her iki bölümü de bu sayfaya ekleyin ve bunları sayfanızda doğru yere yerleştirin.

Adım 5: Kahraman Bölümü Doldurmasını Değiştirin

İstek listesinin hemen sayfada görünmesini sağlamak için, kahraman bölümümüzün dolgusunu hem üst hem de alt için '30 piksel'e düşüreceğiz.

Bölüm 6: Düğmeleri ve Ürün Sayfasını CSS ile Değiştirin

1. Adım: Divi Tema Seçeneklerine gidin

WooCommerce ve WooCommerce İstek Listelerinin ikisi de üçüncü taraf eklentileridir. Visual Builder ile butonlarda ve ürün sayfalarında ne yazık ki herhangi bir değişiklik yapamıyoruz. Düğmelerin ve ürün sayfasının Kozmetik Mağazası Düzen Paketi ile eşleştiğinden emin olmak için bunun yerine bazı özel CSS kod satırları kullanacağız. Bu CSS kod satırlarını eklemek için WordPress Panonuz > Divi > Tema Seçenekleri'ne gidin .

2. Adım: Özel CSS Kutusuna CSS Kodu Ekleyin

Özel CSS kutusuyla karşılaşana kadar Genel sekmesini aşağı kaydırın ve buna aşağıdaki CSS kodunu ekleyin:

.woocommerce div.product form.cart .button {
background-color: #2f3854;
border-radius: 20px;
font-size: 12px;
text-transform: uppercase;
border: none;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
color: white;
}


.single-product div.product form.cart .button.tinvwl_add_to_wishlist_button, div.product form.cart .tinvwl_add_to_wishlist_button, .woocommerce ul.products li.product .button
{

background-color: #d18aa8;
border-radius: 20px;
font-size: 12px;
text-transform: uppercase;
border: none;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
color: white;
}

.woocommerce.tinv-wishlist button.button.alt, .woocommerce button.button
{
background-color: #2f3854;
border-radius: 20px;
font-size: 12px;
text-transform: uppercase;
border: none;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
color: white;

}
body.woocommerce .woocommerce-tabs {
border: none;
}
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs, body.woocommerce div.product .woocommerce-tabs ul.tabs {
background: white;
border: none;
}

body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li {
background: white;
border: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
border: none;
}

body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active a, body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: #d18aa8 !important;
}

.woocommerce .quantity input.qty {
background-color: white !important;
color: black !important;
}

Bu kadar!

Son düşünceler

Bu gönderide, web sitenize her ziyaretçinin favori ürünlerine özgü ürün istek listelerini nasıl ekleyeceğinizi gösterdik. Bu kullanım örneği, tasarım ekibimizin her hafta sizinle yeni bir düzen paketi paylaştığı devam eden Divi girişimimizin bir parçasıdır. Eğer sorunuz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!