How to Show a Product Display Box

You can use the “wp_cart_display_product” shortcode to create a product display box on the fly when using the Simple WP Shopping cart plugin. This can be very handy to display your products on a post, page or sidebar easily.

Table of Contents

• Video Summary
• Shortcode Example for a Product Box
• Using a Product Box with Product Variation
• Using Shipping With the Product Box
• Specifying an Alt Tag for the Thumbnail Image
• Creating a Grid Display With Product Boxes
• Using Blocks Instead of Shortcode

Video Summary

Shortcode Example for a Product Box

Here is an exmaple shortcode that shows you how to use a product display box.

[wp_cart_display_product name="My Awesome Product" price="25.00" thumbnail="http://www.example.com/images/product-image.jpg" description="This is a short description of the product"]

Replace the values with your product specific data to show a product display box for your product(s).

The above shortcode will product a product display box similar to the following screenshot:

Using a Product Box with Product Variation

Here is an example shortcode usage with product variation:

[wp_cart_display_product name="My Awesome Product" price="25.00" thumbnail="http://www.example.com/images/product-image.jpg" description="This is a short description of the product" var1="Size|Small|Medium|Large" var2="Color|Red|Blue|Green|Black"]

The above shortcode will display a product for sale like the following:

Using Shipping With the Product Box

Here is an example of how to add the shipping parameter with the product box shortcode:

[wp_cart_display_product name="My Awesome Product" price="25.00" thumbnail="http://www.example.com/images/product-image.jpg" description="This is a short description of the product" var1="Size|Small|Medium|Large" var2="Color|Red|Blue|Green|Black" shipping="5"]

Specifying an Alt Tag for the Thumbnail Image

You can use the thumb_alt parameter in the shortcode to specify an alt tag for the thumbnail image to be used in the product box. Below is an example:

[wp_cart_display_product name="My Awesome Product" price="29.00" thumbnail="http://www.example.com/images/product-image.jpg" description="This is a short description of the product" thumb_alt="Test alt tag for the thumbnail image"]

Creating a Grid Display With Product Boxes

Check this tutorial to learn how you can stack the product boxes side by side.

Using Blocks Instead of Shortcode

You can also use blocks instead of shortcodes to insert a product box. Follow these guidelines if you wish to utilize the blocks provided by the simple shopping cart plugin.