Products Shortcode

In this article, we’ll explain about displaying product posts via Products loop shortcode and configuring the shortcode settings.

To see the Products shortcode in action, you may check the demo page.

Creating Product Posts

Product posts are created separately in Product post type. To learn about creating different kind of product posts, read Creating a product post article then continue to the next section.

Displaying Product Posts

After creating product posts, it’s time to display them in a page. For this purpose, we need to add Product Loop shortcode in a page. To learn exactly how to do that, read Displaying product posts article then continue to the next section.

Configuring Image Dimensions

There is one setting in the Product Loop settings pop-up to configure the image dimensions called “Image Size”.

Adding Custom Image Size Template

You can add custom image sizes to be used in various locations such as product loop shortcode.

To add a custom image size:

This image size will now be available to use in Product Loop settings pop-up > Image size setting.

Showing Specific Posts

There are three settings in product loop settings pop-up which allow you to show the items based on specific categories, attributes or IDs: Display, Select Specific Categories and Select Specific Posts.

Configuring Pagination

In Product Loop settings pop-up, there is a setting called Pagination to enable or disable the pagination for the loop.

Configuring the Layout

There are 2 layout types: Compacty & Overlay and Open & Seperated. You can check how both layouts look by going to Shop section in our main demo.

Configuring the Style

There is a tab called Style & Colors in Product Loop settings pop-up which let’s you configure the style of the loop.