How to Setup WooCommerce pages using Shortcodes

How To  Last Updated: Time to Read: 5 minutes

If you are having issues with your shop, cart or checkout pages page not working, being lost or duplicated, refer to Configure WooCommerce for Layers guide.

This tutorial will walk you through how to manually create or verify the essential WooCommerce pages, and how to use custom WooCommerce shortcodes with Layers page templates or widgets to create special product landing pages.

When you install WooCommerce, you are prompted to automatically install your pages. These are then correctly linked to WooCommerce. You will not see a page element in your Pages list for everything – content like Change Password or Edit Account is dynamically generated using what is called an “Endpoint”. For this reason, you don’t need to create a physical page for all of these different parts of the shop, only the “top-level” areas.

To ensure your WooCommerce pages are setup correctly and linked, click the Title heading under Pages and check for duplicates. Delete any you find, then empty the trash and recrate the pages (or edit the remainder) to verify the content and template setting.

Shop
The shop page is designated by selecting the Blank page template and linking the correct page in WooCommerce Settings. There is no shortcode.

Cart

Used on the cart page, the cart shortcode displays the cart contents and interface for coupon codes and other cart bits and pieces. Use the Blank page template with this shortcode.

Checkout

Used on the checkout page, the checkout shortcode displays the checkout process. Use the Blank page template with this shortcode.

Order Tracking Form

Lets a user see the status of an order by entering their order details this is accessed dynamically from within the My Account Area, so this page is only needed if you wish to provide a separate, specific link. Use one of the Sidebar page templates with this shortcode.

My Account

Shows the account management section where the customer can view past orders and update their information. You can specify the number or order to show (use -1 to display all orders, set to 15 by default)

Use the Default page template with this shortcode.

Special WooCommerce Pages

The following shortcodes can be used to create custom shop pages such as category lists, on-sale and featured products.

When setting the number of columns, keep your WooCommerce image sizes in mind. If you have your images set to the theme recommendation, they will be optimized for 3 columns with a sidebar in most cases. Setting your shortcode to 3 or more columns shouldn’t be an issue, but if you choose to show less columns, your images will not fill out the column.

Use the Default or one of the Sidebar page templates for creating normal pages using these shortcodes, or you may use them in a Layers page by adding the shortcode to a Content Widget column. See How to use Shortcodes With Layers Widgets

Sale Products

List all products on sale.

Best Selling Products

List best selling products.

Top Rated Products

List top rated products.

Products with specific Attributes

List products with an attribute. For example, create a page that shows all products that have thecolor attribute, and show only black ones. Note that the WooCommerce filtered nav allows you to create links to filtered pages like this automatically, but this shortcode is useful if you have a promotion running on black dresses, for example.

Recent products

The Shop page template will do this by default. Only use this shortcode if you want a specially formatted landing page that is different from your main shop index, or if you want to display the shop without widgets on your homepage by using a static page.

The
per_page
attribute determines how many products to show on the page and the columns attribute controls how many columns wide the products should be before wrapping.

Featured Products

Works exactly the same as recent products but displays products which have been set as “featured”. In this example, the page will show 12 featured products per page in 4 columns.

Single Product

Show a single product by ID or SKU.

*If the product isn’t showing, make sure it isn’t set to Hidden in the Catalog Visibility. 

To find the Product ID, edit the product and look at the browser address bar. The ID follows the “post” part of the URL as shown here:

post id

Multiple Products

Show multiple products by ID or SKU.

Add to cart

Show the price and add to cart button of a single product by ID. This is useful if you have a POST announcing a product and want to give users a quick way to buy or download.

Product category

Show multiple products in a category by slug. Note that WooCommerce already creates category pages, but this shortcode is useful if you want to setup a special set of products without using the widgetized page template and widgets.

To find the category slug, go to Products Categories and look at the slug column.

woocommerce product category slugs

Product Categories

Display a list of featured images representing your product categories on a special page.

You can do this without a shortcode by going to WooCommerce → Settings and setting the “Shop Page Display” option to Shoq Both under the Products tab. This shortcode is useful if you want to show all categories on one page without adjusting your post count for your shop.

The number attribute is used to display the number of products and the ids attribute is to tell the shortcode which categories to display. To get the category ID, edit a category and look at the browser address bar. The Category ID is the number following the “tag_ID” part of the URL. If you want to show all categories, you can omit the ids attribute.

woocommerce category id

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