{"id":1,"date":"2009-05-18T07:29:55","date_gmt":"2009-05-18T07:29:55","guid":{"rendered":"http:\/\/tipsandtricks-hq.com\/ecommerce\/?p=1"},"modified":"2020-09-11T11:12:00","modified_gmt":"2020-09-11T01:12:00","slug":"show-add-to-cart-buttons-using-wordpress-estore-shopping-cart-plugin","status":"publish","type":"post","link":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/show-add-to-cart-buttons-using-wordpress-estore-shopping-cart-plugin-1","title":{"rendered":"How to Show Add to Cart buttons Using the WordPress eStore Shopping Cart Plugin"},"content":{"rendered":"

This is a step by step tutorial to setup an ‘Add to Cart<\/strong>‘ button for a Product using the WordPress eStore plugin to\u00c2\u00a0accommodate the\u00c2\u00a0selling of products from your WordPress site.<\/p>\n

After you read this tutorial, you will be able to easily create “Add to Cart” button(s) on your product’s sales page and sell your products.<\/p>\n

Setup a Basic ‘Add to Cart’ Button for a Product<\/h3>\n

Step 1)<\/strong> Think about the name, price and a little description for the product you want to sell.<\/p>\n

Step 2)<\/strong> Configure the product using the ‘Add\/Edit Products’ interface of the WordPress eStore Plugin. Take note of the ‘Product ID’ after you add the product (all the product ids can be found on the ‘Manage Products’ page).<\/p>\n

Step 3)<\/strong>Design however you want to display the product on a Post or Page (the landing page of the product) where you want to sell the product from. I want to keep it very simple for this tutorial. So I am going to use the following as my product information:<\/p>\n

Name:<\/strong> Demo Product One
\nDescription:<\/strong> Demonstrates the Add to Cart button
\nPrice:<\/strong> $1.00<\/div>\n

Step 4)<\/strong>\u00c2\u00a0Now, all I need is the ‘Add to Cart’ button next to the product information so a customer can purchase it. To insert the ‘Add to Cart’ button that goes with this product, add the following shortcode below the line ‘Price: $1.00’<\/p>\n

[wp_eStore_add_to_cart id=PRODUCT-ID]<\/p>\n

Replace ‘PRODUCT-ID’ with the actual product id of the product you are selling in my case it’s 1 because this is the first product I just configured. So I am going to add the following text<\/p>\n

[wp_eStore_add_to_cart id=1]<\/p>\n

Step 5)<\/strong>\u00c2\u00a0The completed product display looks like the following:<\/p>\n

Name:<\/strong> Demo Product One
\nDescription:<\/strong> Demonstrates the Add to Cart button
\nPrice:<\/strong> $1.00
\n
<\/div><\/form>
<\/div><\/div>\n

Step 6)<\/strong>\u00c2\u00a0Finally, I am going to add the following shortcode in the post that displays the shopping cart when items are added to the cart. You can also use the sidebar widget to display the shopping cart. This will allow the customer to view their order and complete the checkout:<\/p>\n

[wp_eStore_cart]<\/p>\n

Feel free to hit the above ‘Add to Cart’ button to see how the shopping cart appears below this line and allows a customer to purchase the product.<\/p>\n

<\/div>
\nYou can copy and paste all the available eStore shortcodes from the shortcode references PDF file<\/a><\/span>.
\n<\/a><\/p>\n

Common Pitfalls<\/h4>\n

The most common mistakes people make when using the ‘Add to Cart’ button’s shortcode and hence the button doesn’t appear are as following:<\/p>\n