How to Create a Sale Page with Layers and WooCommerce

How To  Tutorials  Last Updated: Time to Read: 2 minutes

This tutorial will walk you through using a variety of ways to create an On Sale landing page for your WooCommerce shop. For best results, we recommend the StoreKit extension for Layers for added Product widgets for your Layers pages.

On Sale Catalog Page

  1. Click on PagesAdd New
  2. Give your page a Title like On Sale
  3. Enter the following Woo Shortcode in the page editor:
    [sale_products per_page="9"]
  4. Select the Blank page option in the Page Template section to the right of the page editor
  5. Click Publish
  6. View the page by clicking View Page

Depending on how you format your shortcodes, you may need to change the number of posts to work with your specifications.

By default, this shortcode will display your products in rows of 4 columns. You can change this by adding a columns setting to the shortcode:

wcsc-onsale

Products listed with the Sale shortcode will inherit your Product List customization set in the StoreKit options of the Customizer, such as new badges, hiding buttons and thumbnail flip. Things like Layout, sort and column count are inherited from the shortcode. For a detailed overview of using WooCommerce Shortcodes, see How to Setup WooCommerce Pages Using Shortcodes

The StoreKit extension adds product widgets to Layers that can help you build attractive landing pages for your sales and promotions. While offering a custom view of Sale items, Landing Pages are also very useful for newsletter linking, ad campaigns and VIP sales. Learn more about StoreKit here.

The Product List Widget in StoreKit provides a huge advantage by allowing you to customize the display of product meta, number of columns, masonry layouts, etc separately from your main catalog views. For details on what you can do with the Product List widget, view the StoreKit User Guide.

  1. Click on PAGESADD NEW
  2. Give your page a Title like On Sale
  3. Select the Layers Template from the Page Template drop-down on the right side of the editor
  4. Publish the page then click Edit Layout
  5. Click +Add Widget and choose the Product List
  6. Select Items on Sale from the Filter by drop-down

In the following example, we have a Layers Slider Widget setup as our hero header, followed by a Content Widget to promote a coupon code and finally our sale products, customized with the Product List Widget:

salelanding

You can use shortcodes in the core Layers Widgets too, though you can’t customize the product list as easily this way. The following shows how the sale items look when our Woo Shortcode is added to a Content Widget with one 12 of 12 column. As you can see, it takes on the theme’s default styling for products, shown here using the Lace & Sole eCommerce Theme:

salelanding-shortcode

To learn how best to setup WooCommerce take part in this online course on Treehouse.