Products Shortcode

Updated on January 3, 2019

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.

Products shortcode - demo


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”.

SettingDescription

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:

1From WordPress left menu, go to Jupiter > Control Panel > Image Sizes.
2Enter a custom image width, height and name.

Products shortcode - custom image size

3Click on Save Settings.

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

Products shortcode - Product Loop settings

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: DisplaySelect Specific Categories and Select Specific Posts.

SettingDescription

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.

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.

SettingDescription

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.

SettingDescription

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.

 

Did this answer your question?