Divi'nin Oto Tamir Düzen Paketi Mağaza Sayfasına Araç Parçaları Arama 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, size Divi'nin Oto Tamir Düzen Paketine araç parçası aramayı nasıl ekleyeceğinizi göstereceğiz. Bu, web sitenizin ziyaretçilerinin tüm mağaza öğelerinizde kolayca gezinmesini sağlar. Marka, model, yıl, motor veya kategoriye göre arama yapma olanağına sahip olacaklar. Ziyaretçiler tam olarak aradıkları ürünü ne kadar kolay bulabilirlerse, bu ziyaretçilerin sayfanıza bakma şansı o kadar yüksek olur.

Gizlice Bakış

Kullanım örneği eğitimine geçmeden önce, sonuca hızlıca bir göz atalım.

Bölüm 1: WooCommerce'i İndirin ve Yükleyin

Adım 1: WooCommerce'i İndirin

Bu öğreticiyi tamamlamak için WooCommerce ile çalışıyoruz. Devam edin ve aşağıdaki sayfaya gidip indirme düğmesine tıklayarak eklentiyi indirin.

2. Adım: Eklentiyi Yükleyin, Etkinleştirin ve Kurun

WooCommerce eklentisini yükleyin, etkinleştirin ve kurulum sürecinden geçin veya şimdilik o kısmı atlayın.

Bölüm 2: WooCommerce Araç Parça Bulucu Eklentisini Satın Alın ve Yükleyin

Adım 1: WooCommerce Araç Parça Bulucu Satın Alın

WooCommerce eklentisinin yanı sıra, aşağıdaki sayfaya giderek satın alabileceğiniz ücretli WooCommerce Araç Parça Bulucu eklentisine de ihtiyacımız olacak.

2. Adım: Eklentiyi Yükleyin ve Etkinleştirin

Yine, eklentiyi yükleyin ve etkinleştirin.

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

Adım 1: Tema Özelleştirici'ye gidin

Şimdi, başlamak için, her düzen paketi için yaptığımız Tema Özelleştirici değişikliklerini yapacağız. Görünüm > Özelleştir'e gidin.

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

Ardından, Genel Ayarlar > Düzen Ayarları'na gidin ve Tema Vurgu Rengi'ni '#f6961b' olarak değiştirin.

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

Genel Ayarlar > Tipografi'ye dönüp aşağıdaki değişiklikleri uygulayarak yazı tipi ailelerini ve gövde bağlantı rengini de değiştirmemiz gerekecek:

• Başlık Yazı Tipi: Montserrat
• Gövde Yazı Tipi: Montserrat
• Gövde Bağlantı Rengi: #f6961b

4. Bölüm: Araç Parçaları Arama ve Sepeti Kenar Çubuğuna Ekle

1. Adım: Widget'lara gidin

Araç parçası aramasını oluşturmanın ilk kısmı, widget'ı kenar çubuğunuza eklemektir. Bu şekilde, insanlar ürünler arasında arama yaparken bile, hemen başka bir arama yapma olanağına sahip olacaklar. Görünüm > Widget'lara giderek başlayın.

2. Adım: Kenar Çubuğundaki Mevcut Widget'ları Kaldırın

Ardından, kenar çubuğunuzdaki mevcut tüm widget'ları kaldırın. Eklemek istediğimiz iki şey araç parçaları arama ve araba.

3. Adım: Araç Parça Bulucuyu Kenar Çubuğuna Ekleyin

Widget'larınızı aşağı kaydırın. Eklentinizi yükleyip etkinleştirdikten sonra, Araç Parça Bulucu widget'larınızda görünecektir. Bunu kenar çubuğunuza ekleyin, dikey görünümü kullanın ve 'yıl' filtresini etkinleştirin. Tercihlerinize bağlı olarak diğer seçenekleri de etkinleştirebilirsiniz.

4. Adım: Sepeti Kenar Çubuğuna Ekle

Sepet widget'ını da bulun ve aynı şekilde kenar çubuğunuza ekleyin.

Bölüm 5: Örnek CSV Dosyasını İndirin, Kendi Dosyanızı Oluşturun ve Yükleyin

1. Adım: "CSV'yi İçe Aktar"a gidin

Kenar çubuğumuzda Araç Parça Bulucu ve Sepet widget'ına sahip olduğumuza göre, web sitenize eklemek istediğiniz farklı terimlere odaklanmaya başlayabiliriz. Bu eklentide bulabileceğiniz dört tür terim vardır:

• Yapmak
• modeli
• Yıl
• Motor

Terimler birbirini takip eder. Önce Make var, ardından Model geliyor, Year ile devam ediyor ve Engine ile bitiyor. Bunların hepsini manuel olarak ekleyebilirsiniz, ancak her şeyi kolaylaştırmak için bu eklenti tam olarak bu bilgileri içeren bir CSV yüklemenize olanak tanır. VPF > CSV'yi İçe Aktar seçeneğine giderek başlayın.

2. Adım: Örneği İndirin

Oradayken, örnek bir CSV indirmesini başlatacak bir bağlantı göreceksiniz. Devam edin ve örneği indirin.

Adım 3: Elektronik Tabloyu Ürünlerinize Göre Değiştirin

Ardından, web sitenizdeki kendi ürünlerinize göre listeyi değiştirmeye başlayın. Öğe ürün sütununu kullanarak bir marka, model, yıl ve motora birden fazla ürün atayabilirsiniz. Bunun için ürün sayfanızın kısa bilgisini kullanın ve ürünlerinizi virgülle ayırın.

4. Adım: Yeni CSV Yükleyin

Son olarak, bu değiştirilmiş CSV'yi tekrar yükleyin. Şartlarınıza bir göz atarsanız, bunların hepsinin eklentinize otomatik olarak eklendiğini ve size çok zaman kazandırdığını göreceksiniz.

Bölüm 6: Yeni Ürünlere Manuel Olarak VPF Şartları Atama

1. Adım: Ürünler Oluşturun

CSV'yi yükledikten sonra yeni ürünler ekliyorsanız, bunlara manuel olarak terimler atayabilirsiniz. Yeni ürünlerinizi oluşturduktan ve genel adımlardan (özellikli bir resim, galeri, açıklama, başlık ve fiyat ekleme gibi) geçtikten sonra, her birini ayrı ayrı açın.

3. Adım: Ürüne VPF Terimi Atayın

Ürün sayfanızın en altına gidin. Oradan ürününüzün hangi marka, model, yıl ve motora ait olduğunu seçebilirsiniz. Yeni ürünlerin her biri için bu adımı tekrarlayın.

Bölüm 7: Mağaza Sayfasına Kısa Kodu Ekle ve Görünümünü Değiştir

1. Adım: Visual Builder ile Mağaza Sayfasını Açın

Tüm ürünleriniz uygun terimlere bağlandıktan sonra, araç parçası aramasını mağaza sayfanıza eklemenin zamanı geldi. Bunu yapmak için önce Visual Builder'ı etkinleştirin.

Adım 2: Tek Sütunlu Satır Ekle

Ardından, sayfanızın ikinci bölümünün başına bir satır içeren bir sütun ekleyin.

Adım 3: Bölümün Üst Dolgusunu Kaldırın

Daha iyi görünen bir sonuç elde etmek için üzerinde çalıştığınız ikinci bölümün üst dolgusunu çıkarın.

Adım 4: Araç Parçaları Arama Kısa Koduyla Sütuna Yeni Metin Modülü Ekleme

Ardından, az önce oluşturduğunuz satıra bir Metin Modülü ekleyin ve aşağıdaki kısa kodu İçerik kutusuna yerleştirin:

[woo_vpf_filter title="Find Vehicle Parts" view="H/V" label_make="Select Make" label_model="Select Model" show_year="true" label_year="Select Year" show_engine="true" label_engine="Select Engine" show_category="true" label_category="Select Category" show_keyword="false" label_keyword="Product Name" show_my_vehicles="" label_search="Search" label_reset_search="Reset Search"]

Bu, araç parçası aramasının sayfanızda görünmesini sağlayacaktır.

Adım 5: Metin Ayarlarını Bağla

Neyse ki Divi'nin yerleşik seçeneklerini kullanarak bu kısa kodda bazı görünüm değişiklikleri yapabiliriz. Yapacağımız ilk şey, aşağıdaki ayarları kullanarak bağlantı metnini değiştirmek:

• Bağlantı Yazı Tipi: Montserrat
• Bağlantı Metni Boyutu: 13px
• Bağlantı Metni Rengi: #1e7bd0

Adım 6: Başlık 2 Metin Ayarları

Otomatik Onarım Düzen Paketi ile eşleşen aşağıdaki ayarları kullanarak başlık 2 metin ayarlarını da değiştireceğiz:

• Başlık 2 Yazı Tipi: Montserrat
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Boyutu: 33px
• Başlık 2 Metin Rengi: #f7a439
• 2 Çizgi Yüksekliği: 2.2em

Adım 7: Boyutlandırma

Ardından, masaüstü için '%100' yerine '%61' genişliğini kullanarak araç parçası aramasının genişliğini küçülteceğiz. Tablet ve telefon için genişlik '%100' kalmalıdır. Bir merkez Modül Hizalaması da kullanın.

Adım 8: Düğme için Özel CSS

Son olarak, düğmelerin Oto Tamir Düzen Paketi ile de eşleşmesini istiyoruz. Ne yazık ki, bu bir üçüncü taraf eklentisi olduğundan, bunu Divi Builder ile değiştiremiyoruz. Bu nedenle, WordPress Kontrol Paneli > Divi > Tema Seçenekleri > Genel sekmesinde aşağı kaydırarak > Özel CSS kutusuna aşağıdaki CSS kodu satırlarını ekleyerek bazı ek CSS kod satırları ekleyeceğiz :

.woo-vpf-field input[type="submit"]
{
border: none;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 10px;
padding-top: 10px;
background: #F7A439;
color: white;
text-transform: uppercase;
font-weight: bold;
border-radius: 2px;
}

Son düşünceler

Bu kullanım örneği blog gönderisinde, Divi'nin Oto Tamir Düzen Paketi mağaza sayfasına araç parçaları aramasını 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!