Akıllı Tasarımcı

Bu eklenti özel filtre öğeleri oluşturmayı sağlar

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

Varsayılan olarak WOOF SD'de özelleştirilmeye hazır 4 temel öğe bulunur:

Onay Kutusu (varsayılan)
Radyo
Geçiş
Renk

Daha fazla özel öğeyi şurada bulabilirsiniz: WOOF SD Galeri. Eğer bir fikrim var özel öğeniz hakkında bize yazın destek.

Üst panel

Geri – öğeler listesine dön
Ön Ayarlar – yönetici, mevcut seçenekleri kaydedebilir ve ardından bunları başka öğelere uygulayabilir aynı türden
Açılır liste sistemdeki tüm olası öğe türleriyle. 'Kutu etiketleri' yukarıdaki ekran, çocuk WordPress temasında yer alan özel bir öğedir. Bu tür öğeler aşağıda okunarak nasıl oluşturulur.
Mağazanın tüm gerçek woocommerce taksonomilerinin yer aldığı açılır liste, yalnızca bir filtre öğesi oluştururken görsel yardım amaçlıdır. Ayrıca ‘Renk’ öğe türü için bu açılır listeden seçilen taksonominin terimlerine renk ve resim eklemek için kullanılır (Aşağıdaki Renk hakkında oku)
Sıfırla – tıklamak mevcut filtre öğesi için tüm özel seçenekleri varsayılana sıfırlar

Oluştur ve Uygula

Sekmesinde ‘Uzantılar‘ eklentiyi etkinleştir ‘Akıllı Tasarımcı‘ (etkin değilse) ve Kaydet düğmesine basın
Sayfa yeniden yüklendikten sonra sekmeye git 'Akıllı Tasarımcı‘
Düğmeye tıklayın 'Yeni Oluştur‘
Yeni öğe başlığını ayarla (alanına tıklayın)
' tıklayınDüzenleyeni öğe seçeneklerini girmek için ‘ düğmesi
Öğe seçeneklerinin içine girdiğinizde türünü seçmelisiniz: Onay Kutusu, Radyo, Anahtar, Renk veya sitenizde kurulu öğelere bağlı olarak başka bir tane WordPress teması (aşağıda açıklanan özel eleman türleri). Her tür, başka bir öğe türüyle kesişmeyen kendi seçeneklerine sahiptir!
Ana öğelerin tümü, değiştiriciler hariç olmak üzere düzen şablonlarına da sahiptir (liste, kutucuk veya radyo, onay kutusu), ihtiyacınıza uygun olanı seçin.
Kolaylığınız için, mevcut öğ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 tarafından otomatik olarak kaydedildi
Yeterli olduğuna karar verdiğinizde, ‘ düğmesine tıklayabilirsiniz.Ön Ayarlar‘ düğmesini ve buraya gelecekteki öğeler için özel seçeneklerinizi kaydedin (yeni öğeye sıfırdan başlamamak için)
Son adım ‘ sekmesine gitmektirYapı‘ ve yeni oluşturulan bir taksonomiye eleman türü ekleyin. Smart Designer ile oluşturulan tüm elemanlar ' ön ekli bir başlığa sahiptir.SD:‘
Basın Kaydet aşağıdaki düğme
Mağaza ön tarafına gidin ve keyfini çıkarın 🙂

Özelleştirmeler hakkında ipuçları

Metin için hangi yazı tipi ailesini uygulayacağınızı bilmiyorsanız ' kelimesini kullanındevralmak‘, bu mevcut WordPress tema yazı tipi ailesini uygulayacaktır. Ve unutmayın, herhangi bir yazı tipi ailesi uygularsanız, mevcut WordPress temanız tarafından desteklenmelidir ve bu yazı tipinin sitede wp-admin tarafında dahil olduğuna dair bir garanti yoktur, bu nedenle görsel sonuçlar arka uçta olduğu gibi ön uçta da %100 aynı olmayacaktır.
Şeffaf png arka plan resimleriniz için rengi istemiyorsanız ' kelimesini kullanınşeffafrenk onaltılık kodu yerine ‘
Google’da ‘ isteğiyle bulabileceğiniz farklı resim desenleriarka plan desen görselleri‘
Güzel renkler arıyorsanız, örneğin onları burada bulabilirsiniz https://codebeautify.org/hex-to-pantone-converter
Renk kodu dönüştürücü https://rgbacolorpicker.com/hex-to-rgba

Ön Ayarlar

Preset'ler, benzer öğelere uygulamak için seçeneklerinizi kaydetmenize olanak tanır, bu da üretim süresini kısaltır. Aşağıdakileri yapabilirsiniz:

Ön ayarlar oluşturun
Aynı türdeki yeni öğelere ön ayarlar uygula (onay kutusu, radyo düğmesi, renk, değiştirici, herhangi bir özel tür) – başlığına tıklamanız yeterlidir. Örneğin, radyo için oluşturulan ön ayar, onay kutusu için görünmezdir ve bunun tersi de geçerlidir.
Ayarınızı metin bilgisi olarak başka bir kişiyle paylaşın (geliştiriciler, meslektaşlar, siteler vb…). Göz düğmesine tıklayın.
Sizden paylaşılan ön ayar kodunu içe aktarın. Düzenleme düğmesine tıklayın. Kodu yapıştırın. Düğmeye basın ‘İçe Aktar‘.

Renk

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

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

woof_sd_color
woof_sd_color_image

Bu anahtarlar, mevcut WordPress temasının functions.php dosyasında, terimleriniz için kendi renk seçeneklerinizi zaten ayarlamış olduğunuz durumlar için geçersiz kılınabilir, sonraki kancaları kullanın:

get_woof_sd_term_color_key – taksonomi terimlerinin renk verilerini depolamak için kanca

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 terimi resim verilerini depolamak için kanca

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 İçin Özel Öğeler

WOOF SD, geliştiricilerin kendi özel öğelerini oluşturmaları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, bunu şu adreste görebilirsiniz: demo sitesi -> ‘Ürün Etiketleri‘

Aşağıdaki resimde böyle bir öğenin sisteme nasıl ekleneceğini görebilirsiniz:

mevcut WordPress temasında (çocuk teması kullanmak daha iyi) 'woof' klasörü oluştur
klasöründe ‘woof' klasör oluşturun 'ext‘
klasöründe ‘ext' klasör oluşturun 'smart_designer‘
klasöründe ‘smart_designer‘ klasör öğeleri oluştur
klasöründe ‘öğeler‘ istediğiniz isimde klasör oluşturun, gerekirse alt çizgi kullanın

özel öğe türü klasöründe şu dosyalar olmalıdır:

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

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

'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 dosya data.php içinde kullanılır

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

data.php – burada, dosyadaki anahtarları kullanılan seçeneklerin dizisidir css/styles.css ve ayrıca şablonlar

<?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
                    ],
                ]
            ]
        ],
    ]
];

Dosyada data.php alanlara dikkat edin: başlık – öğenizin adı SD'nin üst panelinde, önek – css değişkenleri için benzersiz önek, js_class – önemli, sınıf adı yani.js
Sonra dosyada tpl.php 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>
```
Değişkenlerini $custom_postfix öğenin klasör adına değiştirmeyi unutmayın (dosya data.php'deki aynı ön ek alanı).
- Şablon, WOOF SD ön tarafta etiketleri yazdırırken dinamik olarak değiştirilen özel dizelere sahiptir:
  - __TERM_ID__ – mevcut yazdırılan terimin kimliği
  - __CLASS__ – sistem css sınıfı
  - __DATA_TAX__ – mevcut terim taksonomi adı
  - __SLUG__ – mevcut terim slug'ı
  - __ID__ – etiket için otomatik oluşturulan kimlik
  - __VALUE__ – seçilen değer burada
  - __CHECKED__ – seçili olup olmamasını sağlamak için onay kutusu veya radyo düğmesi olmalıdır
  - __DISABLED__ – devre dışı bırakmak veya bırakmamak için onay kutusu veya radyo düğmesinde olmalıdır
  - __CONTENT__ – müşterilere göstermek için terim başlığı
  - __COUNT__ - terim sayısı
  - __RESET_RADIO_BTN__ – yalnızca ön tarafta seçili radyo düğmesini sıfırlamak için radyoya kullanılır
  - __DATA_ANCHOR__ – gizli giriş için her zaman gereklidir
  - __TERM_NAME__ – mevcut terim adı
- Yukarıdaki örnekte her zaman olduğu gibi div sarmalayıcı kullanın ve HTML kodunuzun içine. Hem onay kutusu veya radyo + gizli girişler hem de her zaman!

Alanlar:

şablonlar – aynı öğenin düzen şablonlarını veya davranışını ekleyin (radyo veya onay kutusu).
şablon – varsayılan olarak seçilen şablonun numarası
demo_taksonomiler – yukarıdaki kodda olduğu gibi kullanın, inşaatçıda mağaza taksonomilerini göstermesi gerekir

bölümler – burada satırlarda yer alan seçenekler, kendi benzersiz anahtarlarına sahiptir (data.php dosyasına göreli olarak) ve farklı türlerdeler:

ranger – menüden aralık kaydırıcısıyla menzil oluşturmaya izin verir min için maksimum

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

‘ alanına dikkat edinölçmek‘, yeterli ölçü birimleri olmalıdır

metin – metin alanı

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

seçin – ö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
],

renk – renk girişi oluşturur

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

resim – site medya galerisinden resim seçmek için metin girişi ve 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'deki ile aynı olması gereken varsayılan bir değere sahiptir
css dosyasındaki tüm anahtarlar önek ' ile kullanılmalıdır.–woof-sd-ie-‘ + öneki data.php dosyasından alınmıştır -> alan ‘önek‘!

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