Smart Designer

Questa estensione consente di creare elementi di filtro personalizzati

Sito demo: https://demo-sd.products-filter.com/

Di default WOOF SD ha 4 elementi base pronti per personalizzazioni:

Checkbox (predefinito)
Radio
Switcher
Colore

Ulteriori elementi personalizzati che puoi trovare in WOOF SD Gallery. Se tu avere un'idea riguardo il tuo elemento personalizzato scrivici in supporto.

Pannello superiore

Indietro – torna all'elenco degli elementi
Preset – l'admin può salvare l'insieme corrente di opzioni e quindi applicarle su altri elementi dello stesso tipo
Menu a discesa con tutti i tipi di elementi possibili sul sistema. 'Tag delle caselle‘ sullo schermo sopra è un elemento personalizzato inserito in un tema WordPress figlio. Come crearne di simili leggi qui sotto.
Menu a discesa con tutte le tassonomie woocommerce reali del negozio, solo per aiuto visivo durante la creazione di un elemento filtro. Utilizza anche per il tipo di elemento 'Colore' per allegare colori e immagini ai termini della tassonomia selezionata da questo menu a discesa (leggi di Colore sotto)
Ripristina – se cliccato reimposta tutte le opzioni personalizzate all'impostazione predefinita per l'elemento filtro corrente

Crea e Applica

Nella scheda ‘Estensioni‘ attiva estensione ‘Smart Designer‘ (se non è attivato) e premi il pulsante Salva
Dopo il ricaricamento della pagina vai alla scheda ‘Smart Designer‘
Clicca sul pulsante ‘Crea Elemento‘
Imposta il titolo del nuovo elemento (clicca sul suo campo)
Fai clic su ‘Modifica‘ pulsante per inserire nuove opzioni elemento
Quando sei all'interno delle opzioni dell'elemento devi selezionare il suo tipo: Checkbox, Radio, Switcher, Colore o un altro a seconda degli elementi installati sul tuo tema WordPress del sito (tipi di elementi personalizzati descritti di seguito). Ogni tipo ha il suo set di opzioni che non si interseca con altri tipi di elemento!
Tutti gli elementi base, ad eccezione degli switch, hanno anche template di layout (lista, piastrella o radio, checkbox), seleziona quella che soddisfa le tue esigenze.
Per tua comodità puoi selezionare la tassonomia per cui stai creando l'elemento corrente
Gioca con le opzioni usando le loro descrizioni per creare le personalizzazioni che desideri
Tutte le modifiche salvate automaticamente tramite ajax
Quando hai deciso che è abbastanza, puoi cliccare su ‘Presetpulsante ‘ e salva lì le tue opzioni personalizzate per elementi futuri (per non iniziare da zero con un nuovo elemento)
L'ultimo passo è andare alla scheda ‘Struttura‘ e allega per una tassonomia un elemento appena creato. Tutti gli elementi creati con Smart Designer hanno il prefisso del titolo ‘SD:‘
Premi Salva pulsante sotto
Vai al front-end del negozio e divertiti 🙂

Suggerimenti sulle personalizzazioni

Se non sai quale famiglia di font applicare al testo usa la parola 'eredita‘, questo applicherà la famiglia di font del tema WordPress corrente. E ricorda, che se applichi qualsiasi famiglia di font, questa dovrebbe essere supportata dal tuo tema WordPress corrente e non c'è garanzia che questo font sia incluso nel sito lato wp-admin, quindi i risultati visivi non saranno al 100% uguali nel backend e nel frontend.
Se non hai bisogno di colore per le tue immagini di sfondo png trasparenti usa la parola ‘trasparente‘ invece del codice esadecimale del colore
Diversi pattern di immagini che puoi trovare usando Google con la frase di ricerca ‘immagini di pattern di sfondo‘
Se cerchi bei colori, puoi trovarli qui, ad esempio https://codebeautify.org/hex-to-pantone-converter
Convertitore codice colore https://rgbacolorpicker.com/hex-to-rgba

Preset

I preset consentono di salvare le tue opzioni da applicare a elementi simili, il che riduce i tempi di produzione. Puoi fare quanto segue:

Crea preset
Applica preset ai nuovi elementi dello stesso tipo (checkbox, radio, color, switcher, qualsiasi tipo personalizzato) – basta cliccare sul suo titolo. Ad esempio, un preset creato per radio è invisibile per checkbox e viceversa.
Condividi il tuo preset come informazione testuale con un'altra persona (sviluppatori, colleghi, siti, ecc…). Fare clic sul pulsante occhio.
Importa preset di codice condiviso con te da qualcuno. Clicca sul pulsante modifica. Incolla il codice. Premi il pulsante ‘Importa‘.

Colore

Elemento colore – è un elemento speciale che ha la sua funzionalità – assegnazione di colore e immagini per ogni termine della tassonomia selezionata (vedi menu a tendina prima del pulsante ‘Reset’) usando il popup

I dati vengono archiviati in speciali chiavi meta dei termini:

woof_sd_color
woof_sd_color_image

Queste chiavi possono essere sovrascritte nel file functions.php del tema WordPress corrente per i casi in cui hai già impostato le opzioni colore per i tuoi termini a modo tuo, usa i seguenti hook:

get_woof_sd_term_color_key – hook per memorizzare i dati colore dei termini di tassonomia

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– hook per archiviare i dati dell'immagine dei termini di tassonomia

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__';
});

Elementi personalizzati solo per sviluppatori

WOOF SD permette agli sviluppatori di creare i propri elementi personalizzati, tutto ciò che è necessario è un buon codice CSS+HTML creato. Ecco un esempio: https://codepen.io/quinlo/pen/ReMRXz – è sufficiente per creare un elemento del filtro, puoi vederlo sul sito demo -> ‘Tag prodotti‘

Nell'immagine sottostante puoi vedere come aggiungere tale elemento nel sistema:

sul tema WordPress corrente (meglio usare il child-theme) crea la cartella 'woof'
nella cartella ‘woof‘ crea cartella ‘ext‘
nella cartella ‘ext‘ crea cartella ‘smart_designer‘
nella cartella ‘smart_designer‘ crea la cartella elementi
nella cartella ‘elementi‘ crea una cartella con il nome che desideri, usa l’underscore se necessario

la cartella del tipo di elemento personalizzato deve contenere i seguenti file:

css/styles.css – tutto il codice css dell'elemento

js/ie.js – la tua classe JS, estende IE, basta copiare e incollare:

'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);
    }
}

Rinomina la tua classe JS (invece di Boxtags), è importante e utilizzato nel file data.php

templates/tpl.php - può avere anche più file se necessario, nominali come tpl-1.php, tpl-2.php, ecc... Tutti i file modello devono essere dichiarati nel file data.php.

data.php – qui è un array di opzioni, le cui chiavi vengono utilizzate nel file css/styles.css e anche i template

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

Nel file data.php fai attenzione ai campi: titolo – nome del tuo elemento nel pannello superiore di SD, prefisso – prefisso unico per le variabili CSS, js_class – importante, nome classe da es.js
Successivo nel file tpl.php aggiungi il tuo codice HTML:
```
<?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>
```
Non dimenticare di cambiare la loro variabile $custom_postfix con il nome della cartella del tuo elemento (lo stesso campo prefisso dal file data.php).
- Il template ha stringhe speciali che vengono sostituite al volo quando WOOF SD stampa i tag sul front-end:
  - __TERM_ID__ – ID del termine stampato corrente
  - __CLASS__ – classe css di sistema
  - __DATA_TAX__ – nome della tassonomia del termine corrente
  - __SLUG__ – slug del termine corrente
  - __ID__ – id generato automaticamente per l'etichetta
  - __VALUE__ – valore selezionato qui
  - __CHECKED__ – dovrebbe essere in checkbox o radio per renderlo selezionato o meno
  - __DISABLED__ – dovrebbe essere in checkbox o radio per renderlo disabilitato o meno
  - __CONTENT__ – titolo del termine da visualizzare ai clienti
  - __COUNT__ – numero di termini
  - __RESET_RADIO_BTN__ – usa solo per radio per reimpostare il pulsante radio selezionato sul frontend
  - __DATA_ANCHOR__ – sempre richiesto per l'input nascosto
  - __TERM_NAME__ – nome del termine corrente
- Usa un wrapper div sempre uguale a quello dell'esempio sopra, e all'interno del tuo codice HTML. Entrambi gli input, sia checkbox o radio + input nascosti devono sempre essere!

Campi:

templates – aggiunge modelli di layout dello stesso elemento, o il suo comportamento (radio o checkbox).
template – numero del template selezionato di default
demo_taxonomies – usa così com'è nel codice sopra, necessario per visualizzare le tassonomie dello shop nel costruttore

sezioni – qui in righe opzioni posizionate, hanno chiavi univoche proprie (relativamente al file data.php) e sono di tipi diversi:

ranger – consente di creare un range con range-slider da min a max

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

Presta attenzione al campo ‘misurare‘, dovrebbero esserci unità di misura adeguate

testo – campo di testo

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

seleziona – menu a discesa per selezionare qualsiasi valore predefinito

'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
],

colore – genera input colore

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

immagine – genera un campo di testo e un pulsante vicino per selezionare un'immagine dalla galleria multimediale del sito

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

In tutti gli elementi, il valore del campo ha un valore predefinito che deve essere uguale a quello in styles.css
tutte le chiavi all'interno del file css devono essere utilizzate con il prefisso "–woof-sd-ie-‘ + prefisso preso dal file data.php -> campo ‘prefisso‘!

Il file woof/ext/smart_designer/import.js viene creato automaticamente dal sistema e non deve essere modificato manualmente!!
In breve, puoi scarica esempio di elemento personalizzato e ricrealo usando il tuo CSS e HTML