1. Home
  2. Docs
  3. Woo Essential Documentati...
  4. Modules Documentation
  5. Woo Category Accordion

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

How can we help?