Woo Product Filter

Customize your products with categorized filters! Multiple filters can help you attract more customers. Each product can be beautifully displayed along with its category and number of items!

Content tab → Content

• Product View Type – select product view type from the list of viewing options
  
• Hide Out of Stock – enable to hide the out of stock products
• Include Category – select the categories that you want the viewers to see, if none is selected, all categories will show

Content tab → Content

• Product Count – number of products to be viewed
• Product Offset – state the number of products to cut down from the first
  
• Sorted By – sort the products by either ascending or descending order
• Order By – There are at least 7 ways to order the products, select the one you prefer. 

Content tab → Display

 

• Show Product Filter – enable to show the product filter you have selected from the list
• Show Add To Cart – enable to show add to cart
• Show Price – enable to show the price of a product
• Show Star Rating – enable to show the star rating on the products
  
• Show On Sale Badge – enable to show the on sale badge on the products
  
• Show Out of Stock Badge – enable to show the out of stock badge put on products
  

Design tab → Image Settings

• Image Height – adjust the product image height using the slider
• Image Rounded Corners – include rounded corners to the image for all products 
• Image Border Styles – add borders to all or particular sides of the image
• Image Border Width – adjust the width of the border you have added

Design tab → Image Settings 

• Image Border Color – add a beautiful color of your choice to the borders
• Image Border Style – select a style for your borders
• Box-shadow – add a box-shadow to the images

Design tab → Image Settings

• Image Hue – adjust image hue using the slider
• Image Saturation – adjust the intensity of the image 
• Image Brightness – configure the brightness of the image
• Image Contrast – include contrast to the image
• Image Invert – use this to shift to an inverted image
• Image Sepia – adjust to apply sepia color tone to the image
• Image Opacity – adjust the opacity of the image
• Image Blur – add blur to the image
• Image Blend Mode – Select from the 16 types of image blend mode for a quick configuration 

Design tab → Filter Settings (Category)

• Filter Active Color – select a color for the active filter color
• Separator Color – select a color for the separator 
• Font – Choose a font. All Google web fonts are available here. You can upload a custom font as well. 
• Font Weight – select the weight of the font from Light to Ultra Bold
• Font Style – select a font style from 
• Text Alignment – align the text to left, right, or center
• Text Color – pick a color for the text

Design tab → Filter Settings (Category)

• Text Size – resize the text
• Letter Spacing – Adjust the spacing between the letters of the text
• Line Height – adjust the space between multiple lines added to the design 
• Text Shadow – add a shadow to the text
• Filter Bar and Single Category Rounded Corners – include rounded corner by adjusting the four corners

Design tab → Filter Settings (Category)

• Filter Bar and Single Category Box Shadow – add a box-shadow to the elements
• Filter Bar Border Styles – add a border to any side you like or have borders on all four sides
• Filter Bar Border Width – adjust the width of the border

Design tab → Filter Settings (Category)

• Filter Bar Border Color – select a color for the border
• Filter Bar Border Style – include a style to the border
• Single Category Border Styles – add a border to any side you like or have borders on all four sides
• Border Width – adjust the width of the border
• Border Color – select a color for the border
• Border Style – include a style to the border

Design tab → Grid

• Columns – put the number of columns you want here
• Gutter – adjust the gutter space using the slider

Design tab → Product Name

• Font – Choose a font. All Google web fonts are available here. You can upload a custom font as well. 
• Font Weight – select the weight of the font from Light to Ultra Bold
• Font Style – select a font style from the following
• Text Alignment – align the text to left, right, or center
• Text Color – pick a color for the text
• Text Size – resize the text
• Letter Spacing – Adjust the spacing between the letters of the text

Design tab → Product Name

• Line Height – adjust the space between multiple lines added to the design 
• Text Shadow – add a shadow to the text
• Text Rounded Corners – include rounded corner by adjusting the four corners
• Box-shadow – add a box-shadow to the element
• Border Styles – add a border to any side you like or have borders on all four sides

Design tab → Product Name

• Border Width – adjust the width of the border
• Text Border Color – select a color for the border
• Text Border Style – include a style to the border

Design tab → Product Price

• Font – Choose a font. All Google web fonts are available here. You can upload a custom font as well. 
• Font Weight – select the weight of the font from Light to Ultra Bold
• Font Style – select a font style from the following
• Text Alignment – align the text to left, right, or center
• Text Color – pick a color for the text
• Text Size – resize the text
• Letter Spacing – Adjust the spacing between the letters of the text

Design tab → Product Price

• Line Height – adjust the space between multiple lines added to the design 
• Text Shadow – add a shadow to the text

Design tab → Product Settings

• Background Color – pick a background color of your choice
• Rounded Corners – include rounded corner by adjusting the four corners
• Border Styles – add a border to any side you like or have borders on all four sides

Design tab → Product Settings

• Border Width – adjust the width of the border
• Text Border Color – select a color for the border
• Text Border Style – include a style to the border
• Box-shadow – add a box-shadow to the element

Design tab → Cart Button (Add to Cart)

• Background Color – pick a background color
• Font – Choose a font. All Google web fonts are available here. You can upload a custom font as well. 
• Font Weight – select the weight of the font from Light to Ultra Bold
• Font Style – select a font style from the following

Design tab → Cart Button (Add to Cart)

• Text Color – pick a color for the text
• Text Size – resize the text
• Letter Spacing – Adjust the spacing between the letters of the text
• Line Height – adjust the space between multiple lines added to the design 
• Text Shadow – add a shadow to the text
• Text Rounded Corners – include rounded corner by adjusting the four corners

Design tab → Cart Button (Add to Cart)

• Box-shadow – add a box-shadow to the element
• Border Styles – add a border to any side you like or have borders on all four sides
• Border Width – adjust the width of the border
• Border Color – select a color for the border
• Border Style – include a style to the border

Design tab → View Cart

• Background Color – pick a background color
• Font – Choose a font. All Google web fonts are available here. You can upload a custom font as well. 
• Font Weight – select the weight of the font from Light to Ultra Bold
• Font Style – select a font style from the following

Design tab → View Cart

• Text Color – pick a color for the text
• Text Size – resize the text
• Letter Spacing – Adjust the spacing between the letters of the text
• Line Height – adjust the space between multiple lines added to the design 
• Text Shadow – add a shadow to the text
• Rounded Corners – include rounded corner by adjusting the four corners

Design tab → View Cart

• Box-shadow – add a box-shadow to the element
• Border Styles – add a border to any side you like or have borders on all four sides
• Border Width – adjust the width of the border
• Border Color – select a color for the border
• Border Style – include a style to the border

Design tab → Badge (Sale/Out of Stock)

• Background Color – pick a background color
• Font – Choose a font. All Google web fonts are available here. You can upload a custom font as well. 
• Font Weight – select the weight of the font from Light to Ultra Bold
• Font Style – select a font style from the following

Design tab → Badge (Sale/Out of Stock)

• Text Color – pick a color for the text
• Text Size – resize the text
• Letter Spacing – Adjust the spacing between the letters of the text
• Line Height – adjust the space between multiple lines added to the design 
• Text Shadow – add a shadow to the text
• Rounded Corners – include rounded corner by adjusting the four corners

Design tab → Badge (Sale/Out of Stock)

• Box-shadow – add a box-shadow to the element
• Border Styles – add a border to any side you like or have borders on all four sides
• Border Width – adjust the width of the border
• Border Color – select a color for the border
• Border Style – include a style to the border