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