Present products in a unique way with the Woo Product Accordion!
There are options to include products with their own categories and count. Display the products on hover or on click, accompanied by a lovely animation.
![Screenshot_1.0](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_1.0-5.jpg?lossy=2&strip=1&webp=1)
Content tab → Content
- Product View Type: Select a product view type from default, latest products, best selling, and all the way to product category. These will help you define how you want the products viewed.
- Hide Out Of Stock Products – hide or let view the out of stock products
- Thumbnail Size – pick a size for the image thumbnail
![Screenshot_1.1](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_1.1-4.jpg?lossy=2&strip=1&webp=1)
Content tab → Content
- Product Count – enable to show product count
- Product Offset – pick a number for how many products you want to omit from the first
- Sorted by – choose how you want the products to be sorted
- Order By – There are at least 7 ways to order the products, select the one you prefer
![Screenshot_2](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_2-4.jpg?lossy=2&strip=1&webp=1)
Content tab → Display
- 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
- Show Description – choose to show description text
- Show On Sale Badge – enable to show On Sale Badge
- Show Out of Stock Badge – enable to show the Out of Stock Badge
![Screenshot_3](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_3-2.jpg?lossy=2&strip=1&webp=1)
Content tab → Content Background
- Background color – select background fill color or gradient for the content.
![Screenshot_4](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_4-2.jpg?lossy=2&strip=1&webp=1)
Content tab → Accordion Settings
- Accordion Style – choose the style of accordion
- Expand Last Interacted Item – choose to keep the last interacted item active
- Accordion Direction – select the direction of the accordion to be in
- Accordion Height – adjust the accordion height
- Active Image Size – adjust active image size separately
- Gutter Space – adjust the gutter space using the slider
![Screenshot_5](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_5-3.jpg?lossy=2&strip=1&webp=1)
Content tab → Image Overlay Background
- Image Overlay Background – Add an overlay background fill color or gradient on top of the image
![Screenshot_6.0](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_6.0-3.jpg?lossy=2&strip=1&webp=1)
Design tab → Image Settings
- Image Rounded Corners – include rounded corner by adjusting the four corners
- Image Border Styles – add a border to any side you like or have borders on all four sides
- Image Border Width – adjust the width of the border
- Image Border Color – select a color for the border
![Screenshot_6.1](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_6.1-3.jpg?lossy=2&strip=1&webp=1)
Design tab → Image Settings
- Image Border Style – include a style to the border
- Box-shadow – add a box-shadow to the element
![Screenshot_7.0](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_7.0-3.jpg?lossy=2&strip=1&webp=1)
Design tab → Product
- 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
- Text Size – resize the text
- Letter Spacing – Adjust the spacing between the letters of the text
![Screenshot_7.1](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_7.1-4.jpg?lossy=2&strip=1&webp=1)
Design tab → Product
- 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
![Screenshot_7.2](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_7.2-2.jpg?lossy=2&strip=1&webp=1)
Design tab → Product
- 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
![Screenshot_8.0](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_8.0-3.jpg?lossy=2&strip=1&webp=1)
Design tab → Cart Button
- Background Color – Add a background fill color or gradient for the description text
- 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
![Screenshot_8.1](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_8.1-4.jpg?lossy=2&strip=1&webp=1)
Design tab → Cart Button
- 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
![Screenshot_8.2](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_8.2-3.jpg?lossy=2&strip=1&webp=1)
Design tab → Cart Button
- 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
![Screenshot_9.0](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_9.0-3.jpg?lossy=2&strip=1&webp=1)
Design tab → Badge
- Background Color – Add a background fill color or gradient for the sale badge
- 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
![Screenshot_9.1](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_9.1-3.jpg?lossy=2&strip=1&webp=1)
Design tab → Badge
- 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
![Screenshot_9.2](https://b2480416.smushcdn.com/2480416/wp-content/uploads/2021/12/Screenshot_9.2-3.jpg?lossy=2&strip=1&webp=1)
Design tab → Badge
- 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