Buttons 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 Buttons without any programming knowledge.

Buttons Design

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:

• Block align

Here you can set the block alignment with the product filter buttons, set the value to the left,center or right.

• Font

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.

• Text shadow

Set text shadow in this order: color, X, Y, blur.

• Button width

Here you can set the maximum width of your product filter buttons in percent or pixels

• Button height

Here you can set the maximum height of your product filter buttons in pixels

• Corners radius

Here you can set the rounding level of the buttons

• Background

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

• Borders

Set the border color and style for your filter Buttons.

• Button shadow

Here you can set button shadow in this order: color, X, Y, blur, spread (px).

• 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.

Read this tutorial to learn how to improve options your product filter buttons .

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.