Close

Layers Help & Support

Layers 2.0.10 Update

Layers 2.0.10 Update

Removing the Envato Marketplace listings.

  • Fixed Image Ratio button in the Post widget
  • Removed redundant Envato Market listings

UPDATE LAYERS View on GitHub

StoreKit: Product Categories Widget

Product Guides  Last Updated: Layers ver. 1.6 Time to Read: 5 minutes

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.

product-categories

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 ProductsCategories 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.

productcategories

You may add a title and introduction for this section of your page, if desired, or leave these fields blank.

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.

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.

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.

  • 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.

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 Products Categories to change or add a description. For best results, stick to one-line.

Excerpt Length

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.

Show Button

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.

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.

Set a custom color for the Button and button label, if you enabled it in the Display option.

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 SETTINGS  → MEDIA must be square, ie 1000 x 1000. If you change those settings, make sure you regenerate thumbnails.

Choose Image

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.

Background Color

To choose a background color, click the color palette or enter an HTML hex value.

Repeat

If using a tileable image, choose a Repeat option

Position

This option aligns your image vertically and can help you adjust the placement of the subject of your background if needed.

Stretch

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.

Darken

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.

The advanced option allows you to create a custom CSS class and add widget-specific styling. For details on using this option, see How to Use the Advanced Design Bar Option 

 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.

Jetpack