Divi WooCommerce Sayfalarınız için Filtrelenmiş Kenar Çubukları Nasıl Oluşturulur

Sayfa oluşturucularla oluşturduğunuz sayfalara filtrelenmiş WooCommerce kenar çubukları eklemeyi denediyseniz, muhtemelen filtrelerin sayfalarınızda görünmediğini fark etmişsinizdir. Hangi sayfa oluşturucuyu kullandığınız önemli değil, filtreler görüntülenmeyecek.

Bunun nedeni, bu widget'ların sayfa oluşturucularla uyumlu olmamasıdır. Bu makalede, Divi Builder veya başka bir sayfa oluşturucu ile oluşturulan sayfalar için filtrelenmiş WooCommerce kenar çubukları oluşturmanın kolay bir yolunu inceleyeceğiz.

Standart WooCommerce Kenar Çubukları

WooCommerce, birkaç filtrelenebilir widget içerir.

• Ürünleri Özelliğe Göre Filtrele
• Ürünleri Fiyata Göre Filtrele
• Ürünleri Derecelendirmeye Göre Filtrele

Bu widget'lar normal WordPress temalarında harika çalışır, ancak sayfa oluşturucularla yapılmış sayfalarda görüntülenmezler.

WordPress Temaları

Filtrelenebilir widget'lar, normal WordPress temalarıyla yapılan sayfalarda iyi çalışır. Yirmi Onyedi onları kenar çubuğunda sorunsuz gösteriyor. Renkleri ve fiyatları içeren WooCommerce örnek verilerini kullanıyorum. Ürünleri Nitelik ve Fiyata Göre Filtrele öne çıkıyor.

İşte, Divi Builder'ı kullanmadan WooCommerce varsayılan mağaza sayfasını gösteren Divi. Tıpkı herhangi bir normal tema gibi filtre widget'larını gösterir.

WordPress Oluşturucular

Oluşturucularla yapılan sayfalar, WooCommerce filtre widget'larını göstermez. Kenar çubuğunun oluşturucu içinde mi yoksa standart kenar çubuğu olarak mı görüntülenmesi herhangi bir fark yaratmaz. İşte birkaç örnek.

Bu sayfa Beaver Builder ile oluşturulmuştur. Kenar çubuğunu içerir, ancak filtreler görüntülenmez. Kenar çubuğunun filtre widget'ları olmadan görüntülendiğini görebilmeniz için bir metin widget'ı ekledim. Sayfayı canlı izlemek için yayınladım ama hiçbir fark yaratmadı.

Bu, Elementor ile inşa edilmiştir. Ürünlerin üstüne kenar çubuğunu ekledim. Metin widget'ını gösterir ancak filtreleri göstermez. Ben de sayfayı canlı izlemek için yayınladım ama bir fark olmadı.

İşte aynı kenar çubuğunu gösteren Divi Builder. Divi Builder eklentisini veya temasını kullanmak aynı sonucu verdi. Sayfayı canlı görüntülemek için yayınladım, ancak filtreler hala görüntülenmedi.

Oluşturucu Kenar Çubuklarında WooCommerce Filtrelerini Gösterme

Neyse ki, ürün sayfasını bir sayfa oluşturucu ile oluşturuyor olsanız bile, kenar çubuğunda bir WooCommerce ürün filtresi göstermenin kolay bir yolu var. WooCommerce Ürün Filtresi adlı bir eklentiye ihtiyacımız var.

Themify – WooCommerce Ürün Filtresi

WooCommerce Ürün Filtresi, standart WooCommerce ürün filtresi widget'larından farklı şekilde çalışan Themify'ın ücretsiz bir eklentisidir. Kolayca birden çok filtre kombinasyonu oluşturun. Sürükle ve bırak form oluşturucu ile formu oluşturun. Dikey veya yatay bir düzene ayarlayın, sütun sayısını seçin ve web sitenize uyacak şekilde biçimlendirin. Canlı arama sonuçlarını gösterir ve birçok seçenek içerir. Kullanımı sezgiseldir ve tüm tema oluşturucularla çalışır.

Yeni Ürün Filtresi Oluşturma

Eklentiyi WordPress deposundan yükleyin. Gösterge Tablosu menüsünde Ürün Filtreleri > Ürün Filtreleri > Yeni Ekle seçeneğine gidin. Filtreyi oluşturmak için ihtiyacınız olan her şeyi içeren bir model alacaksınız. Kısa kodunuzu oluşturmak için ayarları gözden geçirin. Bu tek filtre, üç filtre widget'ına sahip olmak yerine, herhangi bir sayıda widget oluşturmak için birden çok özel filtre türü oluşturabilir.

Filtreyi açıklayan bir başlık verin. Boş alanların, ürün sıralamanın, ürün sayımlarının ve stokta olmayan ürünlerin gösterilip gösterilmeyeceğini dikey veya yatay bir düzen arasından seçin. Sayfalandırmayı gösterip göstermemeyi seçin ve standart, sonsuz kaydırma veya daha fazlasını yükleme arasında seçim yapın.

Sayfa başına ürün sayısını girin. Alan gruplarını değiştirilebilir yapmak isteyip istemediğinizi seçin, sonuca gitmek, sınıflandırmalar için VE veya VEYA mantığı arasında seçim yapın ve sonuçların mevcut sayfada mı yoksa yeni bir sayfada mı gösterilip gösterilmeyeceğini seçin. Yeni bir sayfa seçerseniz, sayfayı listeden seçebilirsiniz. Ayrıca filtrenin yeni sayfada gösterilip gösterilmeyeceğini de seçebilirsiniz.

Seçimlerinizi yaptıktan sonra formu oluşturmanız gerekecek. Bu, filtrenin kenar çubuğunda nasıl görüneceğini belirleyecektir. İstediğiniz form öğelerinin her birini kısa kod oluşturma ekranının altındaki alana sürükleyin.

Her öğe yeni bir özellik kümesi açar. Her biri farklıdır, ancak çoğu benzer seçeneklere sahiptir. İşte Kategori'ye bir bakış.

Bir başlık verin. İsterseniz başlığı gizleyebilirsiniz. Ürün sayılarının, kategori hiyerarşisinin ve alt öğelerin dahil edilip edilmeyeceğini seçin. Filtreyi bir onay kutusu, bağlantılar, radyo düğmeleri, açılır kutu veya çoklu seçim olarak görüntüleyin. Mantığı seçin, sıralama düzenini ayarlayın ve sütun sayısıyla düzeni seçin. Metin renklerini ayarlayın. Ayrıca hangi kategorilerin dahil edileceğini veya hariç tutulacağını da seçebilirsiniz.

Rengi seçerseniz, simgeler, her ürün kategorisinin renklerini ayrı ayrı ayarlayabileceğiniz bir dizi renk seçiciyi açacaktır. Arka plan ve metin için rengi ayarlayın. Seçicilerden renkleri seçebilir veya alanlara onaltılık kodları girebilirsiniz.

Ayrıca alanları istediğiniz sırayla sürükleyip bırakabilirsiniz. Filtreyi oluşturduktan sonra Kaydet'i seçin.

Modu kapatın ve filtrenizin listeye eklendiğini göreceksiniz. Filtre içindeki alanların adını, kısa kodunu ve listesini sağlar. Filtreyi düzenleyebilir, dışa aktarabilir veya silebilirsiniz. Kısa kodu kopyalayın.

Kenar çubuğunuza bir metin widget'ı ekleyin ve kısa kodu yapıştırın.

Filtreler artık inşaatçılar ile oluşturulan mağaza sayfalarında görüntüleniyor. Divi Builder'ın bulunduğu sayfa burada.

İşte Beaver Builder'ı Twenty Sixteen temasında yapılan sayfada gösterilen filtre.

İşte Yirmi Onyedi temasında Elementor içeren filtre. Bu, yatay bir düzen kullanır.

Themify - Divi Düzenleri ile WooCommerce Ürün Filtresini Kullanma

Divi, aralarından seçim yapabileceğiniz çok sayıda mağaza düzenine sahiptir. Bu örnekte, Mobilya Mağazası Mağaza sayfasına bir metin modülü ekledim ve filtre kısa kodunu metin modülüne yerleştirdim. Kenar çubuğu modülünü seçebilirdim, ancak bu örnekte gerçekten önemli değil.

Bu dikey düzendir. Düzenin tasarımına güzel bir şekilde uyuyor.

Düğmeleri düzenin stiline uyacak şekilde ayarladım. Maalesef arama butonunu ayarlayamadım.

İşte yatay düzen. Bu örnek hala dikey filtre için seçtiğim 3/2 sütun düzenini kullanıyor.

Filtreler üzerine gelindiğinde açılır. Duyarlıdır, bu nedenle sütuna sığacak şekilde dikey olarak görüntülenir.

Bunun için filtreyi mağaza modülünün altına yerleştirdim.

İşte mağaza modülünün üstündeki filtre.

Kısa kodu bir metin modülü içinde veya bir kenar çubuğu içinde kullansanız da, Divi modülünün Tasarım sekmesini kullanarak biraz stil ekleyebilirsiniz. Bu, modülün metnini şekillendirerek etiket metnine stil verebileceğiniz anlamına gelir. Bu örnekte, metni kırmızıya ayarladım, boyutu büyüttüm ve tamamı büyük harf yaptım.

WooCommerce Ürünlerini Filtreleme

Aramayı gerçekleştirmek için kullanıcı düğmeleri tıklar, kutuları işaretler ve aradıklarını filtrelemek için kaydırıcıyı kaydırır. Ayrıca bir başlık da girebilirler. Hazır olduklarında, arama düğmesini tıklamaları yeterlidir.

Arama Sonuçları

Sonuçlar daha sonra ayarlarda ayarladığınız şekilde görüntülenecektir. Bunun için, onları sayfanın altında gösterecek şekilde ayarladım. Otomatik olarak sonuçlara kaydırır ve kullanıcıya bir sıralama özelliği sunar.

Yeni bir sayfada açılacak şekilde ayarlarsanız, sonuçları o sayfanın altına yerleştirir. Bu örnekte, Mobilya Mağazası Mağazası sayfasındaki başlığı kullanarak bir sayfa oluşturdum. Sıralama seçeneklerini göstermek için sıralama özelliğini açtım.

Biten Düşünceler

Divi Builder ile yapılan sayfalar için filtrelenmiş WooCommerce kenar çubuklarının nasıl oluşturulacağına bakışımız bu. Eklenti sezgiseldir ve WooCommerce ürünlerine birçok filtreleme özelliği ekler. İstediğiniz kadar filtre oluşturabilir ve istediğiniz sayfaya yerleştirebilirsiniz. Hatta onları Divi'nin şekillendirme özellikleriyle şekillendirebilirsiniz. Kısa kod olduğu için bunları kenar çubukları veya modüller içinde kullanabilirsiniz.

Sonuçların nasıl görüntülendiği üzerinde daha fazla kontrol sahibi olmak istiyorum. Örneğin, sonucun görüneceği yere bir kısa kod yerleştirmek faydalı olacaktır. Bu, sonuçların alttan ziyade sayfanın herhangi bir yerine yerleştirilmesine izin verir. Bu, özel altbilgilere, sayfa içinde bir sonuç alanına vb. izin verir. Ayrıca birkaç stil seçeneği daha istiyorum. Temelde, arama düğmesini stil istiyorum.

Themify – WooCommerce Ürün Filtresi, Divi Builder sayfalarınıza ürün filtresi eklemek için ücretsiz bir eklenti istiyorsanız harika bir seçimdir.

Senden duymak istiyoruz. Themify – WooCommerce Ürün Filtresi eklentisini Divi Builder ile yapılan mağaza sayfalarıyla denediniz mi? Yorumlarda deneyiminizi bize bildirin.

Max Griboedov / Shutterstock.com aracılığıyla Öne Çıkan Görsel