Woo Category

Estimated reading: 8 minutes 29 views

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).
Woo Category: Grid Layout Settings
Woo Category: Grid Layout Settings
  • 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.
Woo Category: Content Settings
Woo Category: Content Settings
  • 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.
Woo Category: Content Settings
Woo Category: Content Settings

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.
Woo Category: Category Settings
Woo Category: Category Settings

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.
Woo Category: Slider Settings
Woo Category: Slider Settings

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.
Woo Category: Settings
Woo Category: Settings

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.
Woo Category: Pagination Type Settings
Woo Category: Pagination Type Settings

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.
Woo Category: Prev/Next Navigation Settings
Woo Category: Prev/Next Navigation Settings

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.
Woo Category: Card Background Type Settings(Classic)
Woo Category: Card Background Type Settings(Classic)
  • 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.
Woo Category: Card Background Type Settings(Gradient)
Woo Category: Card Background Type Settings(Gradient)
  • 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.
Woo Category: Card Style Settings
Woo Category: Card Style Settings

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.
Woo Category: Card Content Style Settings
Woo Category: Card Content Style Settings

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.
Woo Category: Card Image Style Settings
Woo Category: Card Image Style Settings

Count

  • Color: Select the color of count.
  • Typography: Set the typography.
Woo Category: Count Style Settings
Woo Category: Count Style Settings

Title

  • Color: Select the color of title.
  • Hover Color: Select the hover color of title.
  • Typography: Set the typography.
Woo Category: Title Style Settings
Woo Category: Title Style Settings

Description

  • Color: Select the color of description.
  • Typography: Set the typography.
Woo Category: Description Style Settings
Woo Category: Description Style Settings

Child Category

  • Direction: Select the direction of child categories.
  • Color: Select the color of child categories.
  • Typography: Set the typography.
Woo Category: Child Category Style Settings
Woo Category: Child Category Style Settings

Button

  • Width: Specify the width of button.
  • Typography: Set the typography.
  • Box Shadow: Set the box shadow.
Woo Category: Button Style Settings
Woo Category: Button Style Settings

Normal

  • Text Color: Select the button text color.
  • Background Type: As we mentioned above, you can choose from Classic or Gradient. Check here.
Woo Category: Button Style Settings(Normal)
Woo Category: Button Style Settings(Normal)

Hover

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

Woo Category: Button Style Settings(Hover)
Woo Category: Button Style Settings(Hover)
  • 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.
Woo Category: Button Style Settings
Woo Category: Button Style Settings

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.
Woo Category: Button Icon Style Settings
Woo Category: Button Icon Style Settings

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.
Woo Category: Slider Prev/Next Navigation Style Settings(Normal)
Woo Category: Slider Prev/Next Navigation Style Settings(Normal)

Hover

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

Woo Category: Slider Prev/Next Navigation Style Settings(Hover)
Woo Category: Slider Prev/Next Navigation Style Settings(Hover)
  • 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.
Woo Category: Slider Prev/Next Navigation Style Settings
Woo Category: Slider Prev/Next Navigation Style Settings

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.
Woo Category: Dots Style Settings
Woo Category: Dots Style Settings

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.
Woo Category: Fraction Style Settings
Woo Category: Fraction Style Settings

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.
Woo Category: Progress Bar Style Settings
Woo Category: Progress Bar Style Settings

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.
Woo Category: Scroll Bar Style Settings
Woo Category: Scroll Bar Style Settings
Share this Doc

Woo Category

Or copy link

CONTENTS