Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 1 – Part 8 – Add the Product to a Page

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to - ,

Now that we’ve created our digital product for WP eStore, let’s create a product page. We’ll start off in Thesis 2 and then move on to doing the same process in Genesis.

Add Product Information

So we’ll come back over here to Pages and Add New and I’m going to call it Apple Ardor Ebook and I’m going to make it a parent of the page Our Products. I’m going to set a featured image for it so we’ll click Set Featured Image and then select the featured image we want. So I’m going to insert that one, apple-ardor-ebook and set the featured image.

Then I’m going to add some lorem ipsum text. I’m going to publish this page and then view the page. So there it is, our Apple Ardor Ebook with our nice big picture and our information.

Using Shortcodes for “Buy Now” Buttons

Now what I’m going to do is insert a “Buy Now” button. Let’s come over and take a look at all of these potential shortcodes. This shortcode list is divided up into a number of sections. The first one is Category Display and this is a method of displaying a list of products in a given category or set of categories. We’re going to talk about this extensively next week so we’re not going to talk about it today.

For Product Display, there are a lot of different ways where you can show products and there are a lot of different styles for showing products, individual products and all of these shortcodes have aspects of that. We are also not going to talk about many of those today, we’re going to save most of that for next week as well.

Types of Shopping Buttons in WP eStore

However, “Buy Now” buttons end up in this list of Product Display and WP eStore comes with 4 different kinds of buttons.

Add to Cart

It comes with an “Add to Cart” button where when you click on it, it adds the product to a cart and you’ve got a shopping cart then that you can fill up. Then when you’re done adding everything to the shopping cart that you want you purchase the whole cart.

Buy Now

You have a “Buy Now” type of button and the “Buy Now” button automatically immediately directs you to PayPal so they decide they want that product, they click “Buy Now”, there’s no shopping cart, there’s no intermediate process, it automatically takes them to PayPal which takes their money. That’s the kind of button that we are going to use.


There is a subscription kind of button that can be used for subscription payments. And again, those subscriptions won’t be added to the cart when they click on the “Subscribe” button, they are immediately taken to PayPal’s subscription payment page which essentially tells them how much they’re going to be charged and that they are agreeing to set up the payment profile so that they can be recharged repeatedly. So that’s different than a “Buy Now” and different than “Add to Cart”.

Download Now

And then there’s the “Download Now” button and the “Download Now” button is primarily for free products and we’ll talk about that later. In any case, you have these 4 different types of buttons.

Insert the Buy Now Button into a Page Using a Shortcode

We’re going to use the “Buy Now” button and if you want to create a simple “Buy Now” button, then what you would use is one of these two shortcodes. Now, this is the old shortcode, this is the new shortcode, they both work. This is actually the more modern one now but if you’ve already worked with WP eStore you might recognize this shortcode and it does still work.

In fact, we’re just going to look at that here, I’m going to copy this and come into the page and above this text, I’m going to add this shortcode. Now, it’s wp_eStore_buy_now_button and id=1. That ID represents product ID so you need to know the product ID of this product when you put this shortcode in place. In fact, I think I’m just going to update this so we can look at the page now and there’s our “Buy Now” button. If we click on the “Buy Now” button, it takes us directly to PayPal.

Add a Product Price Using a Shortcode

Now, you’ll notice there’s no price here. It turns out we can automatically add the price in by looking at the individual product details and that is using this shortcode wp_eStore_product_details id= and then info=. In this case, the only info we have is price so that’s what we’re going to show.

We’re going to take this and drop it in here and it’s not going to be name, it’s going to be price. Update, refresh and now, you’ve got that. Now, we could easily come along here and say, Price. We can wrap this stuff in HTML. So price $5.00, “Buy Now” and we could also choose to place this.

We could rearrange the way our template is created so that this stuff can jump up beside the product image and that sort of thing. All of that is possible here but we’ll talk about those kind of things when we are dealing with customizing the appearance because the button can be customized and everything else too, right?

This is just the way it comes out automatically in Thesis 2.1 but what we have now though is this product where we’ve got our big description, we’ve got a product image, we’ve got a price and we’ve got a “Buy Now”. I believe had we edited this product so that it had an old price. Let’s save that product. I believe now, that will show it.

What we’ll do here is create two of them side by side then we’ll call this one old, I think it’s probably old-price like that hyphen and then the other thing I think I’m going to do is select this and give it a strikethrough. I don’t have that as a choice but I could make it red and I could actually come to here and say span, CSS linethrough, it’s text decoration linethrough. We can just have a little bit of fun with this old-price,

Okay it doesn’t like that one. I might have to come back next week with the right value for that info parameter. Obviously, it’s not the worst thing in the world because you could always just go in there and say you know, $10.00. Let’s try that one more time so you can do something like that in order to mix that up a bit.

In any case, what we’ve done here is we’ve created these pages entirely independent, I mean it’s just a plain old ordinary WordPress page but what we’ve done is added a “Buy Now” button for it and we’ve added a little bit of info.

Adding Product and Shortcodes to a Genesis Page

Now I want to do that in Genesis. The first thing we have to do in Genesis is add the product so again, it’s going to be Apple Ardor Ebook, product price is $5.00. We go down to our Digital Content Details, we’ll upload that file, we’ll do exactly the same file again. Let’s go back to our downloads, How-to-choose-the-right-wordpress-shoppingcart, insert it into the post, okay so that section is all taken cared of, we can save that product.

Then what we’re going to do is just add the product as a page again just like we did before and again, it’s going to be Apple Ardor and we’ll set the featured image and then we’re going to start here, we’re going to use this WP eStore shortcodes instead of cutting and pasting that one.

Now, notice it automatically adds wp_eStore_add_to_cart but we’re not using “Add to Cart” so we’re using “Buy Now” so we’ll come down here to the wp_eStore_buy_now_button id= so we’re going to insert that and now it wants to know what the number is so we’ll say okay to that, wp_eStore_buy_now_button id=1.

Just for fun, let’s see if there’s the ability to enter just the info. Now, it’s still limited number of buttons that can be entered here so come back over here to lorem ipsum, copy that, publish it. I should have made it a parent of Our Products, view the page, that’s crazy though, where’s my featured image? The featured image is there, did I pick one that does not use the featured image? Let’s see, let’s go to Genesis Theme Settings for a moment and let’s just see whether or not.

Look at that, it doesn’t include the featured image and it doesn’t have a method of including the featured image. So we’ll just insert it as a regular image as well and alignment, let’s save it at none for the moment. Links to none, we’re going to make it the full size and see what happens with that. Insert it into the page, update, view the page, let’s look at the alignment, that’s alignment left, see what happens, update, update, refresh, okay.

So obviously, we could do something like this and we could always just embed this down here some place if we wanted to, right? This shortcode can actually be located anywhere we want so it can go in the middle, that kind of stuff can happen anyway you want it. So that is creating a product.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment