StoreKit: Product Categories Widget
This doc is part of the StoreKit User Guide
The StoreKit Product Categories widget displays the category image, title and description for each selected category in a grid or Masonry layout on your Layers pages, and may be customized using the powerful Layers design bar and column settings.
To display a list of category links in your Shop Sidebar, you can use the WooCommerce Product Categories widget.
To set images for your categories, go to→ from the WordPress admin, edit a category, and click on the Thumbnail option.
Category images should be at least 630px wide to take advantage of all the image and column size options in the widget. If you plan to use them as page title backgrounds, we recommend they be at least 2000px wide and 600px tall.
1 – Widget Title & Description
You may add a title and introduction for this section of your page, if desired, or leave these fields blank.
2 – Add Categories
Click into the Select Which Categories to Display field and a drop-down of your existing Product Categories will display. Select the categories you wish to add in the order you want them to appear, or begin typing a category name to locate it in the list quickly.
3 – Layout
Click the Layout button in the Widget Design Bar and choose between Boxed, Full-Width (default) and Full Screen.
- Boxed – restricts the width of your slider to a max of 1000px. This layout works best when the header and footer of your site are also boxed.
- Full-Width – expands your slider to the full width of the browser window. The content and individual slide width are still restricted and can be customized separately.
4 – Text
Choose an alignment for the widget’s main Title and Description and select your preferred size.
- Each size option is pre-configured with optimal balance, line height and size combinations.
To set a custom color, click on the Color option and select a color from the palette or enter an HTML hex value.
5 – List Style
- Grid will arrange your columns in a uniform grid with an equal height on all column blocks.
- Masonry allows each column block to fit together at various heights (like Pinterest)
Uncheck the gutter option to remove the margins/spacing between blocks.
6 – Display
This section controls the visibility of all the things that the categories can display.
Title & Excerpt Position
- Regular places the category title and description below the category image.
Overlay places the category title and description over the image when hovered.
Show Featured Images
Check to show (default) or uncheck to hide the Category image.
Show Category Titles
Check to show (default) or uncheck to hide the Category Title
Show Product Count
Check to show or uncheck to hide (default) the number of products in the category next to or in place of the Category Title.
Show Category Description
Check to show (default) or uncheck to hide the Category Description. Edit your categories under→ to change or add a description. For best results, stick to one-line.
If Category Excerpts are displayed, you can control the length of the text by entering a character count here. This will clip overly long descriptions to that length to aid in providing a uniform look and content height in the widget. Increase this number if you want to ensure the whole description shows, regardless of length.
Check to show (default) or uncheck to hide the View Category button. If you choose to show the button, you may set a custom button label in the following field.
7 – Columns
Choose the number of columns for your layout, to a maximum of 6.
You may also set a custom background color for the content area if the Regular Display option is used.
Uncheck the gutter option to remove the margin/spacing between columns, if desired.
8 – Buttons
Set a custom color for the Button and button label, if you enabled it in the Display option.
9 – Image Ratio
Image Ratio options control how your images are scaled or cropped.
From top to bottom:
- Portrait: Uses a uniform height image cropped from center. Originals with a portrait orientation are least affected. Featured images should be at least 480px tall for this to work well
- Landscape: Looks for a 660px wide copy of your image at 2 columns and 480px at 3 or more. Portrait oriented originals are cropped from center. If your original is smaller than 660px wide, use more columns.
- Square: crops your image to 660×660 for 2 columns or 480×480 from center for 3 columns or more.
- None: Uses the original image, scaled proportionately depending on the column size and browser window width. Best used in combination with the Masonry layout.
- Round: When set to 3 columns or more, this option uses the Layers square crop of your product image and applies a circular radius. If using a 2 or 1 column layout, your Large image dimensions configured under regenerate thumbnails. → must be square, ie 1000 x 1000. If you change those settings, make sure you
10 – Background
Click here to choose an image if you want it to fill the entire widget behind the content with something other than a solid color.
Textures, photos and images without embedded text are best.
Full-size images you will not be tiling should be at least 1908px wide and as tall as your slider height to ensure highest quality at all screen sizes.
To choose a background color, click the color palette or enter an HTML hex value.
If using a tileable image, choose a Repeat option
This option aligns your image vertically and can help you adjust the placement of the subject of your background if needed.
Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.
For the pros, this option sets the background-size: cover; property.
Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.
SAVE & PUBLISH when finished, then click the Layers icon in the Customizer nav bar and choose Preview This Page to check out your new slider.
Did you know?
Our friends at Jetpack are doing some incredible work to improve the WordPress experience. Check out Jetpack and improve your site's security, speed and reliability.