Woo Category Accordion

Woo Category Accordion enables you to create a categorized interactive gallery for the products. 

You can include products with their own category and show the product count which can be revealed with a pleasant animation on hover or on click.

Content tab → Content

1. Hide Empty Category - enable to hide the empty product slots
2. Thumbnail Size - select a precise size for showcasing the products
3. Include Categories - select the categories you want to show or select all categories to show all the products added

Content tab → Content

1. Category Count - select a number of categories for every slide
2. Category Offset - pick a number for how many products you want to omit from the first
3. Sorted by - choose how you want the products to be sorted
4. Order By - There are at least 7 ways to order the products, select the one you prefer

Content tab → Display

1. Show Product Count - enable to show product count
2. Show Product Description - enable to show the description text
   
3. Category Name Stacked - enable to show the stacked category name

Content tab → Content Background

Background Color - pick a background color to your liking

Content tab → Accordion Settings 

1. Accordion Style – choose the style of accordion either On Hover or On Click
   
2. Expand Last Interacted Item – choose to keep the last interacted item active
3. Accordion Direction – select the direction of the accordion to be in. Pick between either horizontal or vertical
   
4. Accordion Height – adjust the accordion height 
5. Active Image Size – adjust active image size separately 
6. Gutter Space – adjust the gutter space using the slider

Content tab → Image Overlay Background

Image Overlay Background – Add an overlay background fill color or gradient on top of the image

Design tab → Image Settings 

1. Image Height - adjust the product image height using the slider
2. Image Rounded Corners - include rounded corners to the image for all products 
3. Image Border Width - adjust the width of the border

Design tab → Image Settings

1. Image Border Color - add a beautiful color of your choice to the borders
2. Image Border Style - select a style for your borders
3. Box-shadow - add a box-shadow to the images

Design tab → Category 

1. Font - Choose a font. All Google web fonts are available here. You can upload a custom font as well. 
2. Font Weight - select the weight of the font from Light to Ultra Bold
3. Font Style - select a font style from 
4. Text Alignment - align the text to left, right, or center
5. Text Color - pick a color for the text
6. Text Size - resize the text using the slider
   

Design tab → Category 

1. Letter Spacing - Adjust the spacing between the letters of the text
2. Line Height - adjust the space between multiple lines of text added to the design 
3. Text Shadow - add a shadow to the text
4. Content Wrapper Rounded Corners - include rounded corner by adjusting the four corners

Design tab → Category 

1. Box-shadow - add a box-shadow to the element
2. Content Wrapper Border Styles - add a border to any side you like or have borders on all four sides
3. Content Wrapper Border Width - adjust the width of the border

Design tab → Category 

1. Content Wrapper Border Color - select a color for the border
2. Content Wrapper Border Style - include a style to the border