Present the most popular product categories on your home page. The module variations can be found on Product Category.
Before displaying the products in WooCommerce Products Category module, you need to create products in the corresponding section of the admin panel. Check the Product creation section of the theme documentation for more information.
Make sure that the WooCommerce plugin is installed and activated on your site.
Watch the video tutorial on WooCommerce Products Category module creation for more details.
General settings
- Style – choose the most suitable one between 7 preset styles. the styles differ in accordance with the product category content positioning. You may select Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom and Centered style.
- Category to display – select the category to be displayed in the module.
Content settings
- Category name – set it to Enable to show or hide the category title on the products category thumbnail.
- Category title border radius – set the border radius for the category title.
- Category title – enter the title of the product category.
- Category subtitle – enter the subtitle of the product category.
- Custom image – set it to Enable to display custom image as a products category thumbnail. The image from Products -> Categories is displayed by default, this option will override the default category image.
- Custom image – choose the image from the media library to be displayed for the category.
Extra features
- Animation – choose between 14 preset animation effects.
- Custom CSS class – enter our own unique class name for the item – this is a useful option for those who want to create a specific style. E.g.: you can type custom-style class and then go to
Theme optionsGeneral optionsCustom CSS/JSCustom CSSfield and write your own CSS code with this class to get your own style.
Style settings
Image size
- Image width – set the width for the category thumbnail.
- Image height – set the height for the category thumbnail.
Color settings
- Mask background – choose the mask background color. The default value is #000 with the opacity 80%.
- Category name background – set the background color for the category name. The default value is inherited from
Theme OptionsStyling OptionsMain site color.
Box shadow settings
- Box shadow – set it to Enable to activate the shadow for the product featured image.
- Shadow parameters – choose shadow parameter and set the color, in accordance with the following structure: horizontal shadow, vertical shadow, blur, and spread. More details can be found following this link.
- Color – set the color for the product category shadow.
- Box shadow on hover – set it to Enable to activate the shadow for the product featured image on hover.
- Shadow parameters – choose shadow parameter and set the color, in accordance with the following structure: horizontal shadow, vertical shadow, blur, and spread. More details can be found following this link.
- Color – set the color for the product category shadow.
Typography settings
Title typography
These settings are inherited from Theme options Typography/Fonts Headings typography H3 Typography. The color is set to #ffffff by default.
- Element tag – select the tag for the title.
- Font size – set the font size you need to use in the title.
- Letter spacing – set the needed distance between letters.
- Line-height – set the needed distance between lines in the title text.
- Text color – set the color of the font.
- Font style – select the font weight and style (bold, italic) for the title.
- Custom font family – set it to Enable to use custom Google font.
- Font Family – select the font family from the drop-down list.
- Font style – select the font weight and style (bold, italic) for the title.
Subtitle typography
These settings are inherited from Theme options Typography/Fonts Headings typography Content subtitle Typography. The color is set to rgba(255,255,255,0.5) by default.
- Element tag – select the tag for the subtitle.
- Font size – set the font size you need to use in the subtitle.
- Letter spacing – set the needed distance between letters.
- Line-height – set the needed distance between lines in the subtitle text.
- Text color – set the color of the font.
- Font style – select the font weight and style (bold, italic) for the subtitle.
- Custom font family – set it to Enable to use custom Google font.
- Font Family – select the font family from the drop-down list.
- Font style – select the font weight and style (bold, italic) for the subtitle.
The category setting are inherited from Theme options Typography/Fonts Blog typography Category Typography.