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 Buttons without any programming knowledge.
First, go to Design-> Buttons and select Use Custom Styles .Choose your custom styles for filter buttons. Any settings you leave blank will default.
Customizing Buttons Design
Here you can select and configure the following parameters:
Here you can set the block alignment with the product filter buttons, set the value to the left,center or right.
You can choose the font, font size, style and color for the buttons of your filter.
Also you can set the design by hovering over the button.
Set text shadow in this order: color, X, Y, blur.
Here you can set the maximum width of your product filter buttons in percent or pixels
Here you can set the maximum height of your product filter buttons in pixels
Here you can set the rounding level of the buttons
You can choose a background color for your filter Buttons, leave it blank and the default setting will be applied.
Set the border color and style for your filter Buttons.
Here you can set button shadow in this order: color, X, Y, blur, spread (px).
Here you can set paddings in this order: top, right, bottom, left.
Here you can margins in this order: top, right, bottom, left.
Read this tutorial to learn how to improve options your product filter buttons .