StoreKit: Product List Widget

Product Guides  Last Updated: Time to Read: 6 minutes

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.

 

product-list-widget

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.

Filter By

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.

Sort By

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.

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.

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.

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.

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.

Show  Titles

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!

Excerpt Length

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.

Show Prices

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.

Show Ratings

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)

Show Buttons

Check to show (default) or uncheck to hide the Add to Cart/Select Options button.

Show Pagination

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.

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