This is a step by step tutorial to setup an ‘Add to Cart‘ button for a Product using the WordPress eStore plugin to accommodate the selling of products from your WordPress site.
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.
Setup a Basic ‘Add to Cart’ Button for a Product
Step 1) Think about the name, price and a little description for the product you want to sell.
Step 2) 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).
Step 3)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:
Description: Demonstrates the Add to Cart button
Step 4) Now, 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’
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
Step 5) The completed product display looks like the following:
Description: Demonstrates the Add to Cart button
Step 6) Finally, 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:
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.
You can copy and paste all the available eStore shortcodes from the shortcode references PDF file.
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:
- Use of hyphen (-) instead of underscore (_). Use wp_eStore not wp-eStore.
- Use of lowercase ‘s’ instead of uppercase ‘S’. Use wp_eStore not wp_estore.
- Forgot to activate the plugin from the plugins menu (Yes it does happen 🙂
- Didn’t replace ‘PRODUCT-ID’ in the shortcode with the actual number.
How to use a Custom image as the ‘Add to Cart’ button
If you want to make the ‘Add to Cart’ button look nicer then you probably want to use a custom image for the button. WordPress eStore plugin allows you to specify a custom button image for every product. This way you can have nice call to action buttons on your product’s landing page.
When you configure the product, there is an optional product settings field called ‘Button Image URL‘ that you can use to specify a custom button image for the product.
I have uploaded a custom image to my site and used the URL of that image in the ‘Button Image URL’ field of the product settings and now the ‘Add to Cart’ button looks like the following (I have also embedded a picture in the post so the product display looks nicer):
Name: Demo Product Two
Description: Demonstrates Customized ‘Add to Cart’ button
The WordPress eStore plugin comes with a few different ‘Add to Cart’ and ‘Buy Now’ button images that you can use. All the images are included in the ‘images’ directory of the plugin. More style to the button can be added using CSS (stylesheet).
How to Display the Product in a Stylish Way
WP eStore comes with a few product display templates that you can use to display your product in a stylish way. Here is an example product display template:
Enter the following shortcode to display the product like the one above (9 is the product id of the product in this example):
Or Enter the following shortcode to display the product like the one above
You will have to fill out the Product Description and the Thumbnail image URL when configuring the product for this type of display.
More stylish display options are explained on the stylish product display documentation page.
How to Sell Limited Number of Copies of a Product
WordPress eStore plugin allows you to limit the number of copies of a product you sell. In order to sell limited copies of a product, simply enter the number of copies you want to sell in the ‘Available Copies’ field of the Product when you configure it.
The plugin will decrease that number every time that product sells. When the ‘Available Copies’ number reaches ‘0’ the plugin replaces the ‘Add to Cart’ button with a ‘Sold Out’ image like the following preventing further sales:
If you are having any problems please leave a comment below.
Note: We provide technical support for our premium plugins via our customer only support forum
@John, Yes you can have as many payment options as you want for a membership.
Is it possible to set up two subscription options with a product? For example I would like to have an option for either $10 per month or give them a yearly discount like $60 per year.
@Rob, Here is the information on creating text links with the eStore.
As for the PDF link what type of protection are you looking for?
Great plug-ins, we are using three of them.
Is there any way to have text links instead of buttons for downloadable items?
Also, is there anyway I could have a link from a PDF link to a protected file on the site?
@Frank, yeah you can do that. A popular practice is to save the ID in a custom meta field of a post then later retrieve that value and use it. Here is an example:
Is is posible to recover the product id from a variable? insted af typing it in
I am trying to use as articles posts that I already had on my wordpress. I am linking the product id to the post by means of the personalized fields
thanks!! works like a charm!
Hi Lerone, You need to use the Extra Shortcodes plugin. You can find this here:
You would then need to use this shortcode to display the cart:
Display the shopping cart with thumbnail images of the
maybe I skipped over it; but searching all available documentation (forums) I can´t find out how to add the disply of the product-thumbnail *in the cart*. this surely must be possible given that eStore is geared to digital products (photos) in a big way.
– but how can it be done…?
thanks for hints to the right track.
Thanks for the plugin, it’s really great, the best of all I have tried so far…
I’ve got a couple of questions:
1. There’s no Allow Shopping Cart Anchor in the Settings page. Do I have to upgrade for that?
2. How do I get the shopping cart to not display under every item for sale, just in one place, say, a Your Shopping Cart page or a sidebar?
Other than that, great! I love it!
Hi Bruce, The following forum post will explain how to fix this issue when using the Thesis Theme.
This is a PS to the post above. Another image size problem: My shopping cart comes in with it’s buttons all distorted, to the point where it’s hard to figure out what the buttons on the right are. I think this is part of the same problem.
All the best,
I’ve got WP Estore Shopping Cart plug in working fine with NextGen Gallery. The commerce part of it is awesome. It’s just the display of the text or button. The button text is cut off when I use the default, and when I try to do a custom button, it gets put in, but super tiny. See the third row of pictures in my website. I’m using the Thesis theme, so maybe the train wreck is caused by CSS. Would love any help you can give me.
Thanks, Ivy. That fixed it. Really appreciate your rapid reply.
Hi Mahala, There is a settings in the eStore called “Allow Shopping Cart Anchor ”
If checked the visitor will be taken to the Shopping cart anchor point within the page after a product Add, Delete or Quantity Change.”
all you need to do it check this option and it will return the customer back down to the shopping cart at the end of the page.
I’m using your plugin on the sales page for my course http://luminousheart.com/sacred-self-care
Scroll down, the Add to Cart button is near the very bottom.
The problem I’m seeing is, when you click you get popped back to the top of the page again and have to scroll all the way down to check out.
It’s a nuisance and I’m afraid I’ll lose sales that way.
Can you help?
Hi Kristin, Coupons can only have one condition.
Hi there… just a quick question. Is it possible to apply more than one condition to a coupon? For instance, a discount for an order of more than 50 copies of a specific book? (1st condition – more than 50, 2nd condition – product ID).
Quick question is it possible to have multiple paypal accounts with this?
Example – a client is selling t-shirts and music, the t-shirts would go into a different paypal account as opposed to the music.
Hi Robert, When you apply a discount/coupon it will be applied to the items in the shopping cart. You can specify conditions to the discount (e.g. only for amounts over $50.00, only if there is so many items in the cart, by keyword like ebook so the discount is only applied if the items have the word eBook in them, etc….).
Please let me know if you have any more questions.
Does this plugin allow for a discount code to be applied storewide?
Hi James, You will need to use shortcode nesting. We added this recently so you may need an update for the eStore before you can use this option. You will also need to make sure the audio player uses a proper wordpress shortcode.
The following forum post will tell you more about how to do this: http://www.tipsandtricks-hq.com/forum/topic/using-code-in-the-product-description
Also can you please tell me what version of eStore you are using (this can be found at the top of the setting page of the plugin)?
Let me know if you need anything else.
Hi, great plugin!
One question – In this tutorial, where you have the two examples of stylish product displays, how would I go about placing in a music preview player underneath the product description (but still within the bounding box.)
@Peter, you can modify the “eStore_misc_functions.php” file to add the link or the price. Search for the following line and modify that function:
I just bought your plugin and now I’m trying to get a link (to a shipping information site) under the price information, using the fancy-style product display. How can I display the shipping cost or a link to the shipping cost directly under the price information – cause that is the law on german online shops.
Hi Deborah, yeah the button text says “Buy Now” but if you click on it you will see it adds the product to the shopping cart. The button text can be anything eg. “buy now”, “pay now”, “add to cart” but it doesn’t determine the type of button it is.
A “buy now” type button is the one that goes directory to PayPal without adding the product to the shopping cart. That doesn’t mean the text on that button has to be “Buy Now”… it can be anything you like.
Please use the following shortcode to get a button that behaves like the “Buy Now” type button:
Hi Deborah, the shortcode you used is for “Add to Cart” button type. Add to cart buttons add the product to the cart… it doesn’t go to “PayPal” like the “Buy Now” type buttons do.
The pictures on this page show this code:
with a “Buy Now” button.
I need a “buy now” button.
What code do I use for that?
I used this code:
to insert the fancy layout on my webpage. All the images show correctly, but when I click “Buy Now” the page does not go to PayPal but stays where it is.
I changed the code back to plain layout because I didn’t want to lose any sales.
Thanks for your help.
cool, u make my heartbeat soft and steady…
will wait for the new fancy style updated. (soon i can remove the nextgen plugin). pls let me know any updated and also pls provide the steps on how to implement that script since i’m not a programmer but only ve little knowledge in php and css. thanks for yr kindness and understand my problem.
Hi Manz, glad to hear that you are liking the WP eStore plugin. yes it is very much possible to display the products in a thumbnail of all photos (Nextgen style). You can manually introduce the style in the CSS file and do it manually.
I actually have plans to add more fancy display option (one of them is to display it NextGen style) for this shopping cart. So if you give me a few days I will have something ready for you.
hiii, me so addicted into your eStore, using it to sell digital photos and customer can buy it and auto download as well as your eStore plugin when i did purchased it.
rite now using NEXTGen to display the thumbnail of photos, but by using eStore i need to do twice process of :
1. setting up category and add image via nextgen and add to card coding in nextgen and
2. again need to setup the product detail info in eStore. If 10 photos really dun mind… but if 1000 then a lot of works for me.
I like your styling of display fancy style, as example given in this site…
My question is…
1. possible or not for me to implement thumbnail of all photos in one page like the nextgen style. (then i can remove nextgen plugin)
2. How could i display only thumbnail with photo code number, price tag and add to cart button at bottom without showing the description.
Md, I am glad you got everything working. =)
I must be sleeping. Why didn’t I think about that? I do that all the time for different reasons! Good reasons though. 🙂
Hi Md, There is an easy way to find that out:
1) Create a new wordpress page or post.
2) Put that shortcode on that page.
3) Publish it
4) Now browse to that page
5) View the HTML source of this page (right click then view source… this will vary depending on the browser you are using)
6) find the bit of code you are after.
MD, You need to use the following PHP fuction:
<?php echo get_button_code_for_product(1); ?>
(1) is the product number
All the shortcodes and PHP referance can be found at the following link:
Thanks! After burning the midnight oil, I finally realized why it wouldn’t execute php inside the excerpt because it needed a plugin to do that. WP php execute plugin. I was thinking that plugin only worked for posts or the sidebar, but I don’t know why I was thinking it wouldn’t work on excerpts.
All is well now. But still out of curiosity how would this code [wp_eStore:product_id:1:end] look like if it was expressed in html?
When I said, “These codes…” it didn’t show the php code but that’s what I meant. It won’t execute php code inside an excerpt. So how would I express [wp_eStore:product_id:1:end] as html code?
I wanted to put an “Add to cart” button in my excerpt. These codes won’t work there:
Any ideas as to how I can place an “Add to cart ” button in either my excerpt section or even using a custom field (but I would have to know what “key”) to put in.
I do receive email notification after products are sold and I do have that option checked. It looks like everything is working fine now. Thanks for getting back to me so quickly.
Hi Joe, Do you get notification emails after a product sale? Do you have the “Email Notification & Digital Product Delivery” option checked?
Sorry It look like it is still not working unless I enter a “0” in “inventory Control, Available Copies” after the item has been sold.
Sorry It looks like I had the inventory number in the wrong place. Everthing is working now.
Is it because I am not selling digital products? Is there something I can change in this line for non digital products?
Thanks again for your help all this is still new to me.
Can you help me with this.
The “Sold Out” image doesn’t show up after the limited number of products
have all been sold.
Thanks for the quick reply!
I’ve got it – I’m using a custom field in a category template.
ID, ‘add_to_cart’, true); ?>
Where ($add_to_cart) is the product id.
It is a bit of a manual process but I can live with it – the shop only sells a few products.
I’ll test it out further shortly – it is Friday night and well, it is time for the pub!
Thanks again – I’ll shout you a beer!
Hi Cam, you should be able to use with the custom field as long as you can retrieve the value of the custom field from the place where you are trying to use it from. Can you get the value of the custom field for the post from the place you are trying to embed the button?
I’ve just purchased the eStore and after testing out a few other carts, this is miles ahead!!! And, it is very, very close to exactly I want! So thank you!
I do have a question though, so I’ll give you a bit of background info…
My client uses a single wordpress category to display their products (each product is a post) with the cart added to the sidebar. The problem is that the location of the “Add to Cart” has to be outside of the_content().
What I need to be able to do, is use the add to cart functionality on a specific category template, or via a post’s custom field. Is this possible?
So i’ve tried a few different ways, i’ve added the …get_button_code_for_product(1)… from the function reference into the template but obviously this only adds the product with id=1.. and short codes won’t work in a custom field – my next guess would be to copy the generated html from an individual products page and add the dynamic stuff via custom fields – but I thought I’d check to see if you had a better ways to do this?
Hi Ryan, I have done some major restructure of the shopping cart to accommodate multiple gateways and the language files are a little out of sync. I will fix it up but in the mean time you can manually modify the “eStore_misc_functions.php” file and change it. Just search for “Price:” in that file and replace with what you want.
Where is the code that marks up
I need to change the word Price to the Itlalian Prezzo
Hi Jackie, changing the code is not a good idea as it will get lost when I give you an updated version. You should be able to do it through the settings/options. Please explain exactly what you want and I should be able to guide you. Don’t forget there are different shortcodes and functions that you can use to display the cart differently:
@Hisham, no its not possible to display multiple product description without changing the code.
@Jackie, Looks like the CSS of your theme has defined the input fields to be of a particular size. The following link should help:
yes, i needed to add the link in the Additional Product Details, tx
one more question:
is there a way to get and display multiple product description fields ? ex. class time, instructor, units, etc..
Just one more thing. I am trying to delete the text from my empty shopping cart that says: Your Shopping Cart. I thought I had it taken care of in wp_eStore1.php with this code:
//add_option(‘wp_cart_title’, ‘Your Shopping Cart’);
add_option(‘wp_cart_empty_text’, ‘Hey, your cart is empty’);
Apparently that is not right. Can you tell me where to go to change it?
Thanks for checking this out. I am a dumbass. 🙂 Got it fixed now!
I really like this plugin!
Hi Hisham, you need to use the following when you want to display it from a post or page:
Also, have you specified a “Buttong Image URL” when configuring this product?
I am slowly but surely working my way through getting my store set up. The problem I’m having has to do with the “Add to Cart” button. No matter which style I use to display my product, the button is huge. How do I resize it?
I don’t have my page published yet but this should work if you want to see it for yourself…
Any help you could give would be greatly appreciated!
Buy Now button STILL does not show up.
regardless of what code i use as instructed above.
ie. echo print_eStore_buy_now_button ($value);
this is what view source shows:
ie. no img src.
the add to cart works fine, not the buy now.
@Mark, You don’t need to do any setup in your PayPal account.. just use the paypal email address of your account to receive money in that account when a product is sold.
You enter the “Name”, “Price” and other details of the product when you configure it in the admin menu. Please see the video tutorials at the following URL to learn more:
do you need to just set up a new email account with paypal or is there more setting up that needs to be done? I already have an account with shoping cart selling other products but this is just to sell one digital product.
where do you enter the price of product can see delivery charges but not price in wordpress.
Brilliant, that worked perfectly. Thanks for the instant reply!!! 🙂
Hi Tim, yes you can use a custom button image for the “Buy Now” buttons too. Specify that in the “Button Image URL” field under the “Additional Product Details” section.
Bought this plugin today, fantastic, thanks!
One question, I am using the ‘wp-estore-buy-now’ option, can I specify a custom button image? The option in the settings seems to only affect the ‘add to cart’ button.
Sorry it took so long to reply. All OK now and all my fault. Not set-up properly. Thanks for comng back to me.
Just had a quick look at your site and it looks like it’s working now (I am guessing you forgot to put in the description and the thumbnail image URL?). Are you still having this issue?
I’m using the short code [wp_eStore_fancy:product_id:1:end] to display my product details but it doesn’t display the product image or description.
Here’s the page: http://www.thedigitalarchives.com/list-building-basics-article-titles/
Can you help.
Hi Gordon, can you please post a link to the page where you are using the buttons so I can have a look?
I’m having the problem with shopping cart not updating properly too. I add Item 1… cart displays item 1. Now I add item 2, page refreshes and item 1 is GONE, item 2 is showing.
php sessions are working correctly, according to my hosting provider.
Hi Ken, The button you specify in the General settings will be used if you don’t specify a button in the “Additional Product Description” section when configuring a product. This is so you don’t have to specify a button image for every single product if you wanted to use the same image for all the “Add to Cart” buttons.
So yes you can use different button images for different products similar to what I am doing just by specifying the button Image for that product in the “Additional Product Description” section.
I just love your two green customized “Add to Cart” buttons.
It appears that one of them can be used for the sale of both downloadable mp3 audio music files as well as Video files since it has built right into it the controls to play them. Am I correct?
As you know, I sell downloadable PDF sheet music files as well as downloadable mp3 audio music files and Video files so I would like to use BOTH of the green customized “Add to Cart” buttons.
However, it appears that on the General Settings Page, I can only (for now) select one of the buttons.
Is there a work around for this? Some type of HTML coding to specify the use of one button for the PDF downloads and the other button for the two other downloads?
Thanks for your help in this matter!
Hi David, 1) Trigger text doesn’t work outside the post/page area. You can use the following PHP function when you want to show an add to cart button from your Sidebar, header, footer etc.
$id = the id of the product
Lets say for example the product id is 1 then put the following line where you want the add to cart button to appear.
<?php echo get_button_code_for_product(1); ?>
2) This seems like a PHP session issue. You seem to be loosing the session variables when going from one page to the other (This should not happen). Please confirm with your webhosting that the PHP session on your server is working correctly.
Thanks Admin, I will talk to my webhost provider hopefully they can shed some light on the situation. As far as the “add to cart” button on sidebar I will implement it later on today. Awsome. I will provide feedback to everyone about this session variable issue.
Admin, I am having the same issue as David with the shopping cart. It started with the 2.2 update and continues with the 2.3. PHP session is working properly.
This is a great plugin ! Just had two questions:
1) How can I add an “add to cart button” on my sidebar I tried entering this piece of code in the sidebar section of the my code and it does not work.
[wp_cart:Classic Break Beat Drums Volume I:price:4.99:end]
2) Also right now I having a problem with my shopping cart retaining items after they have been added. So if some one adds an item and then clicks on a different page then the shopping cart widget displays “your cart is empty” which is incorrect. The shopping car widget seems to lose information when jumping from different pages. Is there anyway to resolve this issue ?
@kccaferadio, There is an option in the settings called “Allow Shopping Cart Anchor” which (when enabled) takes the customer to the shopping cart within the page after clicking the “Add to Cart” button. I am adding a textbox (to be released in the next update) next to this checkbox so admins can enter the URL of their checkout page. It will take the customer to that page after someone hits the “Add to Cart” button.
Great plugin, just what we were looking for!
I noticed that when you click on the “add to cart” button on a page, the browser re-loads the page from the top, putting the customer somewhere else than where he was.
What I would really like to do is be able to move on to a separate”checkout” page upon clicking on “add to cart.” Is that possible & how?
Is there at least a way to prevent the browser from reload & displaying from the top when “add to cart” is clicked?
Thanks for the help!
@Parrfunkel, Yes, you can use HTML link in the description field of the product shown in the example product display above.
is it possible to have a link using the fancy display. I tried to add an html link to the description, but it didn’t work.
I really like the look of the fancy display fro my site as it lets me add a longer description than with the image gallery option, but I need to link my products to another location that provides more detail and additional images for the product.
Hi Mindi, are you using the PHP function call or the trigger text? You will have to use the shopping cart widget that comes with this plugin or use the following PHP code in the sidebar.php file to display the shopping cart on the sidebar as the trigger text won’t work there.
<?php echo print_wp_digi_cart(); ?>
I am trying to add the Shopping Cart to the sidebar, but it won’t seem to display. Am I missing instructions on this?
Thanks for your help.
@Johnathan, I haven’t implemented the stylish display for “Buy Now” type buttons cause not may people use them but I will add it in the next release since you mentioned it.
Firstly, I’d like to start by saying that I love the plug-in, but does anybody know the trigger text for the “stylish” display with “buy now” functionality?
Even with the examples here, clicking the ‘buy now’ button only adds the item to the shopping cart!
Hi Bob, looks like you don’t have the proper image URL for the button. If you want to use a custom button image then you need to enter the URL of that image in the ‘Button Image URL’ field of the product.
The images that I have provided with the plugin are stored in the ‘images’ directory of the plugin. So for example to use the ‘Buy Now’ button image use the following URL in the ‘Button Image URL’ field of the product:
You can also use the above URL in the ‘Add to Cart button text or Image’ field of the settings menu to use this image globally for all buttons. Let me know how you go.
I just bought this plugin today. I have inserted the code into my America’s Elephants book page only. It works fine but does not appear as your Buy now button. Mine is a box with an X in it. I’ve taken the code out and changed it a couple times but I alswas get the same result.
Your documentation says you have a couple Buy now buttons to use in images but I found none in there.
What is wrong?
@Justin, Glad to hear that you like the plugin. Yes, there is a function that you can call from your template php file. Please use the following function to show an ‘Add to Cart’ button for a product:
$id = the id of the product
Let me know if this helps.
Got it sorted out. Thanks.
Hi there – your eStore plugin is totally awesome! It’s really easy to use and to set up. However I have a question: is there a “add to cart” function I can call from my template php? My template automatically adds an image to each post and I want an “add to cart” button to appear underneath that. I parsed the image tag entry to look for [wp_eStore:.*:end] trigger but simply echoing it in the template file doesn’t generate the button. Any help you can give me would be greatly appreciated. Thanks!