HUSKY - Products Filter Professional for WooCommerce

Smart Designer

From version: v.3.3.1

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

This extension allows to create custom filter elements.

By default WOOF SD has 4 basic elements ready for customizations:

  • Checkbox (default)
  • Radio
  • Switcher
  • Color

More custom elements you can find in WOOF SD Gallery. If you have an idea about your custom element write us on support.

 


Top panel

  • Back – return to list of elements
  • Presets – admin can save current set of options and then apply the on another elements of the same type
  • Drop-down with all possible types of elements on the system. ‘Box tags‘ on the screen above is custom element placed into child WordPress theme. How to create such ones read below.
  • Drop-down with all real woocommerce taxonomies of the shop, just only for visual help when building a filter element. Also uses for element-type ‘Color’ to attach colors and images to the terms of selected by this drop-down taxonomy (read about Color below)
  • Reset – if to click makes reset of all custom options to default one for the current filter element

Create and Apply

  • In tab ‘Extensions‘ activate extension ‘Smart Designer‘ (if its not activated) and press Save button
  • After page reload go to tab ‘Smart Designer
  • Click on button ‘Create Element
  • Set new element title (click on its field)
  • Click on ‘Edit‘ button to enter new element options
  • When you are entered inside the element options you should select its type: Checkbox, Radio, Switcher, Color or another one depending of installed elements on your site WordPress theme (custom elements types described below). Each type has its own set of options which not intersect with another element types!
  • All basic elements except switchers has also layout templates (list, tile or radio, checkbox), select one which fits your needs.
  • For your convenience you can select taxonomy for which you creating current element
  • Play with options using their description to create customizations you want
  • All changes saved automatically by ajax
  • When you decided that its enough, you can click on ‘Presets‘ button and save there your custom options for future elements (for not to start from scratch with new element)
  • Last step is to go to tab ‘Structure‘ and attach for a taxonomy just created element type. All elements created with Smart Designer has there title prefix ‘SD:
  • Press Save button below
  • Go to shop frontside and enjoy 🙂

Tips about customizations

  • If you do not know what font family apply for text use word ‘inherit‘, this will apply current WordPress theme font family. And remember, that if you apply any font family it should be supported by your current WordPress theme and there is no warranty that this font is included into site wp-admin side, so visual results not for 100% will be the same as on backend as on the frontside.
  • If you not need color for your transparent png background images use word ‘transparent‘ instead of color hex code
  • Different images patterns you can find using Google using request phrase ‘background patterns images
  • If you looking for beauty colors you can find them here for example https://codebeautify.org/hex-to-pantone-converter
  • Color code converter https://rgbacolorpicker.com/hex-to-rgba

Presets

Presets allows to save your options for applying for the similar elements, what makes production time shorter. You can do next:

  • Create presets
  • Apply presets to new elements of the same type (checkbox, radio, color, switcher, any custom type) – just click on its title. For example preset created for radio is invisible for checkbox and vise versa.
  • Share your preset as text information with another person’s (developers, colleagues, sites, etc …). Click on eye-button.
  • Import preset code shared with you by somebody. Click on edit-button. Paste code. Press button ‘Import‘.

Color

Color element – is special element which has its own functionality – assignation of color and images for each term of the selected taxonomy (see drop-down before ‘Reset’ button) using popup

Data is storage in special term meta keys:

  • woof_sd_color
  • woof_sd_color_image

That keys can be overloaded in file functions.php of the current WordPress theme for cases if you are already has set color options for your terms in your own way, use next hooks:

  • get_woof_sd_term_color_key – hook for storage taxonomy terms color data
    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 for storage taxonomy terms image data
    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__';
    });

Custom Elements for Developers only

WOOF SD allows for developers create their own custom elements, all what is necessary is good CSS+HTML code created. Here is one example: https://codepen.io/quinlo/pen/ReMRXz – this is just enough to create filter element, you can see it on the demo site -> ‘Products Tags

On the image below you can see how to add such element into the system:

  • on the current WordPress theme (better use child-theme) create folder ‘woof’
  • in folder ‘woof‘ create folder ‘ext
  • in folder ‘ext‘ create folder ‘smart_designer
  • in folder ‘smart_designer‘ create folder elements
  • in folder ‘elements‘ create folder by name you want, use underscore if necessary
  • custom element type folder must has next files:
    • css/styles.css – all css code of the element
    • js/ie.js – your JS class, extends IE, just copy paste:
      '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);
          }
      }
      

      Rename your JS class (instead Boxtags), its important and uses in file data.php

    • templates/tpl.php – can has also more files if necessary, name it as tpl-1.php, tpl-2.php, etc … All template files must be declared in file data.php.
    • data.php – here is array of options, keys of which uses in file css/styles.css and also templates
      <?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
                          ],
                      ]
                  ]
              ],
          ]
      ];
      
      
    • In file data.php make you attention on fields: title – name of your element in top panel of SD, prefix – unique prefix for css vars, js_class – important, class name from ie.js
    • Next in file tpl.php add your HTML code:
      <?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>

      Do not forget to change their variable $custom_postfix to name of the folder of your element (the same prefix field from file data.php).

      • Template has special strings which replaces on the fly when WOOF SD prints tags on the front:
        • __TERM_ID__ – ID of the current printed term
        • __CLASS__ – system css class
        • __DATA_TAX__ – current term taxonomy name
        • __SLUG__ – current term slug
        • __ID__ – auto generated id for label
        • __VALUE__ – selected value here
        • __CHECKED__ – should be in checkbox or radio to make it selected or not
        • __DISABLED__ – should be in checkbox or radio to make it disabled or not
        • __CONTENT__ – term title to display to customers
        • __COUNT__ – number of terms
        • __RESET_RADIO_BTN__ – uses for radio only to reset selected radio button on the front
        • __DATA_ANCHOR__ – always required for hidden input
        • __TERM_NAME__ – current term name
      • Use div wrapper the same always as in the example above, and inside your HTML code. Both inputs, as checkbox or radio + hidden inputs always must be!
  • Fields:

    • templates – add layout templates of the same element, or its behavior (radio or checkbox).
    • template – number of template selected by default
    • demo_taxonomies – use as is in code above, needs to display shop taxonomies in constructor
    • sections – here in rows placed options, they has its own unique keys (relatively to the file data.php) and they are of different types:
      • ranger – allows to create ranger with range-slider from min to max
        'padding_vertical' => [
              ['value' => ['element' => 'ranger', 'value' => 8, 'min' => 0, 'max' => 30], 'measure' => 'px'],
              ['value' => esc_html__('Padding vertical', 'woocommerce-products-filter')]
          ],

        Make your attention on field ‘measure‘, there should be adequate units of measurement

      • text – text field
        'font_family' => [
            ['value' => ['element' => 'text', 'value' => 'Segoe UI'], 'measure' => ''],
            ['value' => esc_html__('Text font family (theme must support)', 'woocommerce-products-filter'), 'help' => '#']
        ],
      • select – drop-down to select any predefined values
        '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 – generates color input
        'color' => [
            ['value' => ['element' => 'color', 'value' => '#adadad']],
            ['value' => esc_html__('Text color', 'woocommerce-products-filter')]
        ],
      • image – generates text-input and button near to select image from site media gallery
        'bg_image' => [
            ['value' => ['element' => 'image', 'value' => ''], 'before' => 'url(', 'after' => ')'], //cell
            ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell
        ],
      • In all elements field value has default value which must be the same as in styles.css
      • all keys inside css file must be use with prefix ‘–woof-sd-ie-‘ + prefix taken from file data.php -> field ‘prefix‘!
  • File woof/ext/smart_designer/import.js is created automatically by the system and should not be changed by hands!!
  • Briefly, you can download custom element example and recreate it using your own CSS and HTML