WooCommerce'te Ürünlerin Üstünde Yatay Ürün Filtresi: Sütunlar ve Satırlar

Kenar çubuğundaki bir filtre mağaza genişliğinin üçte birini kaplar ve telefonlarda ürünleri sayfanın çok aşağısına iter. WooCommerce'te ürünlerin üstünde yatay bir ürün filtresi, ızgaraya tam genişlik verir ve her seçeneği tek bakışta gösterir: bir açılır liste çubuğu veya iki ila dört sütunlu filtre bölümleri. HUSKY'de ayrı bir "yatay mod" yoktur. Yerleşim iki şeyden gelir: filtrenin yazdırıldığı yerin genişliği ve bloklarının CSS'i. Aşağıda filtreyi ürünlerin üstüne yerleştirmenin üç yolunu, yerleşik sütun düzenlerini, tek satır için CSS'i ve olağan yerleşim sorunlarının çözümlerini bulacaksınız.

Yerleşimi filtrenin yerleştirildiği yer belirler

Her filtre bölümü (kategoriler, renk, beden, fiyat) woof_container sınıfına sahip bir bloktur. Kenar çubuğu widget'ında bloklar, widget dar olduğu için üst üste dizilir. Geniş bir alanda yazdırıldığında aynı bloklar yan yana durabilir ve eklenti, onları sütunlara dizen sınıflarla birlikte gelir. Filtreyi ürünlerin üstüne almanın üç yolu vardır:

Ürünlerin üstündeki otomatik filtre

1. WooCommerce → Ayarlar → Ürün Filtresi → Seçenekler (Options) bölümüne gidin ve Filtreyi otomatik yerleştir (Set filter automatically) ayarını Evet (Yes) yapın; telefonların farklı bir filtre alması gerekiyorsa Evet, ama yalnızca masaüstü için (Yes, but only for desktop) yapın. Kaydedin.
2. Sayfayı yeniden yükleyin ve Tasarım (Design) sekmesini açın. Burada iki seçenek yalnızca ilk adım kaydedildikten sonra belirir: Otomatik filtreyi varsayılan olarak gizle (Hide auto filter by default) ve Otomatik filtre için görünümler (Skins for the auto filter).
3. Otomatik filtreyi varsayılan olarak gizle (Hide auto filter by default) ayarını Hayır (No) yapın. Varsayılan olan Evet (Yes) ile ziyaretçiler yalnızca bir aç/kapat düğmesi görür ve filtre ürünlerin üzerinde bir panel olarak açılır. Bu da geçerli bir seçimdir; düğme Otomatik filtre kapat/aç görseli (Auto filter close/open image) ve Otomatik filtre kapat/aç metni (Auto filter close/open text) ile biçimlendirilir. Ekranın kenarından kayarak giren bir panel için off-canvas ürün filtresine bakın.
4. Bir görünüm seçin: Düz beyaz, Düz gri veya Düz koyu; 1, 2, 3 ya da 4 sütunlu. Varsayılan (Default), satır başına üç blok olan sade bir görünümdür.
5. Sayfada iki filtre görünmesin diye HUSKY widget'ını mağaza kenar çubuğundan kaldırın ve temada mağazayı tam genişlikli bir düzene geçirin. 4 sütunlu görünümler bu nedenle "kenar çubuğu olmadan" diye etiketlenmiştir: en az 150 piksellik dört blok bir kenar çubuğunun yanına sığmaz.

Arka planda eklenti, WooCommerce'in woocommerce_before_shop_loop eylemine 2 önceliğiyle, bildirimlerden, sonuç sayısından ve sıralama açılır listesinden önce [woof sid="flat_grey woof_auto_3_columns" ...] yazdırır. Bu eylemi kullanmanın iki sonucu vardır:

• Tema veya sayfa oluşturucu şablonu bu eylemi çalıştırmalıdır. Klasik temalar ve WooCommerce'in kendi arşiv şablonu çalıştırır; birçok oluşturucu arşiv şablonu ve özel ürün ızgarası çalıştırmaz ve bu durumda hiçbir şey görünmez. O zaman kısa kodu kullanın.
• Bir filtre birleşimi hiçbir şey bulamadığında WooCommerce'in arşiv şablonu woocommerce_before_shop_loop yerine woocommerce_no_products_found eylemini çalıştırır. Sayfa yeniden yüklendikten sonra otomatik filtre ürünlerle birlikte kaybolur ve ziyaretçi, seçimi değiştirme imkânı olmadan yalnızca "ürün bulunamadı" mesajını görür. AJAX modunda form sayfada kalır. Sonraki bölümdeki kısa kod parçası bu durumu ele alır.

Sütunlarda bir kısa kod filtresi

[woof] kısa kodunun sid özniteliği, filtre formunda CSS sınıflarına dönüşür. sid="flat_grey woof_auto_4_columns", gri renkleri veren woof_sid_flat_grey sınıfını ve blokları dört sütuna yerleştiren woof_auto_4_columns sınıfını yazdırır. Eklentinin stil dosyasındaki sütun sınıfları:

Her blok, en az 150 piksel genişliğe sahip satır içi bir bloktur; bu yüzden dar ekranlarda bloklar kendiliğinden daha az sütuna kayar. İlk kelimenin bir görünüm olması gerekmez: [woof sid="topbar woof_auto_3_columns"] eklentinin nötr görünümünü korur ve kendi CSS'iniz için woof_sid_topbar sınıfını verir.

Sütunlar yer ister. Bir widget alanı yalnızca kenar çubuğu kadar geniştir; bu yüzden kısa kodu tam genişlikli bir yere koyun: tam genişlikli bir Elementor veya Divi bölümündeki Kısa kod widget'ı, [products] veya [woof_products] üzerindeki bir sayfa (bkz. özel sayfadaki filtre) ya da mağaza şablonu. Filtreyi otomatik yerleştir (Set filter automatically) olmadan filtreyi mağaza ve ürün arşivi sayfalarında ürünlerin üstünde yazdırmak için, onu eklentinin kullandığı eyleme bağlayın:

/*
 * HUSKY: filter in columns above the products on the shop and product archives.
 * Child theme functions.php or a code snippets plugin.
 * Keep "Set filter automatically" = No, otherwise the page shows two filters.
 */
function my_husky_top_filter() {
    if (is_shop() || is_product_taxonomy()) {
        echo do_shortcode('[woof sid="flat_grey woof_auto_4_columns"]');
    }
}
add_action('woocommerce_before_shop_loop', 'my_husky_top_filter', 1);

// WooCommerce skips woocommerce_before_shop_loop when nothing is found:
// keep the filter on the "no products" page too.
add_action('woocommerce_no_products_found', 'my_husky_top_filter', 5);

is_product_taxonomy() kategori, etiket ve nitelik arşivlerini kapsar. 1 önceliği önemlidir: Mağazayı AJAX'a çevirmeyi dene (Try to ajaxify the shop) açıkken eklenti, AJAX'ın değiştirdiği alanı aynı eylemin 2 önceliğinde açar ve bu noktadan sonra yazdırılan bir filtre onun içinde kalır ve ilk filtrelemeden sonra kaybolur. Bir sınırlama: telefonlarda filtreyi bir Filtreyi aç (Open filter) düğmesiyle değiştiren mobil mod, 3.4.6 sürümünde sid değeri iki kelimeli bir formu bulamaz. Mobil moda ihtiyacınız varsa forma tek kelimelik bir sid verin ve yerleşimi sonraki bölümdeki CSS ile oluşturun; ayrıntıları mobil filtre rehberi açıklar.

[woof_front_builder] kısa kodu, kod gerektirmeyen alternatiftir. Sayfanın kendisinde bir filtre formu oluşturur ve Yerleşim (Layout) seçenekleri arasında Varsayılan filtre bölümü genişliği (Default filter section width) bulunur: %25 satır başına dört bölüm, %50 iki bölüm verir. Her bölüm bunu kendi Bölüm genişliği (Section width) ayarıyla geçersiz kılabilir. Ürün ızgarasının üstüne filtre ekleme SSS bölümü, böyle bir formu mağaza ürünlerinin üstünde nasıl yazdıracağınızı gösterir.

Tüm filtreler tek satırda

Sütunlar onay kutusu listelerine uygundur. İnce bir çubuk için Yapı (Structure) sekmesinde bölümleri kompakt görünüm türlerine geçirin: Açılır liste (Drop-down), Çoklu açılır liste (Multi drop-down), Açılır listede radyo/onay kutusu (Radio/Checkbox in drop-down) (açılır liste panelinin içinde onay kutuları, bkz. eklenti sayfası) veya kategoriler için Hiyerarşik açılır liste (Hierarchy drop-down). Bir açılır liste, ilk seçenek olarak filtrenin adını gösterir; bu yüzden her bölümün ek seçeneklerinde (dişli simgesi) Başlık etiketini göster (Show title label) ile blok başlıklarını kapatıp bir satırlık yükseklik kazanabilirsiniz. Ardından blokları flexbox ile dizin. [woof sid="topbar"] ile yerleştirilen bir form için:

/*
 * HUSKY: filter sections in one row above the products.
 * Advanced → Code → Custom CSS code, or the theme's Additional CSS.
 */
.woof_sid_topbar .woof_redraw_zone {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.woof_sid_topbar .woof_container {
    flex: 1 1 180px;      /* share the row, never narrower than 180px */
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;    /* drop-down panels must not be cut off */
}
.woof_sid_topbar .woof_submit_search_form_container {
    flex: 0 0 auto;       /* Filter and Reset buttons at the end of the row */
    margin: 0;
}
.woof_sid_topbar .chosen-container,
.woof_sid_topbar .select2-container {
    width: 100% !important;
}
@media (max-width: 767px) {
    .woof_sid_topbar .woof_container,
    .woof_sid_topbar .woof_submit_search_form_container {
        flex-basis: 100%;
    }
}

1200 piksellik bir içerik alanında tek satıra beş veya altı açılır liste sığar; fazlası sıkıştırılmak yerine ikinci bir satıra kayar. Filtrele (Filter) düğmesi yalnızca Otomatik gönderim (Autosubmit) kapalıyken vardır, Sıfırla (Reset) ise yalnızca bir şey seçildikten sonra; bu yüzden düğme bloğu çoğu zaman boştur ve satırda yer kaplamaz. 768 pikselin altında her blok tam genişliği alır. Aynı kuralları otomatik filtreye uygulamak için .woof_sid_topbar yerine görünümünün sınıfını yazın, örneğin .woof_sid_flat_grey; Varsayılan (Default) görünüm için .woof_sid_auto_shortcode.

Tek bir filtrenin terimleri satırlarda veya sütunlarda

Uzun bir beden veya marka sütunu, sorunun diğer yarısıdır. Onay kutuları ve radyo düğmeleri için Yapı (Structure) içinde bölümün ek seçeneklerini açın ve Öğeleri satırda göster (Display items in a row) ayarını Evet (Yes) yapın: öğeler yan yana akar ve alt satıra kayar. Bu, alt kategorisi olmayan terimler için geçerlidir; alt öğeleri olan bir üst terim kendi satırında kalır, böylece alt kategorileri altında açılabilir.

Sabit sayıda sütun için bir bölümün listesinde CSS ızgarası kullanın:

/* Sizes in three equal columns. Replace pa_size with your taxonomy slug. */
.woof .woof_container_pa_size ul.woof_list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 12px;
}

Her bölüm, woof_container_ artı taksonomi slug'ından oluşan sınıfı taşır: woof_container_product_cat, woof_container_pa_color, woof_container_pa_size. Alt kategori listelerinin kendi sınıfı vardır; bu yüzden ızgara yalnızca ilk düzeye uygulanır. Uzun bir listeyi bunun yerine kısa tutmak için aynı ek seçeneklerde Bloğun azami yüksekliği (Max height of the block) ayarını yapın; liste bunun üzerine kendi kaydırma çubuğunu alır. Daha fazla seçici filtreyi CSS ile biçimlendirme rehberindedir.

Bozulan bir yatay yerleşimi düzeltme

• Önce sınıf adlarını bulun. Gelişmiş (Advanced) → Seçenekler (Options) → Blok yardımcı düğmesini göster (Show blocks helper button) ayarını Evet (Yes) yapın. Yöneticiler bundan sonra sid değeri olan her filtrenin üstünde bir blok yardımcısını göster (show blocks helper) bağlantısı görür; tıklandığında her bölüm, woof_container_pa_color gibi sınıfıyla etiketlenir ve formun sınıfı yazdırılır. Yardımcı düğme SSS bölümünün anlattığı gibi, sonra bunu kapatın.
• Bloklar hâlâ üst üste diziliyor. Kapsayıcı çok dardır (bir widget alanı veya dar bir oluşturucu sütunu) ya da eski özel CSS, .woof_container üzerinde genişlik veya float ayarlıyordur. Yeni kurallar eklemeden önce önceki denemeleri kaldırın: float tabanlı ve flex tabanlı kuralları karıştırmak öngörülemeyen sonuçlar verir.
• Başlıkları beyaz kutular kaplıyor, listeler kesiliyor. Varsayılan (Default) otomatik görünüm, her bloğu kendi kaydırma çubuğuyla 250 piksel yükseklikle sınırlar ve temalar çoğu zaman içerik alanındaki bloklara float, arka plan veya sabit yükseklik ekler. Bunları formunuz için sıfırlayın, örneğin .woof_sid_auto_shortcode .woof_container { float: none; max-height: none; overflow: visible; }, ya da bir Düz görünüme geçin.
• Açılır liste paneli ürünlerin arkasında açılıyor. Forma kendi yığın düzeyini verin: .woof_sid_topbar { position: relative; z-index: 20; }.
• Oluşturucu yerleşimleri. Elementor veya Divi'de kısa kodu, ürünlerin üstündeki tam genişlikli bir bölümde bir Kısa kod widget'ına veya modülüne yerleştirin. Izgaranın kendisi filtrenin kontrol edebileceği bir ızgara olmalıdır; bkz. Elementor döngü ızgaralarını filtreleme.
• CSS düzenlemesinden sonra hiçbir şey değişmiyor. Sayfa önbelleğini ve birleştirilmiş veya iyileştirilmiş tüm CSS'i temizleyin, ardından oturumu kapatmış olarak test edin.

Demo sitede kullanılan CSS, filtre yerleşimlerine dair daha fazla hazır örnek içerir.

Kontrol listesi

• Sayfa başına tek filtre formu: kenar çubuğu widget'ı kaldırılmış veya kısa kod kullanılıyorsa Filtreyi otomatik yerleştir (Set filter automatically) kapalı.
• Çubuğun her zaman görünür olması isteniyorsa Otomatik filtreyi varsayılan olarak gizle (Hide auto filter by default) ayarı Hayır (No).
• Filtre tam genişlikli bir kapsayıcıda; dört sütun için mağazada kenar çubuğu yok.
• Sütunlar, sid içindeki bir woof_auto_N_columns sınıfından; mobil mod gerekiyorsa tek kelimelik bir sid artı CSS.
• Tek satırlık bir çubuk için açılır liste görünüm türleri; uzun onay kutusu listeleri için Öğeleri satırda göster (Display items in a row) veya bir ızgara.
• Önbellekler temizlenmiş; sayfa oturum kapalıyken masaüstünde ve telefonda kontrol edilmiş.

Yerleşim hâlâ bozuksa, sayfa bağlantısı ve eklediğiniz CSS ile birlikte HUSKY destek forumunda bir konu açın, biz de bakalım.