Smart Designer — Elementos de Filtro Personalizados

Esta extensão permite criar elementos de filtro personalizados

Site de demonstração: https://demo-sd.products-filter.com/

Por padrão, o WOOF SD possui 4 elementos básicos prontos para personalizações:

Checkbox (padrão)
Rádio
Alternador
Cor

Mais elementos personalizados você pode encontrar na Galeria WOOF SD. Se você tiver uma ideia sobre seu elemento personalizado, escreva-nos no suporte.

Painel superior

Voltar – retornar à lista de elementos
Predefinições – o administrador pode salvar o conjunto atual de opções e depois aplicá-las em outros elementos do mesmo tipo
Menu suspenso com todos os tipos possíveis de elementos no sistema. ‘Tags de caixa‘ na tela acima é um elemento personalizado colocado no tema filho do WordPress. Como criar esses, leia abaixo.
Menu suspenso com todas as taxonomias reais do WooCommerce da loja, apenas para ajuda visual ao construir um elemento de filtro. Também é usado para o tipo de elemento ‘Color’ para anexar cores e imagens aos termos da taxonomia selecionada por este menu suspenso (leia sobre Color abaixo)
Redefinir – clique para redefinir todas as opções personalizadas do elemento de filtro atual para os padrões

Criar e Aplicar

Na aba ‘Extensões‘, ative a extensão ‘Smart Designer‘ (se não estiver ativada) e pressione o botão Salvar
Após recarregar a página, vá para a aba ‘Smart Designer‘
Clique no botão ‘Criar Elemento‘
Defina o título do novo elemento (clique no campo dele)
Clique no botão ‘Editar‘ para acessar as opções do novo elemento
Ao entrar nas opções do elemento, você deve selecionar seu tipo: Checkbox, Rádio, Alternador, Cor ou outro, dependendo dos elementos instalados no tema do seu site WordPress (tipos de elementos personalizados descritos abaixo). Cada tipo tem seu próprio conjunto de opções que não se cruzam com outros tipos de elementos!
Todos os elementos básicos, exceto os alternadores, também possuem modelos de layout (lista, bloco ou rádio, checkbox), selecione um que atenda às suas necessidades.
Para sua conveniência, você pode selecionar a taxonomia para a qual está criando o elemento atual
Experimente as opções usando suas descrições para criar as personalizações que desejar
Todas as alterações são salvas automaticamente por AJAX
Quando você decidir que é suficiente, clique no botão ‘Predefinições‘ e salve suas opções personalizadas para futuros elementos (para não começar do zero com um novo elemento)
O último passo é ir para a aba ‘Estrutura‘ e anexar a uma taxonomia o tipo de elemento recém-criado. Todos os elementos criados com o Smart Designer têm o prefixo ‘SD:‘ no título
Pressione o botão Salvar abaixo
Vá para a frente da loja e aproveite 🙂

Dicas sobre personalizações

Se você não souber qual família de fontes aplicar ao texto, use a palavra ‘inherit‘, isso aplicará a família de fontes do tema WordPress atual. E lembre-se, se você aplicar qualquer família de fontes, ela deve ser suportada pelo seu tema WordPress atual e não há garantia de que essa fonte esteja incluída no lado wp-admin do site, então os resultados visuais não serão 100% os mesmos no backend e no frontend.
Se você não precisar de cor para suas imagens de fundo PNG transparentes, use a palavra ‘transparent‘ em vez do código hexadecimal de cor
Diferentes padrões de imagens você pode encontrar usando o Google com a frase de pesquisa ‘imagens de padrões de fundo‘
Se você está procurando por cores de beleza, pode encontrá-las aqui, por exemplo https://codebeautify.org/hex-to-pantone-converter
Conversor de código de cores https://rgbacolorpicker.com/hex-to-rgba

Predefinições

As predefinições salvam suas opções para que você possa aplicá-las a elementos semelhantes, o que reduz o tempo de produção. Você pode fazer o seguinte:

Criar predefinições
Aplicar predefinições a novos elementos do mesmo tipo (checkbox, radio, cor, switch, qualquer tipo personalizado) – basta clicar no título. Por exemplo, uma predefinição criada para radio fica invisível para checkbox e vice-versa.
Compartilhar sua predefinição como informação de texto com outra pessoa (desenvolvedores, colegas, sites, etc …). Clique no botão de olho.
Importar código de predefinição compartilhado com você por alguém. Clique no botão de editar. Cole o código. Pressione o botão ‘Importar‘.

Cor

Elemento Cor – é um elemento especial que possui sua própria funcionalidade – atribuição de cor e imagens para cada termo da taxonomia selecionada (veja o menu suspenso antes do botão ‘Redefinir’) usando um popup

Os dados são armazenados em chaves meta de termo especiais:

woof_sd_color
woof_sd_color_image

Essas chaves podem ser sobrescritas no arquivo functions.php do tema WordPress atual para casos em que você já definiu opções de cor para seus termos de sua própria maneira, use os seguintes hooks:

get_woof_sd_term_color_key – hook para armazenar dados de cor dos termos da taxonomia

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 para armazenar dados de imagem dos termos da taxonomia

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

Elementos Personalizados apenas para Desenvolvedores

WOOF SD permite que desenvolvedores criem seus próprios elementos personalizados, tudo o que é necessário é um bom código CSS+HTML criado. Aqui está um exemplo: https://codepen.io/quinlo/pen/ReMRXz – isso é suficiente para criar um elemento de filtro, você pode vê-lo no site de demonstração -> ‘Tags de Produtos‘

Na imagem abaixo, você pode ver como adicionar tal elemento ao sistema:

no tema WordPress atual (é melhor usar um tema filho) crie a pasta ‘woof’
na pasta ‘woof‘ crie a pasta ‘ext‘
na pasta ‘ext‘ crie a pasta ‘smart_designer‘
na pasta ‘smart_designer‘ crie a pasta elements
na pasta ‘elements‘ crie uma pasta com o nome que desejar, use sublinhado se necessário

a pasta do tipo de elemento personalizado deve conter os seguintes arquivos:

css/styles.css – todo o código CSS do elemento

js/ie.js – sua classe JS, estende IE, apenas copie e cole:

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

Renomeie sua classe JS (em vez de Boxtags), é importante e usada no arquivo data.php

templates/tpl.php – pode ter também mais arquivos se necessário, nomeie como tpl-1.php, tpl-2.php, etc … Todos os arquivos de modelo devem ser declarados no arquivo data.php.

data.php – aqui está um array de opções, cujas chaves são usadas no arquivo css/styles.css e também nos modelos

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

No arquivo data.php, preste atenção nos campos: title – nome do seu elemento no painel superior do SD, prefix – prefixo único para variáveis CSS, js_class – importante, nome da classe do ie.js
Em seguida, no arquivo tpl.php, adicione seu código 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>
```
Não se esqueça de alterar a variável $custom_postfix para o nome da pasta do seu elemento (o mesmo campo prefix do arquivo data.php).
- O modelo possui strings especiais que são substituídas instantaneamente quando o WOOF SD imprime tags no frontend:
  - __TERM_ID__ – ID do termo atual impresso
  - __CLASS__ – classe CSS do sistema
  - __DATA_TAX__ – nome da taxonomia do termo atual
  - __SLUG__ – slug do termo atual
  - __ID__ – id gerado automaticamente para o label
  - __VALUE__ – valor selecionado aqui
  - __CHECKED__ – deve estar em checkbox ou radio para marcá-lo ou não
  - __DISABLED__ – deve estar em checkbox ou radio para desabilitá-lo ou não
  - __CONTENT__ – título do termo a ser exibido aos clientes
  - __COUNT__ – número de termos
  - __RESET_RADIO_BTN__ – usado apenas para radio para redefinir o botão de rádio selecionado no frontend
  - __DATA_ANCHOR__ – sempre necessário para input oculto
  - __TERM_NAME__ – nome do termo atual
- Use o wrapper div sempre da mesma forma que no exemplo acima, e dentro do seu código HTML. Ambos os inputs, como checkbox ou radio + inputs ocultos, sempre devem estar presentes!

Campos:

templates – adicionar modelos de layout do mesmo elemento, ou seu comportamento (radio ou checkbox).
template – número do modelo selecionado por padrão
demo_taxonomies – use como está no código acima, necessário para exibir taxonomias da loja no construtor

sections – aqui, em linhas, são colocadas opções, elas têm suas próprias chaves únicas (em relação ao arquivo data.php) e são de diferentes tipos:

ranger – cria um controle de intervalo com um slider de min a max

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

Preste atenção no campo ‘measure‘, deve haver unidades de medida adequadas

text – campo de texto

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

select – menu suspenso para selecionar valores predefinidos

'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 – gera um input de cor

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

image – gera um input de texto e um botão próximo para selecionar imagem da galeria de mídia do site

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

Em todos os elementos, o campo value tem um valor padrão que deve ser o mesmo que em styles.css
todas as chaves dentro do arquivo css devem ser usadas com o prefixo ‘–woof-sd-ie-‘ + prefixo obtido do arquivo data.php -> campo ‘prefix‘!

O arquivo woof/ext/smart_designer/import.js é criado automaticamente pelo sistema e não deve ser alterado manualmente!!
Resumidamente, você pode baixar um exemplo de elemento personalizado e recriá-lo usando seu próprio CSS e HTML