How to Show WooCommerce Products on Any Page (with video)

By
Staff Author

Last updated - August 27, 2021

The ability to showcase your products on pages other than your WooCommerce store can be a huge plus for site owners. You could get more eyes on a popular product by putting it on a landing page, or enhance your affiliate blogs by embedding a product instead of a simple link.

In this article, you’ll learn how to show WooCommerce products on any page or post using two methods.

Table of Contents

Show WooCommerce Products on Any Page Using Shortcodes

WooCommerce comes with several shortcodes that can be used to insert content inside posts and pages. These shortcodes can be inserted between two paragraphs or any other blocks.

If you’re using the Gutenberg editor, you can use the “Shortcode” block and paste the relevant shortcode in the field. Page builders like Elementor also have shortcode elements which can be used the same way.

The

shortcode is the primary shortcode that can display products by post ID, SKU, categories, attributes, with support for pagination, random sorting, and product tags. Simply adding it to any page will display all the products from your shop page.

The [products] shortcode instantly adds all your active products to the page.
In situations where you want to show specific products on a page, only being able to show all the products is a huge limitation. So you can use attributes to specify the products you want to showcase. These attributes need to be mentioned along with Arguments or attribute values that give you even more control over the products you want to show on a page. These attributes along with their arguments can simply be appended to the shortcode inside the brackets.

For example, the

can be used to show only four products on a page. In this case “limit” is the attribute and “4” is the argument. Each attribute has its own set of acceptable arguments. You need to include the attribute and argument within the square brackets with an “equal to” sign between them and the argument is enclosed within quotation marks:

Here’s a list of all the attributes and their arguments you can use to show specific products on any page or post on your site:

  • limit – Limits the number of products to display. Use any number as argument. Default value is -1 which displays all the products that are not hidden from your shop page.
  • columns – The number of columns of products to display. Use any number as an argument. Default value is set to 4.
  • category – Show products from a specific category. The category slugs are used as arguments. Multiple categories can be filtered by separating a list of category slugs by commas.
  • tag – Show products with a specific tag. The tag slugs are used as arguments. Multiple tags can be filtered by separating a list of tag slugs by commas.
  • attribute – Show variable products with a specific attribute. The attribute slugs are used as arguments. Multiple attributes can be filtered by separating a list of attribute slugs by commas.
  • terms – Show product variations with a specific term. The term slugs are used as arguments. Multiple terms can be filtered by separating a list of term slugs by commas. To be used with attribute.
  • visibility – Display products based on their visibility settings. Available argument options are visible(default), catalog, search, hidden, and featured.
  • ids – Show products with a specific Product ID. The Product IDs are used as arguments. Multiple products can be specified by separating a list of Product IDs by commas.
  • skus – Show products with a specific SKU. The SKU numbers are used as arguments. Multiple products can be specified by separating a list of SKUs by commas.
  • on_sale – Only show products that are on sale and uses arguments true and false. Not to be used in conjunction with best_selling or top_rated.
  • best_selling – Only show best selling products and uses arguments true and false. Not to be used in conjunction with on_sale or top_rated.
  • top_rated – Only show top rated products and uses arguments true and false. Not to be used in conjunction with on_sale or best_selling.
  • orderby – You can sort the products displayed based on various factors. Available argument options are date, id, menu_order, popularity, rand(random), rating, and title. One or more options can be passed by adding both slugs with a space between them.
  • order – This attribute states whether the product order is ascending (ASC) or descending (DESC), using the method set in orderby. Default value is ASC.
  • paginate – This attribute toggles pagination on and is used in conjunction with limit. Argument values are true and false.
  • class – Adds an HTML wrapper class so you can modify the specific output with custom CSS.
  • You can also use operators like terms_operator, tag_operator, and cat_operator to compare attribute terms. Available argument options are AND, IN, and NOT IN. AND will display products from all of the chosen values, IN will display products with the chosen values, and NOT IN will display products that don’t have the chosen values.

Product Shortcode Examples

Here are some examples of showing specific products using shortcodes, attributes, and arguments.

  1. If you only want to show 4 random products on a page, use:
Limiting the number of products to 4 on a page.
  1. If you want to show 4 random products in 2 columns on a page, use:
Showing 4 products in 2 columns using a shortcode.
  1. If you want to show 4 random products in 2 columns on a page and then sort them by the number of their sales, use:
Sorting products by popularity.
  1. If you want to show a specific product using its Product ID, use:
Showing a specific product using its Product ID.
  1. If you want to show multiple specific products using their Product IDs, use:
Showing multiple specific products using their Product IDs.
  1. If you want to show products in the men’s category, use:
Showing products from a specific category.
  1. If you want to show only those products that are on sale, use:
Showing products that are on sale.

Show WooCommerce Products on Any Page Using Blocks

The WooCommerce plugin adds a few product centric blocks that can be used to insert products on a page or post. Though you won’t get the same flexibility as with shortcodes, you can add products by categories, attributes, and tags. Popular page builders like Elementor also offer several product blocks with varying levels of customization.

You can use Gutenberg blocks to add products by category, tag, or attribute.

After inserting the block, you can select the categories, attributes, or tags to be included from the list. You can control the number of products displayed using the columns and rows settings in the right sidebar . Also, you can choose whether the title, price, rating, and add to cart buttons are shown along with the product. You can also order the products based on Newness, Price, Rating, Title, and Sales.

Customization options for the Gutenberg product blocks.

That’s how you can show your WooCommerce products on any page using shortcodes and blocks. Please comment below if you have any questions regarding the process and we’ll get back to you as soon as possible.

If you prefer a video version, please find a video below:

Further reading

RELATED ARTICLES

NO COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here



© LearnWoo - All rights reserved.