{"id":2278,"date":"2013-05-26T06:08:49","date_gmt":"2013-05-26T06:08:49","guid":{"rendered":"http:\/\/www.tipsandtricks-hq.com\/ecommerce\/?p=2278"},"modified":"2024-06-19T10:17:35","modified_gmt":"2024-06-19T00:17:35","slug":"how-to-show-a-product-display-box","status":"publish","type":"post","link":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/how-to-show-a-product-display-box-2278","title":{"rendered":"How to Show a Product Display Box"},"content":{"rendered":"\n<p>You can use the &#8220;wp_cart_display_product&#8221; 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.<\/p>\n\n\n<h2 class=\"simpletoc-title\">Table of Contents<\/h2>\n<ul class=\"simpletoc-list\">\n<li><a href=\"#video-summary\">Video Summary<\/a>\n\n<\/li>\n<li><a href=\"#shortcode-example-for-a-product-box\">Shortcode Example for a Product Box<\/a>\n\n<\/li>\n<li><a href=\"#using-a-product-box-with-product-variation\">Using a Product Box with Product Variation<\/a>\n\n<\/li>\n<li><a href=\"#using-shipping-with-the-product-box\">Using Shipping With the Product Box<\/a>\n\n<\/li>\n<li><a href=\"#specifying-an-alt-tag-for-the-thumbnail-image\">Specifying an Alt Tag for the Thumbnail Image<\/a>\n\n<\/li>\n<li><a href=\"#creating-a-grid-display-with-product-boxes\">Creating a Grid Display With Product Boxes<\/a>\n\n<\/li>\n<li><a href=\"#using-blocks-instead-of-shortcode\">Using Blocks Instead of Shortcode<\/a>\n<\/li><\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"video-summary\">Video Summary<\/h2>\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Simple Shopping Cart - How to display a product box\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/6w1P6dtIiFc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"shortcode-example-for-a-product-box\">Shortcode Example for a Product Box<\/h2>\n\n\n<p>Here is an exmaple shortcode that shows you how to use a product display box.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[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\"]<\/pre>\n\n\n\n<p>Replace the values with your product specific data to show a product display box for your product(s).<\/p>\n\n\n\n<p>The above shortcode will product a product display box similar to the following screenshot:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.tipsandtricks-hq.com\/wp-content\/uploads\/2009\/02\/example-product-box-display-sc.jpg\" alt=\"product display box example\"\/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"using-a-product-box-with-product-variation\">Using a Product Box with Product Variation<\/h2>\n\n\n<p>Here is an example shortcode usage with product variation:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[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\"]\n<\/pre>\n\n\n\n<p>The above shortcode will display a product for sale like the following:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"322\" height=\"504\" src=\"http:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-content\/uploads\/2013\/05\/produc-box-with-variation-example.jpg\" alt=\"product box with variation\" class=\"wp-image-2337\" srcset=\"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-content\/uploads\/2013\/05\/produc-box-with-variation-example.jpg 322w, https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-content\/uploads\/2013\/05\/produc-box-with-variation-example-191x300.jpg 191w\" sizes=\"(max-width: 322px) 100vw, 322px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"using-shipping-with-the-product-box\">Using Shipping With the Product Box<\/h2>\n\n\n<p>Here is an example of how to add the shipping parameter with the product box shortcode:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[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\"]\n<\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"specifying-an-alt-tag-for-the-thumbnail-image\">Specifying an Alt Tag for the Thumbnail Image<\/h2>\n\n\n<p>You can use the\u00a0thumb_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:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[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\"]\n<\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"creating-a-grid-display-with-product-boxes\">Creating a Grid Display With Product Boxes<\/h2>\n\n\n<p>Check <a href=\"http:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-shopping-cart-stacking-multiple-product-boxes-side-by-side-2967\">this tutorial<\/a> to learn how you can stack the product boxes side by side.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"using-blocks-instead-of-shortcode\">Using Blocks Instead of Shortcode<\/h2>\n\n\n<p>You can also use blocks instead of shortcodes to insert a product box. <a href=\"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/simple-shopping-cart-blocks\" title=\"\"><strong>Follow these guidelines<\/strong><\/a> if you wish to utilize the blocks provided by the simple shopping cart plugin.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can use the &#8220;wp_cart_display_product&#8221; 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. Video Summary Shortcode Example for a Product Box Here is an exmaple shortcode that shows you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[30],"tags":[173,150,56,32],"class_list":{"0":"post-2278","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-wordpress-shopping-cart","7":"tag-e-commerce","8":"tag-product-box","9":"tag-product-display","10":"tag-wp-shopping-cart","11":"entry"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/posts\/2278"}],"collection":[{"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/comments?post=2278"}],"version-history":[{"count":0,"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/posts\/2278\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/media?parent=2278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/categories?post=2278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/tags?post=2278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}