1. Home
  2. Woo Essential Documentati...
  3. Modules
  4. 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

    How can we help?