Filter Block Design

With WooCommerce Product Filter, you can style every item and parameter in your product filter. In the filter settings, you can see the design tab where you can improve the style of your filter. This menu is logically divided into 4 tabs for ease of use. This tutorial will help you improve the custom design of your product filter blocks without any programming knowledge.

Blocks Design

First, go to Design-> Blocks and select Use Custom Styles .Choose your custom styles for filter blocks. Any settings you leave blank will default.

Blocks Design

Customizing Design Blocks

Here you can select and configure the following parameters:

  • Font.

You can choose the font, font size, style and color for the blocks of your filter.

Style filter blocks

  • Background.

You can choose a background color for your filter blocks, leave it blank and the default setting will be applied.

  • Borders.

Set the border color and style for your filter.

Blocks Design

  • Borders size.

Here you can set borders width in this order: top, right, bottom, left.

  • Padding.

Here you can set paddings in this order: top, right, bottom, left.

  • Margin.

Here you can margins in this order: top, right, bottom, left.

Blocks Design

  • Checkboxes

Here you can styles for checkboxes:

  • Select the type of checkboxes (circle;square;square rounded corners)
  • Size in pixels
  • Color: checked and unchecked checkbox

Blocks Design

Check out our documentation to learn more about other WooCommerce Product Filter options.
Also, if you have any questions, please contact us and we will be happy to help you.

Categories
Latest Articles

Buy Now Bundle and save over 60%

Buy now