How to Display WooCommerce Products on Homepage or Any Other Page

Do you want to display your featured products on several pages of your website? In this blog, we will share how to show WooCommerce products on homepage or any other pages in WordPress.

Once you've installed WooCommerce, it automatically creates a shop page. The WooCommerce shop page shows all your eCommerce products on one page.

But you may also want to display your WooCommerce products on other most visited pages of your online shop. Displaying featured or popular products on various pages boosts customers' curiosity and increases the conversion rate.

Let's show you 2 different ways to show WooCommerce products on homepage or any other page/post of your online store.

• Display WooCommerce products using shortcodes
• Display WooCommerce products using blocks

Start with the basic query-

Why Show Your Products on Multiple Pages on WooCommerce

Inside WooCommerce, you'll get a dedicated shop page to demonstrate your products in an organized way with the necessary details. But showing products only on the shop page won't be a good idea. It can limit customer experience that directly impacts your bottom line.

Moreover, digital customers are always looking for a quick solution. They may miss the product page in a hurry and switch to another website without knowing about your products. This is the reason, you should display your products, especially the most selling products on various pages of your website.

For example, you can add 5 best-selling products from different categories as a section on the home page. Another good idea is to showcase your popular items on the most visited pages of your website. You can offer special deals on these products as well. 

How to Show WooCommerce Products on Homepage or Any Other Pages Using Shortcodes

WooCommerce supports a rich library of shortcodes. You can use them to add content inside posts and pages. Insert these shortcodes in your desired position between two paragraphs or any other blocks.

Now, Gutenberg works as the default WordPress page builder. Select the “Shortcode” block and paste the right shortcode in the field. Page builders like Elementor also operate in the same way.

If you add the shortcode (follow the below image) to any page, it'll show all the products from your shop page. Products will be displayed by post ID, SKU, categories, and attributes, with support for pagination, random sorting, and product tags.

Now, let's say you want to display particular products on a page. In that case, you can use attributes to define the products. Mention these attributes along with Arguments or attribute values. So, you get extended control over the products you're planning to show on a page.

You can easily insert these attributes along with their arguments inside the brackets of the shortcode.

For example, you want to show only 5 products on your homepage. You can limit the number of products with this shortcode-

[products limit="5"]

Here, “limit” is the attribute, and “5” is the argument. Each attribute supports a set of acceptable arguments.

Now, you want to show 5 products that are on sale. Use the shortcode-

[products limit="5" on_sale="true"]

You can include different attributes to show products from individual criteria. Such as best_selling or top_rated as per your requirements. All you need to do is add the shortcode in the right place.

Available Product Attributes to Show WooCommerce Items

Below you'll find the attributes to use in conjunction with the [‘products'] shortcode. We divide them into 3 sections to make them easily understandable-

1. Display Product Attributes
2. Content Product Attributes
3. Special Product Attributes

1. Display Product Attributes

limit: Specify the number of products to show. Add the number of products you want to display as an argument. The default value is -1 to showcase all products from your shop page.

columns: Define the number of columns to set a structural layout based on your site design. The default value is 4 but you can use any number as an argument.

paginate: Toggles pagination on. It can be used in conjunction with the limit. Argument values are true and false. Defaults to false that you can set to true to paginate.

orderby: Categorizes the products displayed by the entered option. Multiple options can be inserted by adding both slugs with a space between them. Available options are- date, id, menu_order, popularity, rand, rating, and title.

category: You get the chance to show products from a specific category. Use category slugs as arguments. It also allows you to retrieve products from multiple categories. All you need to separate the category slugs by commas.

tag: Display products with a specific tag. Use tag slugs as arguments. Multiple tags can be retrieved by separating a list of tag slugs by commas.

skus: Display products with a particular SKU. Use SKU numbers as arguments. You can define multiple products by separating a list of SKUs by commas.

order: Defines whether the product order is ascending (ASC) or descending (DESC), using the method set in orderby. Defaults to ASC.

class: Includes an HTML wrapper class to customize the specific output with custom CSS.

2. Content Product Attributes

attribute: Display products using the specified attribute slug. Use attribute slugs as arguments. Multiple attributes can be defined by separating a list of attribute slugs by commas.

terms: Display product variety using a specific term. You can use the term slugs as the argument. Add multiple terms by separating a list of term slugs with commas.

terms_operator: Used to compare attribute terms. You'll find the options here- AND, IN, & NOT IN. AND will show products from all of the chosen attributes, IN will display products with the chosen attributes, and NOT IN will display products that don’t have the chosen attributes.

tag_operator: Used to compare tags. You'll find the options here- AND, IN, & NOT IN. AND will show products from all of the chosen tags, IN will display products with the chosen tags, and NOT IN will display products that don’t have the chosen tags.

visibility: It will showcase products considering the selected visibility. Such as visible, catalog, search, hidden, and featured.

category: Select products using a particular category slug.

tag: Display products with the specified tag slug.

cat_operator: Used to compare category terms. You'll find the options here- AND, IN, & NOT IN.

ids: Display products with a specific Product ID. Use Product IDs as arguments. You can also retrieve multiple products by separating a list of Product IDs by commas.

3. Special Product Attributes

If you want to display your most selling products or the products with special deals, use these Special Product Attributes. However, you can't use these attributes with the “Content Attributes” we mentioned above. Mixing them together may cause a conflict and as a result, products will not be shown properly.

Use only one of the following special attributes at once-

• on_sale: Displays products that are on sale. Set the value as true. You can't use this attribute in conjunction with best_selling or top_rated.
• best_selling: Retrieves the best-selling products. Set the value as true. You can't use this attribute in conjunction with on_sale or top_rated.
• top_rated: Only displays top-rated products. Available arguments are true and false. You can't use this attribute in conjunction with on_sale or best_selling.

How Product Shortcodes Work On Your Online Store Pages

Here, we'll show some examples of displaying products using shortcodes, attributes, and arguments.

Example 1: Show 4 Recent Products in 2 columns on a page. Use the shortcode-

[recent_products per_page="4" columns="2"]

The ‘per_page’ shortcode determines the number of products to show on the page and the columns attribute allocates the column number in which products will be shown.

Example 2: Display 4 products that have been set as “featured” in 2 columns-

[featured_products per_page="4" columns="2"]

It'll show 4 of your featured products in 2 columns-

Example 3: If you want to show your WooCommerce Products by IDs check the shortcode below-

[products ids="12, 24, 26, 28"]

Or, you can categorize the products by their SKUs and sort them by date-

[products skus="ABC123, XYZ123, DEF123" orderby="date" order="desc"]

However, you can also use Gutenberg blocks to showcase WooCommerce products on different pages. Let's show you the process-

Display WooCommerce Products on Any Page Using Blocks

As you know, Gutenberg works as the default browser of WordPress. Once you've installed WooCommerce on your WordPress site, it automatically adds some extra blocks to your editor. Using these blocks you can add products to a page or post.

However, blocks will not give you the same flexibility as you enjoy with shortcodes. Here, you can add products by categories, attributes, and tags. If you're using page builders like Elementor you can extend the customization options with a wide range of customizations.

After adding your desired block, you can set the categories, attributes, or tags from the list. Also, you'll find a customization panel on the right side of the screen. It enables you to manage the number of products displayed using columns and rows.

Under Content, there are options to control the details that appeared with the products. Select the attributes you want to display with your products such as title, price, rating, and add-to-cart buttons. You can also order the products considering Newness, Price, Rating, Sales, and Title.

FAQs

Show WooCommerce Products on Homepage or Other Pages of Your Online Store

WooCommerce supports an effective way to build and sell products online. It comes with a wide range of useful features and unlimited customization options. So, users can easily mold the functionalities as per their requirements.

WooCommerce comes with a default shop page to display all products in an attractive way. In order to extend user experience, you can also show your special products on other important pages as well.

Use WooCommerce shortcodes or Gutenberg blocks to add products to any post or page on your WooCommerce store.

If you have any further queries on how to show WooCommerce products on homepage use the comment section below.