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”.
|Image Size||Sets a specific image size to be used in the product loop.|
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.
|Display||Shows products based on it’s attributes.|
|Select Specific Categories||Shows items only from specified categories.|
|Select Specific Posts||Shows only the specified items.|
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.
|Layout type||Sets the predefined layout.|
|Columns||Sets the number of columns.|
|How many posts?||Sets the number of posts in the loop.|
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.
|Product title color||Sets the color of the title.|
|Product category color||Sets the color of the category.|
|Product image border color||Sets the color of border around image.|
|Price color||Sets the color of the price.|
|Sale price color||Sets the color of the sale price.|
|Original price color||Sets the color of the original price.|
|Product rating color||Sets the color of the product rating.|