This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
In this part of the lesson we’re going to look at adding individual Add to Cart and Buy Now buttons to our Product pages and then we’ll work on that CSS fix.
Come back over here and take a look at this individual book for a moment, say Banana Lust. Here we have our Book page which just has our big image and our text for our book and that’s it.What we want to do though is to add an Add to Cart button and a Buy Now button to this page as well.
Use WP eStore Shortcodes
The way that we do that is again using WP eStore shortcodes inside that Product post. Come back over to our Dashboard and go to Posts. We’ll just start off with this one in particular. Actually let’s go back to Posts for a minute so that we know which one we’re talking about. First, let’s go to our Apple Ardor E-Book; so here we are at that page and that’s what we’re looking for. That is this post and we need to know its Product ID. We come back down here to Manage Products and we look for our Apple Ardor E-Book and that is Product ID 12.
Now let’s go back to edit Posts, select Edit. We’ll have our first little paragraph of description text first and then we’ll add the Add to Cart button there. So what we want to do is come back over to our shortcodes and we will scroll back up to the top of this Product display and here we have the shortcodes that will display just an Add to Cart or a Buy Now type button.
WP eStore Add to Cart Button
So we’re going to start off with our Add to Cart button. Go ahead and copy that and then go back over to the site and right there after that first paragraph we’ll go ahead and paste it. Remember this is Product 12. There’s our shortcode of product_id:12. If we select Update and then come over to our product and refresh it there is our Add to Cart button.
Obviously this wants to be fixed a bit but we’ll be doing that within the CSS. Let’s take a look at perhaps a more complex one such as a book here instead that way you can see what’s going on. We’ll look at Banana Lust book. Come back over here and find the Banana Lust book Product number is 1. Let’s go back up here to Posts, find the Banana Lust book right there; go to the end of that first paragraph and paste that and here is product_id of 1. We’ve got the right one there. Select Update, come back over here and refresh. Now you can see we have our different choices plus our preferences and our Add to Cart elements. Once we fix the CSS this will bounce up over here and it will be just fine.
WP eStore Buy Now Button
We can use our Buy Now button which I’m going to put at the very bottom. So again we come back over here to the shortcodes and now we’re going to pick out the Buy Now button. Copy and then we’re going to paste that there and hit Update, Come back over to Banana Lust and hit Update, scroll down to the bottom and you can see we’ve got the Buy Now system set up. The Buy Now functionality takes us directly to PayPal, whereas the Add to Cart functionality takes us to our cart before and allows us to add more products to our cart.
That’s how you add these buttons. Now let’s add them in such a way as to make them look proper.Remember that we actually set this Add to Cart button back here when we did our initial settings. So if we go to Settings and we look at our general settings, here is our Add to Cart button that we chose. You can take this out entirely and then it won’t have any kind of a button on it or you can select a different button whether you create your own and upload it to the website and then select it, or you can select one of the other buttons that comes with the WP eStore that we looked at in a previous lesson.
In any case that’s where that button image comes from. Now let’s take a look at how to make it look right.