Products Shortcode

Last Updated on

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

In this article

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:

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

Products shortcode - custom image size

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

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.
Note: To learn more about these settings, read Configuring specific items in a shortcode article.

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.

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.

Disabling Thumbs up Button

Disabling the thumbs up button from the loop requires custom CSS.

To disable the button:

From WordPress left menu, go to Theme Options > Advanced > Custom CSS.

In the custom CSS input field, paste the CSS codes below: .mk-product-holder .mk-love-holder{
display: none;

Click on Save Settings and check the portfolio loop for changes.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket