Smart Designer — Özel Filtre Öğeleri

Bu eklenti, özel filtre öğeleri oluşturmanızı sağlar

Demo sitesi: https://demo-sd.products-filter.com/

Varsayılan olarak WOOF SD, özelleştirmelere hazır 4 temel öğeye sahiptir:

Onay Kutusu (varsayılan)
Radyo
Anahtar
Renk

Daha fazla özel öğeyi WOOF SD Galerisinde bulabilirsiniz. Özel öğenizle ilgili bir fikriniz varsa bize destek üzerinden yazın.

Üst panel

Geri – öğeler listesine dön
Ön Ayarlar – yönetici mevcut seçenekler kümesini kaydedebilir ve ardından bunları başka öğelere uygulayabilir aynı türden
Açılır menü ile sistemdeki tüm olası öğe türleri. Yukarıdaki ekrandaki ‘Kutu etiketleri‘ alt WordPress temasına yerleştirilmiş özel bir öğedir. Bunların nasıl oluşturulacağını aşağıda okuyun.
Mağazanın tüm gerçek woocommerce taksonomilerini içeren açılır menü, yalnızca bir filtre öğesi oluştururken görsel yardım içindir. Ayrıca, bu açılır menü tarafından seçilen taksonominin terimlerine renkler ve görseller eklemek için ‘Renk’ öğe türü için de kullanılır (aşağıda Renk hakkında okuyun)
Sıfırla – mevcut filtre öğesinin tüm özel seçeneklerini varsayılana sıfırlamak için tıklayın

Oluşturma ve Uygulama

‘Eklentiler‘ sekmesinde ‘Smart Designer‘ eklentisini etkinleştirin (etkin değilse) ve Kaydet düğmesine basın
Sayfa yeniden yüklendikten sonra ‘Smart Designer‘ sekmesine gidin
‘Öğe Oluştur‘ düğmesine tıklayın
Yeni öğe başlığını ayarlayın (alanına tıklayın)
‘Düzenle‘ düğmesine tıklayarak yeni öğe seçeneklerine girin
Öğe seçeneklerine girdiğinizde türünü seçmelisiniz: Onay Kutusu, Radyo, Anahtar, Renk veya siteniz WordPress temasında yüklü olan öğelere bağlı olarak başka bir tür (özel öğe türleri aşağıda açıklanmıştır). Her türün, diğer öğe türleriyle kesişmeyen kendi seçenek kümesi vardır!
Anahtarlar dışındaki tüm temel öğeler ayrıca düzen şablonlarına sahiptir (liste, karo veya radyo, onay kutusu), ihtiyacınıza uygun olanı seçin.
Kolaylık olması için, geçerli öğeyi oluşturduğunuz taksonomiyi seçebilirsiniz
İstediğiniz özelleştirmeleri oluşturmak için açıklamalarını kullanarak seçeneklerle oynayın
Tüm değişiklikler ajax ile otomatik olarak kaydedilir
Yeterli olduğuna karar verdiğinizde ‘Ön Ayarlar‘ düğmesine tıklayabilir ve gelecekteki öğeler için özel seçeneklerinizi oraya kaydedebilirsiniz (yeni bir öğeyle sıfırdan başlamamak için)
Son adım, ‘Yapı‘ sekmesine gidip bir taksonomiye az önce oluşturulan öğe türünü eklemektir. Smart Designer ile oluşturulan tüm öğelerin başlık öneki ‘SD:‘ olarak bulunur.
Aşağıdaki Kaydet düğmesine basın
Mağazanın ön yüzüne gidin ve keyfini çıkarın 🙂

Özelleştirmeler hakkında ipuçları

Metin için hangi yazı tipi ailesini uygulayacağınızı bilmiyorsanız ‘inherit‘ kelimesini kullanın, bu geçerli WordPress temasının yazı tipi ailesini uygulayacaktır. Ve unutmayın, herhangi bir yazı tipi ailesi uygularsanız, bunun mevcut WordPress temanız tarafından desteklenmesi gerekir ve bu yazı tipinin site wp-admin tarafına dahil edildiğine dair bir garanti yoktur, bu nedenle görsel sonuçlar %100 arka uç ile ön uç arasında aynı olmayacaktır.
Şeffaf png arka plan görselleriniz için renge ihtiyacınız yoksa renk hex kodu yerine ‘transparent‘ kelimesini kullanın
Farklı görsel desenlerini Google'da ‘background patterns images‘ arama ifadesini kullanarak bulabilirsiniz

Güzel renkler arıyorsanız, onları burada bulabilirsiniz, örneğin https://codebeautify.org/hex-to-pantone-converter

Renk kodu dönüştürücü https://rgbacolorpicker.com/hex-to-rgba

Ön Ayarlar

Ön ayarlar, seçeneklerinizi kaydeder, böylece bunları benzer öğelere uygulayabilirsiniz, bu da üretim süresini kısaltır. Aşağıdakileri yapabilirsiniz:

Ön ayarlar oluşturun
Ön ayarları aynı türdeki yeni öğelere uygulayın (onay kutusu, radyo, renk, anahtar, herhangi bir özel tür) – sadece başlığına tıklayın. Örneğin, radyo için oluşturulan bir ön ayar, onay kutusu için görünmez ve bunun tersi de geçerlidir.
Ön ayarınızı başka bir kişiyle metin bilgisi olarak paylaşın (geliştiriciler, meslektaşlar, siteler, vb. …). Göz düğmesine tıklayın.
Birisi tarafından sizinle paylaşılan ön ayar kodunu içe aktarın. Düzenleme düğmesine tıklayın. Kodu yapıştırın. ‘İçe Aktar‘ düğmesine basın.

Renk

Renk öğesi – kendi işlevselliğine sahip özel bir öğedir – açılır pencere kullanarak seçilen taksonominin her terimi için renk ve resim ataması (‘Sıfırla’ düğmesinden önceki açılır menüye bakın)

Veriler, özel terim meta anahtarlarında saklanır:

woof_sd_color
woof_sd_color_image

Bu anahtarlar, eğer terimleriniz için kendi yönteminizle renk seçenekleri ayarladıysanız, geçerli WordPress temasının functions.php dosyasında geçersiz kılınabilir, aşağıdaki hookları kullanın:

get_woof_sd_term_color_key – taksonomi terimleri renk verilerini depolamak için hook

add_filter('get_woof_sd_term_color', function ($term_id) {
    $meta_key = '__YOUR_OWN_KEY__';
    $color = get_term_meta($term_id, $meta_key, true);//you can use your own code to get term color using its $term_id
    return $color ? $color : 'inherit';
});

get_woof_sd_term_color_image_key – taksonomi terimleri resim verilerini depolamak için hook

add_filter('get_woof_sd_term_color_image', function ($term_id) {
    $meta_key = '__YOUR_OWN_KEY__';
    $img = get_term_meta($term_id, $meta_key, true);//you can use your own code to get term color using its $term_id
    return $img ? $img : '__YOU_CAN_PLACE_HERE_YOUR_DEFAULT_IMAGE_LINK__';
});

Yalnızca Geliştiriciler için Özel Öğeler

WOOF SD, geliştiricilerin kendi özel öğelerini oluşturmasına olanak tanır, tek gereken iyi bir CSS+HTML kodudur. İşte bir örnek: https://codepen.io/quinlo/pen/ReMRXz – bu, filtre öğesi oluşturmak için yeterlidir, demo sitede görebilirsiniz -> ‘Ürün Etiketleri‘

Aşağıdaki resimde böyle bir öğeyi sisteme nasıl ekleyeceğinizi görebilirsiniz:

geçerli WordPress temasında (alt tema kullanmak daha iyidir) ‘woof’ klasörü oluşturun
‘woof‘ klasöründe ‘ext‘ klasörü oluşturun
‘ext‘ klasöründe ‘smart_designer‘ klasörü oluşturun
‘smart_designer‘ klasöründe elements klasörü oluşturun
‘elements‘ klasöründe istediğiniz isimde bir klasör oluşturun, gerekirse alt çizgi kullanın

özel öğe türü klasörü aşağıdaki dosyaları içermelidir:

css/styles.css – öğenin tüm css kodu

js/ie.js – IE'yi genişleten JS sınıfınız, sadece kopyala yapıştır:

'use strict';
import {IE, Helper} from '../../../import.js';//created automatically
//This class is for constructor on backend
//!!Rename class and put its name into file data.php field js_class
export default class Boxtags extends IE {
    draw() {
        super.draw();

        Helper.ajax(null, {}, template => {
            let terms = this.visor.sd.demo_taxonomies_terms;
            let block = this.assemble_terms(terms, template);

            this.container.insertAdjacentHTML('afterbegin', block);
            if (this.container.querySelectorAll('input')) {
                this.container.querySelectorAll('input')[0].setAttribute('checked', true);//for visual test
            }

            this.container.className = `woof_list_${this.template_folder}_sd_${this.template_num}`;
            this.wrapper.appendChild(this.container);
        }, false, this.template_url);
    }
}

JS sınıfınızı yeniden adlandırın (Boxtags yerine), bu önemlidir ve data.php dosyasında kullanılır

templates/tpl.php – gerekirse daha fazla dosyaya da sahip olabilir, bunları tpl-1.php, tpl-2.php vb. olarak adlandırın. Tüm şablon dosyaları data.php dosyasında bildirilmelidir.

data.php – burada seçenekler dizisi bulunur, anahtarları css/styles.css dosyasında ve ayrıca şablonlarda kullanılır

<?php

if (!defined('ABSPATH'))
    die('No direct access allowed');
//View is managed by the Data!
return [
    'title' => 'Box tags', //!!
    'prefix' => 'boxtags_', //!!unique prefix for css vars
    'js_class' => 'Boxtags', //!!important, class name from ie.js
    'templates' => [
        0 => [
            'title' => esc_html__('Template #1', 'woocommerce-products-filter'),
            'use_subterms' => 0//will subterms display or only parent terms depending of the current taxonomy
        ]
    ],
    'template' => 0,
    'demo_taxonomies' => [
        0 => esc_html__('Example terms by real taxonomy', 'woocommerce-products-filter')
    ],
    'selected_demo_taxonomy' => 0, //demo data for visor
    'sections' => [
        [
            'title' => esc_html__('Terms', 'woocommerce-products-filter'),
            'table' => [
                'header' => [
                    [
                        'value' => esc_html__('Options', 'woocommerce-products-filter'),
                        'width' => '50%',
                        'action' => 'save_custom_element_option'
                    ],
                    [
                        'value' => esc_html__('Description', 'woocommerce-products-filter'),
                        'width' => '50%',
                    ],
                ],
                'rows' => [
                    'padding_vertical' => [
                        ['value' => ['element' => 'ranger', 'value' => 8, 'min' => 0, 'max' => 30], 'measure' => 'px'],
                        ['value' => esc_html__('Padding vertical', 'woocommerce-products-filter')]
                    ],
                    'padding_side' => [
                        ['value' => ['element' => 'ranger', 'value' => 12, 'min' => 0, 'max' => 30], 'measure' => 'px'],
                        ['value' => esc_html__('Padding horizontal', 'woocommerce-products-filter')]
                    ],
                    'font_family' => [
                        ['value' => ['element' => 'text', 'value' => 'Segoe UI'], 'measure' => ''],
                        ['value' => esc_html__('Text font family (theme must support)', 'woocommerce-products-filter'), 'help' => '#']
                    ],
                    'font_size' => [
                        ['value' => ['element' => 'ranger', 'value' => 13, 'min' => 8, 'max' => 24], 'measure' => 'px'],
                        ['value' => esc_html__('Text font size', 'woocommerce-products-filter')]
                    ],
                    'font_weight' => [
                        ['value' => ['element' => 'select', 'value' => 400, 'options' => [
                                    '100' => '100',
                                    '200' => '200',
                                    '300' => '300',
                                    '400' => '400',
                                    '500' => '500',
                                    '600' => '600',
                                    '700' => '700',
                                    '800' => '800'
                                ], 'conditions' => []]],
                        ['value' => 'Text font weight'], //cell
                    ],
                    'color' => [
                        ['value' => ['element' => 'color', 'value' => '#adadad']],
                        ['value' => esc_html__('Text color', 'woocommerce-products-filter')]
                    ],
                    'margin_right' => [
                        ['value' => ['element' => 'ranger', 'value' => 5, 'min' => 0, 'max' => 30], 'measure' => 'px'],
                        ['value' => esc_html__('Margin right', 'woocommerce-products-filter')]
                    ],
                    'margin_bottom' => [
                        ['value' => ['element' => 'ranger', 'value' => 5, 'min' => 0, 'max' => 30], 'measure' => 'px'],
                        ['value' => esc_html__('Margin bottom', 'woocommerce-products-filter')]
                    ],
                    'bg_color_r' => [
                        ['value' => ['element' => 'ranger', 'value' => 255, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Background color red channel', 'woocommerce-products-filter')]
                    ],
                    'bg_color_g' => [
                        ['value' => ['element' => 'ranger', 'value' => 255, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Background color green channel', 'woocommerce-products-filter')]
                    ],
                    'bg_color_b' => [
                        ['value' => ['element' => 'ranger', 'value' => 255, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Background color blue channel', 'woocommerce-products-filter')]
                    ],
                    'bg_color_op' => [
                        ['value' => ['element' => 'ranger', 'value' => 9, 'min' => 0, 'max' => 10], 'measure' => ''],
                        ['value' => esc_html__('Background color opacity', 'woocommerce-products-filter')]
                    ],
                    'bg_image' => [
                        ['value' => ['element' => 'image', 'value' => ''], 'before' => 'url(', 'after' => ')'], //cell
                        ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell
                    ],
                    'border_width' => [
                        ['value' => ['element' => 'ranger', 'value' => 2, 'min' => 0, 'max' => 10], 'measure' => 'px'],
                        ['value' => esc_html__('Border width', 'woocommerce-products-filter')]
                    ],
                    'border_style' => [
                        ['value' => ['element' => 'select', 'value' => 'solid', 'options' => [
                                    'dotted' => 'dotted',
                                    'dashed' => 'dashed',
                                    'solid' => 'solid',
                                    'double' => 'double',
                                    'groove' => 'groove',
                                    'ridge' => 'ridge',
                                    'inset' => 'inset',
                                    'outset' => 'outset',
                                    'none' => 'none',
                                    'hidden' => 'hidden'
                                ]]],
                        ['value' => 'Border style'],
                    ],
                    'border_radius' => [
                        ['value' => ['element' => 'ranger', 'value' => 25, 'min' => 0, 'max' => 50], 'measure' => 'px'],
                        ['value' => esc_html__('Border radius', 'woocommerce-products-filter')]
                    ],
                    'border_color_r' => [
                        ['value' => ['element' => 'ranger', 'value' => 139, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Border color red channel', 'woocommerce-products-filter')]
                    ],
                    'border_color_g' => [
                        ['value' => ['element' => 'ranger', 'value' => 139, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Border color green channel', 'woocommerce-products-filter')]
                    ],
                    'border_color_b' => [
                        ['value' => ['element' => 'ranger', 'value' => 139, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Border color blue channel', 'woocommerce-products-filter')]
                    ],
                    'border_color_op' => [
                        ['value' => ['element' => 'ranger', 'value' => 3, 'min' => 0, 'max' => 10], 'measure' => ''],
                        ['value' => esc_html__('Border color opacity', 'woocommerce-products-filter')]
                    ],
                    'checkbox_font_family' => [
                        ['value' => ['element' => 'text', 'value' => 'Font Awesome 5 Free'], 'measure' => '', 'before' => '"', 'after' => '"'],
                        ['value' => esc_html__('Checkbox font family (theme must support)', 'woocommerce-products-filter'), 'help' => '#']
                    ],
                    'checkbox_font_size' => [
                        ['value' => ['element' => 'ranger', 'value' => 12, 'min' => 8, 'max' => 72], 'measure' => 'px'],
                        ['value' => esc_html__('Checkbox font size', 'woocommerce-products-filter')]
                    ],
                    'checkbox_content' => [
                        ['value' => ['element' => 'text', 'value' => "\f067"], 'measure' => '', 'before' => '"', 'after' => '"'],
                        ['value' => esc_html__('Checkbox content', 'woocommerce-products-filter'), 'help' => '#']
                    ],
                    'checkbox_content_selected' => [
                        ['value' => ['element' => 'text', 'value' => "\f00c"], 'measure' => '', 'before' => '"', 'after' => '"'],
                        ['value' => esc_html__('Checkbox content selected', 'woocommerce-products-filter'), 'help' => '#']
                    ],
                    'transition' => [
                        ['value' => ['element' => 'ranger', 'value' => 200, 'min' => 0, 'max' => 1000], 'measure' => 's'], //cell
                        ['value' => esc_html__('Transition (ms)', 'woocommerce-products-filter')] //cell
                    ],
                ]
            ]
        ],
        [
            'title' => esc_html__('Hovered(Selected) Terms', 'woocommerce-products-filter'),
            'table' => [
                'header' => [
                    [
                        'value' => esc_html__('Options', 'woocommerce-products-filter'),
                        'width' => '50%',
                        'action' => 'save_custom_element_option'
                    ],
                    [
                        'value' => esc_html__('Description', 'woocommerce-products-filter'),
                        'width' => '50%'
                    ],
                ],
                'rows' => [
                    'selected_color' => [
                        ['value' => ['element' => 'color', 'value' => '#ffffff']],
                        ['value' => esc_html__('Text color', 'woocommerce-products-filter')]
                    ],
                    'selected_bg_color_r' => [
                        ['value' => ['element' => 'ranger', 'value' => 18, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Background color red channel', 'woocommerce-products-filter')]
                    ],
                    'selected_bg_color_g' => [
                        ['value' => ['element' => 'ranger', 'value' => 187, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Background color green channel', 'woocommerce-products-filter')]
                    ],
                    'selected_bg_color_b' => [
                        ['value' => ['element' => 'ranger', 'value' => 212, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Background color blue channel', 'woocommerce-products-filter')]
                    ],
                    'selected_bg_color_op' => [
                        ['value' => ['element' => 'ranger', 'value' => 10, 'min' => 0, 'max' => 10], 'measure' => ''],
                        ['value' => esc_html__('Background color opacity', 'woocommerce-products-filter')]
                    ],
                    'selected_bg_image' => [
                        ['value' => ['element' => 'image', 'value' => ''], 'before' => 'url(', 'after' => ')'], //cell
                        ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell
                    ],
                    'selected_border_color_r' => [
                        ['value' => ['element' => 'ranger', 'value' => 27, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Border color red channel', 'woocommerce-products-filter')]
                    ],
                    'selected_border_color_g' => [
                        ['value' => ['element' => 'ranger', 'value' => 219, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Border color green channel', 'woocommerce-products-filter')]
                    ],
                    'selected_border_color_b' => [
                        ['value' => ['element' => 'ranger', 'value' => 248, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Border color blue channel', 'woocommerce-products-filter')]
                    ],
                    'selected_border_color_op' => [
                        ['value' => ['element' => 'ranger', 'value' => 10, 'min' => 0, 'max' => 10], 'measure' => ''],
                        ['value' => esc_html__('Border color opacity', 'woocommerce-products-filter')]
                    ],
                    'selected_border_width' => [
                        ['value' => ['element' => 'ranger', 'value' => 2, 'min' => 0, 'max' => 10], 'measure' => 'px'],
                        ['value' => esc_html__('Border width', 'woocommerce-products-filter')]
                    ],
                    'selected_border_style' => [
                        ['value' => ['element' => 'select', 'value' => 'solid', 'options' => [
                                    'dotted' => 'dotted',
                                    'dashed' => 'dashed',
                                    'solid' => 'solid',
                                    'double' => 'double',
                                    'groove' => 'groove',
                                    'ridge' => 'ridge',
                                    'inset' => 'inset',
                                    'outset' => 'outset',
                                    'none' => 'none',
                                    'hidden' => 'hidden'
                                ]]],
                        ['value' => 'Border style'],
                    ],
                    'selected_scale' => [
                        ['value' => ['element' => 'ranger', 'value' => 100, 'min' => 50, 'max' => 200], 'measure' => ''], //cell
                        ['value' => esc_html__('Scale', 'woocommerce-products-filter')] //cell
                    ],
                ]
            ]
        ],
        [
            'title' => esc_html__('Counter', 'woocommerce-products-filter'),
            'table' => [
                'header' => [
                    [
                        'value' => esc_html__('Options', 'woocommerce-products-filter'),
                        'width' => '50%',
                        'action' => 'save_custom_element_option'
                    ],
                    [
                        'value' => esc_html__('Description', 'woocommerce-products-filter'),
                        'width' => '50%',
                    ]
                ],
                'rows' => [
                    'counter_show' => [
                        ['value' => ['element' => 'switcher', 'value' => 'inline-flex', 'yes' => 'inline-flex', 'no' => 'none']], //cell
                        ['value' => esc_html__('Show counter', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_width' => [
                        ['value' => ['element' => 'ranger', 'value' => 14, 'min' => 10, 'max' => 72, 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => 'px'],
                        ['value' => esc_html__('Min width', 'woocommerce-products-filter')]
                    ],
                    'counter_height' => [
                        ['value' => ['element' => 'ranger', 'value' => 14, 'min' => 10, 'max' => 72, 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => 'px'],
                        ['value' => esc_html__('Min height', 'woocommerce-products-filter')]
                    ],
                    'counter_top' => [
                        ['value' => ['element' => 'ranger', 'value' => -2, 'min' => -100, 'max' => 100, 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => 'px'], //cell
                        ['value' => esc_html__('Top', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_right' => [
                        ['value' => ['element' => 'ranger', 'value' => -3, 'min' => -100, 'max' => 100, 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => 'px'],
                        ['value' => esc_html__('Right', 'woocommerce-products-filter')]
                    ],
                    'counter_font_size' => [
                        ['value' => ['element' => 'ranger', 'value' => 9, 'min' => 8, 'max' => 48, 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => 'px'], //cell
                        ['value' => esc_html__('Text font size', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_color' => [
                        ['value' => ['element' => 'color', 'value' => '#777777', 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]]], //cell
                        ['value' => esc_html__('Text color', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_font_family' => [
                        ['value' => ['element' => 'text', 'value' => 'consolas', 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => ''], //cell
                        ['value' => esc_html__('Text font family (theme must support)', 'woocommerce-products-filter')], //cell
                    ],
                    'counter_font_weight' => [
                        ['value' => ['element' => 'select', 'value' => 500, 'options' => [
                                    '100' => '100',
                                    '200' => '200',
                                    '300' => '300',
                                    '400' => '400',
                                    '500' => '500',
                                    '600' => '600',
                                    '700' => '700',
                                    '800' => '800'
                                ], 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]]],
                        ['value' => 'Text font weight'], //cell
                    ],
                    'counter_side_padding' => [
                        ['value' => ['element' => 'ranger', 'value' => 0, 'min' => 0, 'max' => 48, 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => 'px'], //cell
                        ['value' => esc_html__('Side padding', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_bg_color' => [
                        ['value' => ['element' => 'color', 'value' => '#ffffff', 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]]], //cell
                        ['value' => esc_html__('Background color', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_bg_image' => [
                        ['value' => ['element' => 'image', 'value' => '', 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'before' => 'url(', 'after' => ')'], //cell
                        ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_border_width' => [
                        ['value' => ['element' => 'ranger', 'value' => 1, 'min' => 0, 'max' => 10, 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => 'px'], //cell
                        ['value' => esc_html__('Border width', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_border_radius' => [
                        ['value' => ['element' => 'ranger', 'value' => 50, 'min' => 0, 'max' => 50, 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => '%'], //cell
                        ['value' => esc_html__('Border radius', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_border_color' => [
                        ['value' => ['element' => 'color', 'value' => '#adadad', 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]]], //cell
                        ['value' => esc_html__('Border color', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_border_style' => [
                        ['value' => ['element' => 'select', 'value' => 'solid', 'options' => [
                                    'dotted' => 'dotted',
                                    'dashed' => 'dashed',
                                    'solid' => 'solid',
                                    'double' => 'double',
                                    'groove' => 'groove',
                                    'ridge' => 'ridge',
                                    'inset' => 'inset',
                                    'outset' => 'outset',
                                    'none' => 'none',
                                    'hidden' => 'hidden'
                                ], 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]]],
                        ['value' => 'Border style'], //cell
                    ],
                ]
            ]
        ],
    ]
];

data.php dosyasında şu alanlara dikkat edin: title – öğenizin adı SD üst panelinde, prefix – css değişkenleri için benzersiz ön ek, js_class – önemli, ie.js dosyasından sınıf adı
Ardından tpl.php dosyasına HTML kodunuzu ekleyin:
```
<?php $custom_postfix = 'boxtags'; ?>
<div class="woof-sd-ie woof-sd-ie-<?php echo $custom_postfix ?> woof-sd-ie-<?php echo $custom_postfix ?>___TERM_ID__ __CLASS__">
    <input type="checkbox" hidden id="__ID__"
           data-tax="__DATA_TAX__" 
           name="__SLUG__" data-term-id="__TERM_ID__" 
           value="__VALUE__" __CHECKED__ __DISABLED__
           onchange="woof_checkbox_process_data(this, this.checked)"
           hidden
           />
    <label for="__ID__">
        <span>__CONTENT__ <span class="woof-sd-ie-count">__COUNT__</span></span>
    </label>

    <input type="hidden" value="__TERM_NAME__" data-anchor="woof_n___DATA_ANCHOR__" />

</div>
```
$custom_postfix değişkenini öğenizin klasör adıyla değiştirmeyi unutmayın (data.php dosyasındaki prefix alanıyla aynı).
- Şablon, WOOF SD ön yüzde etiketleri yazdırırken anında değiştirilen özel dizelere sahiptir:
  - __TERM_ID__ – yazdırılan geçerli terimin kimliği
  - __CLASS__ – sistem css sınıfı
  - __DATA_TAX__ – geçerli terim taksonomi adı
  - __SLUG__ – geçerli terim kısa adı
  - __ID__ – etiket için otomatik oluşturulan kimlik
  - __VALUE__ – burada seçilen değer
  - __CHECKED__ – seçili olup olmadığını belirlemek için onay kutusu veya radyoda olmalı
  - __DISABLED__ – devre dışı olup olmadığını belirlemek için onay kutusu veya radyoda olmalı
  - __CONTENT__ – müşterilere görüntülenecek terim başlığı
  - __COUNT__ – terim sayısı
  - __RESET_RADIO_BTN__ – yalnızca radyo için kullanılır, ön yüzde seçili radyo düğmesini sıfırlamak için
  - __DATA_ANCHOR__ – gizli giriş için her zaman gereklidir
  - __TERM_NAME__ – geçerli terim adı
- Her zaman yukarıdaki örnekteki gibi bir div sarmalayıcı kullanın ve içine HTML kodunuzu ekleyin. Hem onay kutusu (veya radyo) hem de gizli girişler her zaman bulunmalıdır!

Alanlar:

templates – aynı öğenin düzen şablonlarını veya davranışını ekleyin (radyo veya onay kutusu).
template – varsayılan olarak seçilen şablon numarası
demo_taxonomies – yukarıdaki kodda olduğu gibi kullanın, yapıcıda mağaza taksonomilerini görüntülemek için gereklidir

sections – burada satırlar halinde yerleştirilmiş seçenekler bulunur, kendi benzersiz anahtarları vardır (data.php dosyasına göre) ve farklı türlerdedir:

ranger – min ile max arasında bir kaydırıcı ile bir aralık denetimi oluşturur

'padding_vertical' => [
      ['value' => ['element' => 'ranger', 'value' => 8, 'min' => 0, 'max' => 30], 'measure' => 'px'],
      ['value' => esc_html__('Padding vertical', 'woocommerce-products-filter')]
  ],

‘measure‘ alanına dikkat edin, uygun ölçü birimleri olmalıdır

text – metin alanı

'font_family' => [
    ['value' => ['element' => 'text', 'value' => 'Segoe UI'], 'measure' => ''],
    ['value' => esc_html__('Text font family (theme must support)', 'woocommerce-products-filter'), 'help' => '#']
],

select – önceden tanımlanmış herhangi bir değeri seçmek için açılır menü

'font_weight' => [
    ['value' => ['element' => 'select', 'value' => 400, 'options' => [
                '100' => '100',
                '200' => '200',
                '300' => '300',
                '400' => '400',
                '500' => '500',
                '600' => '600',
                '700' => '700',
                '800' => '800'
            ], 'conditions' => []]],
    ['value' => 'Text font weight'], //cell
],

color – renk girişi oluşturur

'color' => [
    ['value' => ['element' => 'color', 'value' => '#adadad']],
    ['value' => esc_html__('Text color', 'woocommerce-products-filter')]
],

image – site medya galerisinden resim seçmek için metin girişi ve yanında düğme oluşturur

'bg_image' => [
    ['value' => ['element' => 'image', 'value' => ''], 'before' => 'url(', 'after' => ')'], //cell
    ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell
],

Tüm öğelerde alan değeri, styles.css dosyasındaki ile aynı olması gereken bir varsayılan değere sahiptir
css dosyası içindeki tüm anahtarlar ‘–woof-sd-ie-‘ ön eki + data.php dosyasından alınan ‘prefix‘ alanı ile kullanılmalıdır!

woof/ext/smart_designer/import.js dosyası sistem tarafından otomatik oluşturulur ve elle değiştirilmemelidir!!
Kısacası, özel öğe örneğini indirebilir ve kendi CSS ve HTML'nizi kullanarak yeniden oluşturabilirsiniz