How to Add WooCommerce Products to a Page

Looking for a quick way to add WooCommerce products to a page? The best solution for you is to use product shortcodes provided by WooCommerce.

Table of Contents

If you want to unlock the full potential of WooCommerce, you need to know how to use shortcodes. This is because they power much of the plugin’s functionality. This includes all the public-facing pages like product categories, checkout, and cart.

Shortcodes are tiny pieces of code that perform specific actions on your site. All you have to do is place this code on a WordPress page, post, or widget area and it will load content.

How to Add WooCommerce Products to a Page

By the end of this tutorial, you will be able to add products to any page on your store. We will also share some of the attributes that can be used in conjunction with the [products] shortcode.

Read on, as we will also share some examples of scenarios on how you can use the attributes in conjunction with the shortcode.

Let us get right into it.

Products Shortcode

The [products] shortcode allows you to display products by post ID, SKU, categories, and attributes. They support pagination, random sorting, and product tags.

This replaces the need for multiples shortcodes such as [featured_products], [sale_products], [best_selling_products], [recent_products], [product_attribute], and [top_rated_products].

These shortcodes were needed in versions of WooCommerce below 3.2. The [products] shortcode replaces the strings used in earlier versions.

Here are some of the attributes are available to use in conjunction with the [products] shortcode:

Let us look at some Product Scenarios:

1. Random Sale Items

To display on sale products on any page, add the following shortcode:

[php] [products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true" ] [/php]

It will display four random on sale products with four columns and one row.

2. Featured Products

If you want to display featured products, add the following shortcode:

[php] [products limit="4" columns="2" visibility="featured" ] [/php]

The shortcode adds two featured products per row. It also has a limit of 4 items.

3. Best Selling Products

To display the best selling products in your store, add the following shortcode:

[php] [products limit="3" columns="3" best_selling="true" ] [/php]

It will display three top best selling products in one row.

4. Newest Products

If you want to display the newest products first, we will use the ‘id’ attribute:

[php] [products limit="4" columns="4" orderby="id" order="DESC" visibility="visible"] [/php]

5. Specific Categories

To display products from a certain category, add the following shortcode:

[php] [products limit="8" columns="4" category="springs, accessories" cat_operator="AND"] [/php]

6. Sorting Products by Custom Meta Fields

You can take this a step further and choose to order products by the pre-defined values above. For example, you may want to sort products by custom meta fields.

To achieve this, add the following code in the functions.php file of your child theme:

[php] add_filter( ‘woocommerce_shortcode_products_query’, ‘njengah_shortcode_products_orderby’ );

function njengah_shortcode_products_orderby( $args ) {

$standard_array = array(‘menu_order’,’title’,’date’,’rand’,’id’);

if( isset( $args[‘orderby’] ) && !in_array( $args[‘orderby’], $standard_array ) ) {

$args[‘meta_key’] = $args[‘orderby’];

$args[‘orderby’] = ‘meta_value_num’;

}

return $args;

}
[/php]

Conclusion

By now, you should be able to display products anywhere on your site by using the product’s shortcode. You can modify the shortcode using attributes depending on your needs.

Although it may seem a little technical, shortcodes allow you to create virtually any type of eCommerce page. All you need to do is copy and paste it.

Editorial Staff

How to Add WooCommerce Products to a Page

How to Add WooCommerce Products to a Page

Products Shortcode

1. Random Sale Items

2. Featured Products

3. Best Selling Products

4. Newest Products

5. Specific Categories

6. Sorting Products by Custom Meta Fields

Conclusion

Similar Articles

Related