WooCommerce Product Filter has very flexible Design settings that you can easily customize to suit the style and functionality of your store. For ease of use, the “Design” settings tab is logically divided into 4 tabs. This tutorial will help you understand the options on the General tab.

Filter Width

Here you can set the filter width in pixels or percentage. By default, the width is 100% new; you can change it if you wish in % or pixels.

This parameter sets the maximum width of the Filter.But the rest of the contents of the Filter also affects its width – check how it looks in preview mode.

Filter Block Width

Here you can set the filter block width in pixels or percentage. By default, the width is 100% new; you can change it if you wish in % or pixels.

This parameter sets the maximum width of the Block Filter.But the rest of the contents of the  Block Filter also affects its width – check how it looks in preview mode.

Filter Block Height

Here you can set the height in pixels. If not filled, then the height is calculated automatically based on the content of the filter. Please note that if the value of the Maximum height in frontend of the filter is greater than the specified value, some data may be hidden

CSS editor

CSS editor is a tool for simple editing of CSS code. Read this article to find out How to Configure CSS for Product Filter?

JS editor

JavaScript Editor – write and run your javascript code online, see result in live view or in editor console

Use theme styles

Disable the use of custom plugin styles for filter elements. This option does not work in admin preview.

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.