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

Woo Category Masonry

Utilize Woo Category Masonry to categorize and organize the products on your e-commerce website. The results are stunning!

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. Either in Full, Medium, or Woocommerce Single

Content tab → Content

  1. Include Categories – select the categories you want to show or select all categories to show all the products added
  2. Category Count – select a number of categories for every slide
  3. Category Offset – pick a number for how many products you want to omit from the first
  4. Sorted by – choose how you want the products to be sorted. Either go for Ascending or Descending
  5. 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. Category Name Stacked – enable to show category name stacked

Content tab → Content Background

  • Background color – select background fill color or gradient for the content. 

Design tab → Image Settings

  1. Image Rounded Corners – include rounded corners to the image for all products 
  2. Image Border Styles – add borders to all or particular sides of the image
  3. Image Border Width – adjust the width of the border you have added

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 → Image Settings

  1. Image Hue – adjust image hue using the slider
  2. Image Saturation – adjust the intensity of the image 
  3. Image Brightness – configure the brightness of the image
  4. Image Contrast – include contrast to the image
  5. Image Invert – use this to shift to an inverted image

Design tab → Image Settings

  1. Image Sepia – adjust to apply sepia color tone to the image
  2. Image Opacity – adjust the opacity of the image
  3. Image Blur – add blur to the image
  4. Image Blend Mode – Select from the 16 types of image blend mode for a quick configuration 

Design tab → Grid

  1. Grid Number – adjust the slider to measure the grid number
  2. Grid Gap – adjust the gap between the elements 

Design tab → Category (Name | Count)

  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

Design tab → Category (Name | Count)

  1. Letter Spacing – Adjust the spacing between the letters of the text
  2. Line Height – adjust the space between multiple lines 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 (Name | Count)

  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 (Name | Count)

    1. Content Wrapper Border Color – select a color for the border
    2. Content Wrapper Border Style – include a style to the border
    Was this article helpful to you? Yes No

    How can we help?