StoreKit: Product List Widget
This doc is part of the StoreKit User Guide
The StoreKit Product List widget displays your product posts in a grid or masonry layout on your Layers pages, and may be customized using the powerful Layers design bar.
From the main Customizer window, ensure you are previewing a Layers page, then click Edit Layout and expand the page’s Body panel. To add the Product List widget, click +Add a Widget and select Product List
To display a list of product links in your Shop Sidebar, including On Sale or Featured items, use the WooCommerce Products widget.
1 – Widget Title & Description
The widget is prefilled with demo content and settings. You may edit the title and introduction for this section of your page, if desired, or remove the default content for no title or description.
2 – Choose Products
New in 1.6 this option allows you to choose from WooCommerce Featured Products, On Sale products, or by Category.
To feature products, you must choose Featured in the Product editor, or click the little star icon in the main Products admin page on the right side of the product row.
Category to Display
If Category is selected in the filter box, you may choose a category here or leave All selected to grab the latest products from all categories.
Number of Products to Show
Choose the number of products. To keep your homepage from loading slowly or overwhelming visitors, we recommend keeping this low – less than 12. Pagination can be enabled under the Display option.
Choose how to sort the products. To manually order the posts, you may select Custom Order, which requires you Quick Edit each product under the Products admin page and add a number in the Order field. All products in the selected category must have an Order number for this to work, since 0 is given highest priority.
3 – Layout
Click the Layout button in the Widget Design Bar and choose between Boxed or Full-Width (default)
- 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
Choose from Grid or Masonry. Masonry allows product columns with varying heights due to different image dimensions or product descriptions to tile themselves. Grid will list them in a strict grid and depends on using one of the image ratio settings explained in a minute.
6 – Display
This section controls the visibility of all the things that the products can display.
Title & Excerpt Position
- Regular places the title and product info below the product image.
- Overlay places the title, price, button over the image when hovered. This option can only support a condensed amount of information so some checkbox options will be ignored if this is enabled.
Show Featured Images
Check to show (default) or uncheck to hide the Product image.
Check to show (default) or uncheck to hide the Product Title
Show Short Description
Check to show (default) or uncheck to hide the Product Short Description. This is drawn from the Product Short Description field or Custom Excerpt, if enabled in your Product Edit screen and is NOT an auto-generated excerpt of your product post content!
If the short description is 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 Product Price.
Show Sales Badges
Check to show (default) or uncheck to hide the Sale! badge which displays in the top left corner of the image.
Check to show (default) or uncheck to hide the star ratings which appear when the product has received at least one review.(does not show in Overlay mode)
Check to show (default) or uncheck to hide the Add to Cart/Select Options button.
Check to show or uncheck to hide (default) post pagination below the widget. Products will be paginated within the chosen Category (if selected) on the same page.
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. Product images should be at least 660px wide to take advantage of all the image ratio and column sizes available.
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.