Woo Category

This widget helps you showcase WooCommerce categories on your website. It comes with different styles and layouts to display your categories in various ways. You can control how your categories appear, including their titles, the number of products, and descriptions, and even add a customizable button.

It also lets you filter the categories in different ways so you can control exactly what shows up on your website. You can decide to include or leave out certain categories, pick how many categories to display, and even hide categories that don’t have any products in them.

By using this widget, you can make sure your online store looks great and is easy for customers to use, helping them find what they want quickly and easily.

The Woo Category widget features the following controls.

Content

Layout

• Layout: Select layout from the grid or slider.
  • Columns: Specify the number of columns to be shown in a single row(applicable for Grid layout).
  • Columns Gap: Specify the columns gap(applicable for Grid layout).
  • Row Gap: Specify the row gap(applicable for Grid layout).

• Preset Layout: Select the preset layout from the available options.
• Hover Animation: Select the hover animation(applicable for Preset 3).
• Show Content: Enable the option to display the content.
  • Show Title: Enable the option to display the title.
    • HTML Tag: Select the HTML tag for title.
  • Show Count: Enable the option to display the category count.
    • Count Position: Select the position from inline or outside.
    • Count Alignment: Select the alignment from left or right.
  • Show Description: Enable the option to display the description.
    • Word Limit: Specify the word limit for description.

• Show Child Categories: Enable the option to display the child category.
  • Separator: Enter the separator to separate child categories.
• Show Button: Enable the option to display the button.
  • Text: Enter the text for button.
  • Icon Type: Select the icon type.
  • Position: Select position from before or after.
• Show Featured Image: Enable the option to display the category featured image(applicable for Preset 1).
• Image Resolution: Select the image resolution.

Category Settings

• Filter By: Choose the way you want to filter the categories.
• Exclude Categories: Select the category you want to exclude.
• Exclude Child Categories: Select the child category you want to exclude.
• No. of Category to Show: Specify the number of categories to be shown.
• Order By: Select the order by properties.
• Order: Select from ascending or descending.
• Show Only Top Level: Enable the option to display only top level categories.
• Hide Empty: Enable the option to hide the empty category.

Slider Settings

Note: This option is applicable when the Slider Layout is selected.

• Loop: Enable the loop option to display the slides continuously.
• Effects: Select effects from Slide, Coverflow, Fade, or Flip.
• Slides Per View: Specify the number of slides
• Slides Per Group: Specify how many slides should move together when navigating through the slider.

Setting

• Speed: Set the transition speed when moving one slide to the next.
• Autoplay: Activate the option to enable autoplay while onload.
• Space Between Slides: Specify the space between slides.
• Pause On hover: Enable the option to pause slides during hover(applicable when Autoplay is on).
• Auto Height: Enable the option to set the auto height.

Pagination

• Pagination Type: Set the pagination type.
• Clickable: Enable the option to make arrows clickable(applicable for Bullets Pagination type).
• Keyboard Control: Activate the option to enable keyword control.
• Scroll bar: Enable the option to display the scroll bar.

Prev/Next Navigation

• Enable: Enable the option to display navigation.
  • Position:  Choose either from Outside or Inside.
  • Icon Prev:  Set the previous icon from the available icons.
  • Icon Next: Set the next icon from available icons.
  • Horizontal Position: Select the horizontal position of navigation.
  • Vertical Position: Select the vertical position of navigation.

Style

Category Card Style

Card

• Split Layout: Select the layout(applicable for Preset Layout 1).
  • Background Type: Choose between a classic or gradient.
  • Classic
    • Color: Choose the color for the background.

• Gradient
  • Color: Select the color for the background.
  • Location: Determine the position of the color on the background by specifying their location in percentage.
  • Second Color: Select the second color for the background.
  • Location: Determine the position of the second color on the background by specifying their location in percentage.
  • Type: Select either Radial or Linear.
    • Radial
      • Position: Set the position.
    • Linear
      • Angle: Set the angle using DEG, GRAD, RAD, and TURN.

• Border Type: Select the border type.
• Box Shadow: Set the box shadow.
• Border Radius: Set the border radius.
• Padding: Set the padding.
• Margin: Set the margin.

Content

• Background Type: As we mentioned above, you can choose from Classic or Gradient. Check here.
• Padding: Set the padding.
• Alignment: Select the alignment of content.
• Space: Specify the space between content.

Image

• Aspect Ratio: Select the aspect ratio of image.
• Border Type: Select the border type.
• Scale on Hover: Enable the option to scale the image when hovering.
• Box Shadow: Set the box shadow.

Count

• Color: Select the color of count.
• Typography: Set the typography.

Title

• Color: Select the color of title.
• Hover Color: Select the hover color of title.
• Typography: Set the typography.

Description

• Color: Select the color of description.
• Typography: Set the typography.

Child Category

• Direction: Select the direction of child categories.
• Color: Select the color of child categories.
• Typography: Set the typography.

Button

• Width: Specify the width of button.
• Typography: Set the typography.
• Box Shadow: Set the box shadow.

Normal

• Text Color: Select the button text color.
• Background Type: As we mentioned above, you can choose from Classic or Gradient. Check here.

Hover

Styling for hover state is available under this section. It will be applied when someone hovers the button.

• Border Type: Select the border type.
• Gap: Specify the gap between button content.
• Padding: Set the padding.
• Align Self: Select from start, center, or end.

Icon

• Primary Color: Select the primary color of icon.
• Secondary Color: Select the secondary color of icon.
• Size: Specify the size of icon.
• Padding: Set the padding.
• Rotate: Set the rotation.
• Border Width: Specify the border width.
• Border Radius: Set the border radius.

Slider

Prev/Next Navigation

Normal

• Color: Select the color of navigation icon.
• Background Color: Select the background color of navigation icon.
• Border Type: Set the border.
• Border Radius: Set the border radius.

Hover

Styling for hover state is available under this section. It will be applied when someone hovers the prev/next navigation icons.

• Arrow Size: Specify the size of icon.
• Horizontal offset: Enter the horizontal offset value.
• Vertical Offset: Enter the vertical offset value.
• Padding: Set the padding.

Dots

Note: These options are applicable when Bullets is selected as Pagination Type.

• Dots Size: Specify the dots size.
• Top Offset: Specify the top offset value.
• Active Dot Color: Select the dot active color.
• Inactive Dot Color: Select the dot inactive color.
• Margin: Set the margin.

Fraction

Note: These options are applicable when Fraction is selected as Pagination Type.

• Background Color: Select the background color or fraction pagination.
• Color: Select the color or fraction pagination.
• Typography: Set the typography.
• Padding: Set the padding.

Progress Bar

Note: These options are applicable when the Progress Bar is selected as Pagination Type.

• Progress Bar Color: Select the color or progress bar.
• Progress Color: Select the color of progress.
• Progress Bar Size: Specify the progress bar size.
• Margin: Set the margin.

Scroll Bar

• Scrollbar Size: Specify the size of the scroll bar.
• Scrollbar Drag Color: Select the drag color of scroll bar.
• Scrollbar Color: Select the color of scroll bar.