WooCommerce Off-Canvas Ürün Filtresi: Kayan Panel Kurulumu ve Çözümler

4 November 2026

WooCommerce off-canvas ürün filtresi mağaza sayfasını temiz tutar: filtre ekranın kenarındaki bir panelde bekler ve ziyaretçi bir Filtrele (Filter) sekmesine ya da düğmesine dokunduğunda kayarak içeri girer. HUSKY bunu Slideout eklentisi olarak yerleşik sunar; bu yüzden tema çekmecesine ya da açılır pencere eklentisine gerek kalmaz. Bu rehber panelin nasıl çalıştığını, onu mağaza ve kategori sayfalarıyla nasıl sınırlayacağınızı, kendi düğmenizle nasıl açıp filtrelemeden sonra nasıl kapatacağınızı ve kaydırılmayan, üst bilginin arkasında kalan ya da hiç görünmeyen bir panelin nasıl düzeltileceğini açıklar.

Kayan panel, mobil mod veya tema çekmecesi

HUSKY, filtreyi gerekene kadar gözden uzak tutmanın üç yolunu sunar. Sayfa başına birini seçin; hepsini birleştirmek iki filtreye ya da hiçbir şey açamayan bir düğmeye yol açar.

Slideout (Gelişmiş (Advanced) → Slideout veya [woof_slideout] kısa kodu): pencerenin sol, sağ, üst ya da alt kenarına sabitlenmiş, onu açan bir sekmesi olan panel. Bilgisayarlarda ve telefonlarda çalışır. Bu rehberin konusu budur.
Mobil mod: yalnızca telefonlarda filtre, onu tam ekran panel olarak açan bir Filtreyi aç (Open filter) düğmesiyle değiştirilir. Bkz. mobil filtre rehberi.
Otomatik filtreyi varsayılan olarak gizle (Hide auto filter by default) = Evet olan otomatik filtre: ürünlerin üstünde, filtreyi ızgaranın üzerine açan bir düğme. Bkz. ürünlerin üstündeki yatay filtre.

Temadan veya bir sayfa oluşturucudan gelen bir çekmece ya da off-canvas kenar çubuğu da, yalnızca sayfa yüklendiğinde zaten sayfada bulunan filtre HTML'ini gösterip gizlediği sürece çalışır. Çekmece içeriğini sonradan eklerse form hiçbir zaman başlatılmaz ve tıklamalar bir şey yapmaz; bu durumu nasıl tanıyacağınızı Elementor rehberi gösterir. Bu tür çekmeceler, AJAX filtrelemeden sonra kapanmak için kendi koduna da ihtiyaç duyar; bu mobil ve masaüstü için farklı filtreler bölümünde anlatılır.

Kayan paneli açın

Slideout yerleşik bir eklentidir ve her zaman etkindir. Ayarları WooCommerce → Ayarlar → Ürün Filtresi → Gelişmiş (Advanced) → Slideout bölümündedir:

Genel görünürlük (Global visibility): Göster (Show) paneli WooCommerce sayfalarına otomatik ekler.
Düğme türü (Button as): Görsel olarak (as Image), Düğme görsel boyutu (Button image size) ile ayarlanan boyutta Slideout görseli (Slideout image) kullanır; Metin olarak (as Text) sekmede Slideout metni (Slideout text) gösterir.
Konum (Position): panelin kaydığı kenar. Kaydırma (Offset), panelin pencerenin üstünden (sol ve sağ konumlar) veya solundan (üst ve alt konumlar) uzaklığıdır.
Eylem (Action): Tıklama (Click) veya Üzerine gelme (Hover). Telefonlarda üzerine gelme yoktur; bu yüzden panel onlar için tasarlanmışsa Tıklama (Click) kullanın.
Kapsayıcı boyutu (Container size): panelin genişliği ve yüksekliği. Genel görünürlük (Global visibility) açıkken ve genişlik belirtilmemişse panel 350 piksel genişliğindedir.
Başlatmadan sonraki durum (State after init): Hayır (No), sayfa yüklendiğinde paneli kapalı tutar.
Mobil davranış (Mobile behavior): Tüm cihazlarda göster (Show on all devices), Yalnızca mobilde göster (Show only on mobile) veya Yalnızca masaüstünde göster (Show only on desktop).

Genel görünürlük (Global visibility) açıkken eklenti sayfa altbilgisine [woof_slideout ...][woof][/woof_slideout] yazdırır: pencerenin dışına park edilmiş, position: fixed olan bir panelin içinde sıradan bir filtre formu. Sekmeye tıklamak onu içeri kaydırır, panelin dışında herhangi bir yere tıklamak onu geri kaydırır; panelin içinde kapatma düğmesi yoktur. Form baştan sayfanın parçası olduğu için her filtre türü, AJAX modu dahil, kenar çubuğundaki gibi çalışır.

3.4.6 sürümünde iki ayrıntı var. Birincisi, seçenekteki "mağaza sayfaları", WooCommerce'in is_woocommerce() işlevinin doğru döndüğü her sayfa demektir ve buna tek ürün sayfaları da dahildir. İkincisi, genel panel sekme metnini kısa koda tırnaksız yazar; bu yüzden birkaç kelimelik bir metin ilk boşlukta kesilir: "Show filters" "Show" olur. Orada tek kelimelik bir metin kullanın ya da tırnak içine alabileceğiniz aşağıdaki kısa kodu kullanın. Mobil davranış (Mobile behavior) sunucuda tarayıcı kimliğinden belirlenir; bu yüzden bir sayfa önbelleği, mobil rehberde açıklandığı gibi telefonlar ve bilgisayarlar için ayrı kopyalar tutmalıdır.

Paneli yalnızca istediğiniz yerde gösterin

Sayfalar üzerinde denetim için Genel görünürlük (Global visibility) ayarını Gizle (Hide) yapın ve kısa kodu kendiniz yerleştirin. Slideout sekmesinin altındaki Kısa kod oluştur (Generate shortcode) düğmesi, geçerli seçeneklerden bir kısa kod yazar; bu değerler genel olmasın istiyorsanız kaydetmek yerine sayfayı yeniden yükleyin ve boşluk içeren değerleri tırnak içine alın. Tipik bir kısa kod:

[woof_slideout location="left" image="null" text="Filters" width="320px" onloadslideout="false"]

image="null" sekmeyi bir metin sekmesine çevirir. İçerik olmadan kısa kod, iç [woof] kısa kodunu kendisi oluşturur ve ona slideout ayarı olmayan her özniteliği iletir: tax_only, by_only, sid, btn_position, redirect ve [woof] özniteliklerinin geri kalanı. [woof_slideout] ile [/woof_slideout] arasında içerik varsa bunun yerine o içerik gösterilir; böylece bir başlık ve özel bir form mümkündür: [woof_slideout text="Filters" image="null"]<h3>Filter products</h3>[woof btn_position="t"][/woof_slideout]. Bu biçimde [woof] öznitelikleri iç kısa koda yazılır.

Kısa kod sayfa içeriğinde veya bir altbilgi widget alanında durabilir, ancak temanın telefonlarda gizlediği bir kenar çubuğunda duramaz: panel o kenar çubuğunun içindedir ve onunla birlikte kaybolur. Paneli yalnızca mağaza ve ürün arşivi sayfalarında göstermek için temadan yazdırın:

/*
 * HUSKY: slide-out filter on the shop and product archive pages,
 * not on single products. Set Advanced → Slideout → Global visibility = Hide.
 * Child theme functions.php or a code snippets plugin.
 */
add_action('wp_footer', function () {
    if (!is_shop() && !is_product_taxonomy()) {
        return;
    }
    echo do_shortcode('[woof_slideout location="left" image="null" text="Filters" width="320px" onloadslideout="false"]');
}, 5);

Önceliği 10'un altında tutun. Eklenti, panelin genişlik ve yükseklik stillerini kendi altbilgi geri çağrısında 10 önceliğiyle yazar ve bunun için o çalışmadan önce yazdırılan son paneli kullanır; daha sonra yazdırılan bir panel boyut almaz. Kategoriye göre farklı bir filtre için is_product_category('shoes') koşulunu sınayın ve her panele kendi tax_only="pa_size,pa_color" değerini verin. Paneli blog veya ana sayfalarda da sunmak için redirect="https://example.com/shop/" ekleyin; böylece sonuçlar mağaza sayfasında açılır.

Sayfa başına tek panel kullanın. Slideout betiği yalnızca bulduğu ilk paneli hazırlar; ikincisi, örneğin genel panel artı bir kısa kod paneli, onu pencerenin dışına park eden başlangıç stilini korur ve sekmesi görünmez ya da yanlış yerde olur.

Kendi düğmenizle açın ve filtrelemeden sonra kapatın

Panel üç olaya yanıt verir: open, close ve toggle. Özel bir düğme için bir ayrıntı önemlidir: panel kendi dışındaki herhangi bir tıklamada kapanır ve üst bilgideki bir düğme dışarıdadır. Tıklama olayı belgeye doğru yayılmaya devam ederse panel aynı anda açılır ve tekrar kapanır. Aşağıdaki işleyici bunu durdurur ve ayrıca eklentinin woof_ajax_done olayını kullanarak her AJAX filtrelemeden sonra paneli kapatır:

/*
 * HUSKY slide-out panel: custom open/close buttons, close after AJAX filtering.
 * Child theme functions.php or a code snippets plugin.
 * Buttons: <a href="#" class="open-husky-filter">Filter</a>
 *          <a href="#" class="close-husky-filter">Close</a> (inside the panel)
 */
add_action('wp_footer', function () {
    ?>
    <script>
    jQuery(function ($) {
        $(document.body).on('click', '.open-husky-filter', function (e) {
            e.preventDefault();   // a link with href="#" would jump to the top
            e.stopPropagation();  // otherwise the outside-click rule closes it at once
            $('.woof-slide-out-div').trigger('toggle');
        });
        $(document.body).on('click', '.close-husky-filter', function (e) {
            e.preventDefault();
            $('.woof-slide-out-div').trigger('close');
        });
        $(document).on('woof_ajax_done', function () {
            $('.woof-slide-out-div').trigger('close');
        });
    });
    </script>
    <?php
}, 100);

Yalnızca kendi düğmenizi kullanmak için sekmeyi .woof-slide-out-div .woof-handle { display: none; } ile gizleyin. Kapatma bağlantısını, kısa kod içeriği aracılığıyla, [woof] öncesinde panele yerleştirin.

Filtrelemeden sonra kapatmak bir Filtrele (Filter) düğmesine uygundur. Otomatik gönderim (Autosubmit) açıkken her tıklama filtreler ve panel her seçimden sonra kapanır; ziyaretçiler tüm seçimlerini yapsın ve panel bir kez kapansın diye Seçenekler (Options) sekmesinde Otomatik gönderim (Autosubmit) ayarını Hayır (No) yapın. AJAX olmadan sayfa filtrelemeden sonra yeniden yüklenir ve Başlatmadan sonraki durum (State after init) Hayır (No) ise panel kapalı başlar. Eklenti ayarları ilk kez kaydedilene kadar, onloadslideout içermeyen bir kısa kod her sayfa yüklemesinde açılır; örnekler bundan bağımsız olmak için onloadslideout="false" ayarlar.

Sekme, renkler, boyut ve kaydırma

Panelin kendi betiği birkaç değeri satır içi ayarlar; bu yüzden bazı kurallar !important gerektirir ve stil dosyası altbilgide, çoğu diğerinden sonra yüklenir; bu yüzden bazı seçiciler body ile başlar:

/* HUSKY slide-out panel. Advanced → Code → Custom CSS code,
   or the theme's Additional CSS. */

/* Tab colours; an image tab gets its background inline */
.woof-slide-out-div .woof-handle {
    background-color: #f5c200 !important;
    color: #000;
}

/* Left or right position: move only the tab down, not the panel */
.woof-slide-out-div .woof-handle {
    top: 40px !important;
}

/* No transparency, above sticky headers and cookie bars */
body .woof-slide-out-div {
    opacity: 1 !important;
    z-index: 100000;
}

/* Scroll inside the panel when the filter is longer than the screen */
.woof-slide-out-div .woof-slide-content {
    max-height: calc(100vh - 140px); /* 100px offset + room at the bottom */
    overflow-y: auto;
}

/* Dim the page while the panel is open; a click on the dark area closes it */
.woof-slide-out-div.ui-slideouttab-open {
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
}

Kaydırma kuralının neden gerekli olduğu: sayfa yüklendiğinde betik, panel çok yüksek ya da çok genişse onu ekrana sığacak şekilde küçültür, ancak yalnızca bir kez. Sonradan açılan bölümler, bir "daha fazla göster" listesi veya döndürülmüş bir telefon, içeriği pencereden uzun yapar ve alt kısma erişilemez. overflow-y: auto ile birlikte bir max-height, her durumda bir kaydırma çubuğu tutar. Çıkarılan değeri Kaydırma (Offset) değeriniz artı biraz boşluk olarak ayarlayın.

Panel varsayılan olarak yüzde 95 opaktır; bu da telefonlarda ürünlerin içinden görünmesine yol açar. Yığın düzeyi 9999'dur; daha yüksek bir düzeye sahip yapışkan bir üst bilgi, tema katmanı veya çerez bannerı onu örter ya da tıklamalarını yakalar; bu, tıklanamayan bir filtre gibi görünür. Paneli yükseltmek yardımcı olmazsa, üstte duran öğeyi inceleyin ve z-index değerini düşürün.

Panel çalışmadığında

Sekme telefonlarda yok. Kısa kod, temanın küçük ekranlarda gizlediği bir kenar çubuğundadır, Mobil davranış (Mobile behavior) telefonları dışarıda bırakıyordur ya da bir sayfa önbelleği masaüstü kopyasını sunuyordur.
Panel ürün sayfalarında veya her yerde. Genel görünürlük (Global visibility) Göster (Show) durumundadır; onu Gizle (Hide) yapın ve altbilgi kod parçasını kullanın.
Her sayfa yüklemesinde açılıyor. Başlatmadan sonraki durum (State after init) ayarını Hayır (No) yapın ve kısa kodlarınıza onloadslideout="false" ekleyin.
İki sekmeden yalnızca biri görünüyor veya çalışıyor. Sayfada iki panel vardır; birini bırakın.
Sekme geç görünüyor veya hiçbir şey yapmıyor. JavaScript iyileştirmesi eklentinin betiklerini geciktiriyor veya birleştiriyordur. /wp-content/plugins/woocommerce-products-filter/ yolunu iyileştirme eklentileri rehberinde anlatıldığı gibi geciktirme ve birleştirmeden hariç tutun ve tüm önbellekleri temizleyin.
Filtreleme panelden başlıyor ama ürünler değişmiyor. Bu, panelin değil, ürün ızgarasının sorunudur; kenar çubuğundaki bir filtre için geçerli olan nedenler burada da geçerlidir, bkz. URL değişiyor ama ürünler aynı kalıyor.

Kontrol listesi

Sayfa başına filtreyi gizlemenin tek yolu: Slideout, mobil mod, otomatik filtre düğmesi veya bir tema çekmecesi.
Sayfa başına tek panel; kısa kodu kendiniz yerleştirdiğinizde Genel görünürlük (Global visibility) Gizle (Hide) durumunda.
Kısa kod, temanın telefonlarda gizlediği kenar çubuklarının dışında veya 10'un altında bir öncelikle wp_footer üzerinden yazdırılmış.
Tırnaklı metin sekmesi: image="null" text="Show filters"; onloadslideout="false".
Özel düğmeler tıklamanın belgeye ulaşmasını durdurur; panel woof_ajax_done olayında kapanır.
Panel içeriği max-height ile sınırlı ve kaydırılabilir; z-index üst bilginin üstünde.

Panel hâlâ yanlış davranıyorsa, sayfa bağlantısı ve kullandığınız kısa kod ya da ayarlarla birlikte HUSKY destek forumunda bir konu açın, biz de kontrol edelim.