Shortcodes are small code snippets that can be used on pages and posts to help you achieve a functionality or display content based on certain criteria in your SC Commerce store. The primary advantage of shortcodes is that you can avoid typing a long stretch of code to achieve a certain functionality. SC Commerce offers various in-built shortcodes that will help you manage your posts and pages more effectively.
Some of the shortcodes below will mention “Args”. These are ways to make the shortcode more specific. For example, by adding
id="99" to the
add_to_cart shortcode, it will create an add-to-cart button for the product with ID 99.
SC Commerce cannot function properly without the first three shortcodes being included somewhere on your site. The three pages containing these shortcodes – Cart, Checkout and My account – are usually created automatically when you set up SC Commerce.
Used on the cart page, the cart shortcode displays cart content and interface for coupon codes and other cart bits and pieces.
Used on the checkout page, the checkout shortcode displays the checkout process.
Shows the ‘my account’ section where the customer can view past orders and update their information. You can specify the number of orders to show. By default, it’s set to 15 (use -1 to display all orders.)
array( 'current_user' => '' )
Current user argument is automatically set using
Lets a user see the status of an order by entering their order details.
products shortcode is the most versatile and powerful. It allows you to display products by post ID, SKU, categories, attributes, with support for pagination, random sorting, and product tags.
The following attributes are available to use in conjunction with the
products shortcode. They have been split into sections for primary function for ease of navigation, with examples below.
Display Product Attributes
limit– The number of products to display. Defaults to and
-1(display all) when listing products, and
-1(display all) for categories.
columns– The number of columns to display. Defaults to
paginate– Toggles pagination on. Use in conjunction with
limit. Defaults to
trueto paginate .
orderby– Sorts the products displayed by the entered option. One or more options can be passed by adding both slugs with a space between them. Available options are: -
date– The date the product was published.
id– The post ID of the product.
menu_order– The Menu Order, if set (lower numbers display first).
popularity– The number of purchases.
rand– Randomly order the products on page load (may not work with sites that use caching, as it could save a specific order).
rating– The average product rating.
title– The product title. This is the default
skus– Comma-separated list of product SKUs.
category– Comma-separated list of category slugs.
tag– Comma-separated list of tag slugs.
order– States whether the product order is ascending (
ASC) or descending (
DESC), using the method set in
orderby. Defaults to ASC.
class– Adds an HTML wrapper class so you can modify the specific output with custom CSS.
on_sale– Retrieve on sale products. Not to be used in conjunction with
best_selling– Retrieve the best selling products. Not to be used in conjunction with
top_rated– Retrieve top-rated products. Not to be used in conjunction with
Content Product Attributes
attribute – Retrieves products using the specified attribute slug.
terms – Comma-separated list of attribute terms to be used with
terms_operator – Operator to compare attribute terms. Available options are: -
AND – Will display products from all of the chosen attributes.
IN – Will display products with the chosen attribute. This is the default
NOT IN – Will display products that are not in the chosen attributes.
tag_operator – Operator to compare tags. Available options are: -
AND – Will display products from all of the chosen tags.
IN – Will display products with the chosen tags. This is the default
NOT IN – Will display products that are not in the chosen tags.
visibility – Will display products based on the selected visibility. Available options are: -
visible – Products visible on shop and search results. This is the default
catalog – Products visible on the shop only, but not search results.
search – Products visible in search results only, but not on the shop.
hidden – Products that are hidden from both shop and search, accessible only by direct URL.
featured – Products that are marked as Featured Products.
category – Retrieves products using the specified category slug.
tag – Retrieves products using the specified tag slug.
cat_operator – Operator to compare category terms. Available options are: -
AND – Will display products that belong in all of the chosen categories.
IN – Will display products within the chosen category. This is the default
NOT IN – Will display products that are not in the chosen category.
ids – Will display products based on a comma-separated list of Post IDs.
skus – Will display products based on a comma-separated list of SKUs.
If the product is not showing, make sure it is not set to “Hidden” in the “Catalog Visibility”.
To find the Product ID, go to the Products screen, hover over the product and the ID appears in the line below the product title.
These attributes cannot be used with the “Content Attributes” listed above, as they will likely cause a conflict and not display. You should only use one of the following special attributes.
best_selling– Will display your best selling products. Must be set to
on_sale– Will display your on-sale products. Must be set to
In the following scenarios, we’ll use an example clothing store.
Scenario 1 – Random Sale Items
I want to display four random on sale products.
products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true"
This shortcode explicity states four products with four columns (which will be one row), showing the most popular on-sale items. It also adds a CSS class
quick-sale, which I can modify in my theme.
Scenario 2 – Featured Products
I want to display my featured products, two per row, with a maximum of four items.
products limit="4" columns="2" visibility="featured"
This shortcode says up to four products will load in two columns, and that they must be featured. Although not explicitly stated, it uses the defaults such as sorting by title (A to Z).
Scenario 3 – Best Selling Products
I want to display my three top best selling products in one row.
products limit="3" columns="3" best_selling="true"
Scenario 4 – Newest Products
I want to display the newest products first – four products across one row. To accomplish this, we’ll use the Post ID (which is generated when the product page is created), along with the order and orderby command.
products limit="4" columns="4" orderby="id" order="DESC" visibility="visible"
Scenario 5 – Specific Categories
I only want to display hoodies and shirts, but not accessories. I’ll use two rows of four.
products limit="8" columns="4" category="hoodies, tshirts" cat_operator="AND"
Alternatively, I only want to display products not in those categories. All I need to change is the
products limit="8" columns="4" category="hoodies, tshirts" cat_operator="NOT IN"
Scenario 6 – Attribute Display
Each of the clothing items has an attribute, either “Spring/Summer” or “Fall/Winter” depending on the appropriate season, with some accessories having both since they can be worn all year. In this example, I want three products per row, displaying all of the “Spring/Summer” items. That attribute slug is
season, and the attributes are
cold. I also want them sorted from the newest products to the oldest.
products columns="3" attribute="season" terms="warm" orderby="date"
Alternatively, if I wanted to display exclusively cold weather products, I could add
NOT IN as my
products columns="3" attribute="season" terms="warm" terms_operator="NOT IN"
Note that by using
NOT IN, I exclude products that are both in “Spring/Summer” and “Fall/Winter”. If I wanted to show all cold-weather appropriate gear including these shared accessories, I would change the term from
Scenario 7 – Show Only Products With tag “hoodie”
These two shortcodes will display your product categories on any page.
product_category– Will display products in a specified product category.
product_categories– Will display all your product categories.
ids– Specify specific category ids to be listed. To be used in
category– Can be either the category id, name or slug. To be used in
limit– The number of categories to display
columns– The number of columns to display. Defaults to 4
hide_empty– The default is “1” which will hide empty categories. Set to “0” to show empty categories
parent– Set to a specific category ID if you would like to display all the child categories
orderby– The default is to order by “name”, can be set to “id”, “slug”, or “menu_order”. If you want to order by the ids you specified then you can use
order– States whether the category ordering is ascending (
ASC) or descending (
DESC), using the method set in
orderby. Defaults to
Scenario 8 – Show Top Level Categories Only
Imagine you only wanted to show top level categories on a page and exclude the sub categories, well it’s possible with the following shortcode.
product_categories number="0" parent="0"
Show a full single product page by ID or SKU.
List related products.
array( 'limit' => '12', 'columns' => '4', 'orderby' => 'title' )
Note: the ‘limit’ shortcode argument will determine how many products are shown on a page. This will not add pagination to the shortcode.
Show the price and add to cart button of a single product by ID.
array( 'id' => '99', 'style' => 'border:4px solid #ccc; padding: 12px;', 'sku' => 'FOO', 'show_price' => 'TRUE', 'class' => 'CSS-CLASS', 'quantity' => '1'; )
Display the URL on the add to cart button of a single product by ID.
array( 'id' => '99', 'sku' => 'FOO' )
shop_messages allows you to show SC Commerce notifications (like, ‘The product has been added to cart’) on non-SC Commerce pages. These are helpful when you use other shortcodes, like
add_to_cart, and would like the users to get some feedback on their actions.