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 3 – Part 4 – Populate a Products Catalog Page

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects - ,

Applies to -

So now the next that we’re going to do is we to create a Products Catalog page. We actually have the page created. It’s this page right here called products. So we’re going to edit the page. And the way we’re going to create this catalog page, is by using this WP eStore Shortcodes button. And we’re going insert the Shortcode that we want for displaying the products in this format right here. This is done automatically via a Shortcode, we don’t actually have to create these things.

Create a Membership Website – Use WP eStore Shortcodes to Create a Page

It’s Important though to understand how to use the WP eStore Shortcodes. The first thing that I want you to do is to install the WP eStore More Shortcodes plugin. There is a link to this plugin in the Lesson 3 resources. You need to download this additional plugin. And with it downloaded, we need to add it to our site.

So we go over to plugins, add new, upload, choose the file, and then we’re going to scroll down here to my ZIP files. I believe this is eStore extra So install that. Then we’ll activate it. So now we have this additional Extra Shortcodes for WP eStore installed. And now we can insert a shortcode into this page that will display those. So I’m just going to do that here real quickly. What I’m going to do is to pick one of the shortcodes here. At the moment we’re going to pick this one which should show all of our products. Then we update this page.

So this is what this thing looks like if we just use that button. It creates an Add to Cart button for each of these, which isn’t what we want. We don’t want to add a cart button, we actually want a Buy Now button and it is displaying them essentially in the order that we created them. So the free one is on the bottom; that is ID1 is on the bottom, ID2 and ID3. Now that’s not how we want this to be organized but that one simple shortcode insertion produces all of this automatically.

Create a Membership Website – Use WP eStore Button Types

So now I want to talk about the WP eStore button types. There are four types of buttons that you need to be cognizant of. There are the Add to Cart buttons and each one of these buttons here represents one of the stock Add to Cart buttons that comes with WP eStore. What the Add to Cart button does is it add the product to the shopping cart. It adds one product each time it is pressed and in order to actually check out you need to select check out from the shopping cart in order to complete the transaction.

So an example of this is here. If we go to books, on my Thesis eStore site, and we say, I want to add this book to a cart. Here’s my shopping cart; you see it shows a quantity of one. If I select it again, it shows a quantity of two. It gives you a subtotal that adds the shipping… gives you a total. In order for you to complete that transaction, you have to select this button and then it takes you over to PayPal in order to complete that transaction.

That is not actually what we want to do on the site here at the moment. We want to step out of this whole Add to Cart thing. The next option for us is the Buy Now button. The Buy Now button takes the purchaser directly to PayPal. If you click that button it takes you to PayPal and no shopping cart is involved. You can’t buy more than one product at a time and you can’t use coupons for this but it does immediately take you to a place where they can click Pay and it gets rid of any distractions that may intervene between the point at which they decide they want to and the time they actually spend the money.

The third type of button is the Subscription button. This button also takes the purchaser directly to PayPal. However, it uses either the default subscription option or the automatic billing option depending upon which option you offer. The subscription option anybody can do; the automatic billing option is something that you pay for every month. I think it cost me 20 bucks a month to have automatic billing.

But what automatic billing allows me to do is to take credit cards for subscription payments. So a person doesn’t actually need a PayPal account in order to subscribe. It also allows me to offer delayed payments, or say split-up the purchase of a membership and into a block of a number of payments which something I plan on doing here in the not too distant future.  It does permit this automatic billing option and if you’ve got automatic billing enabled, then it will use that. If you don’t have automatic billing enabled, then use the subscription billing.

But in any case even if you are using a shopping cart, this never goes into the shopping cart. This always goes directly to PayPal because PayPal handles subscription payments differently than it handles payment for unit services or goods so it never goes to the shopping cart.

The fourth kind of button you have is Download Now button. Now this has absolutely no financial component to it even though it looks like it might have one because of how it’s grouped. But it doesn’t take any money, it doesn’t take you to a shopping cart, it doesn’t take you to PayPal, it doesn’t do any of that kind of stuff. What it does is it creates an encrypted download link for a given file.

This can actually be restricted to a given membership level. For example, if you had downloadable products that you gave to somebody who joined a certain course, you can actually use that Download Now button with that course restriction on it and only registered members of the course could use that function to download the files. So it’s another way of delivering courses or delivering products without actually taking cash or money. It could be used either for unprotected format, just to give somebody access or it can be used in a restrictive format. We’ll probably do both.

Create a Membership Website – WP eStore Shortcode Terminology

There’s a little bit of terminology that I want you to kind of wrap your mind around too. That is, product_id or category_id and that’s obviously as it’s implied, it’s those numbers that we looked at. Or you can use ID in some cases and those are either product or category depending upon the context. Sometimes you have this option of style, which is a type of fancy display style, which is the four types of buttons we just talked about. Order is a product display order. Type is a type of button, which is what we just talked about. Type 1 is add to cart, Type 2 is buy now, Type 3 is subscription and Type 4 is download. Sometimes you can specify the type of button or type of transaction really. Number is the number products to display. Show_price is whether the price has to be displayed or not, so you can either hide the price or display the price with that product display. And then restriction, restricts that display to a given membership level.

Now we’re just going to take a brief look at those here. This cheat sheet that I created for you has all the WP eStore shortcodes and this has all of the shortcodes for the standard WP eStore plus the shortcodes for the additional plugin. I have organized those shortcodes by how I think they should be organized. So for example, the first set is shortcodes that display categories. It might show all of the categories. It might show an individual category or it might show all of the products in a specific category.

And then the next set is products display and again it may show all of the products. It may show multiple products but not all of the products. Or it may show individual products. Most of our shortcodes deal with different ways of displaying individual products.

Then you have a variety of shortcodes associated with shopping cart, which we’re going to ignore entirely. You have some associated with downloads which we’ll talk about later. Then we have some miscellaneous ones like How many products of this have been sold, Products that remain, a free product download which actually creates a squeeze page where people are required to provide email address and name before they can download a product. And then a little audio player and so that’s the miscellaneous ones. But these are all the short codes that are available to you to use.

Create a Membership Website – Types of Fancy Display

I want to show you the different types of fancy display. Products and categories have one of two styles of display. They either have the fancy display style or they have the default display style. Now the default display style only displays the purchase button and the fancy display style displays some other types of data.

And I have a link on the site to a page where you can see all of the display styles that they offer. So for example, this is fancy1. Fancy 2 has a little background color here and faded background there. Fancy3 is this grid system with an outer background color. Fancy4 similar to 1 or 2 except it’s black and slightly rearranged. Fancy 5 kind of looks like an Amazon widget to me. Fancy6 is a black version of Fancy 3. Then 7 and 8 have to do with display of mp3 audios. What you can do here is you can have samples of tracks for somebody to purchase. That displays it in a couple of different formats. So that’s Styles 1-8.

This is using Style 1; we’ve got our name, our description, our price, a button or our icon. We’re not doing it this way, because this doesn’t give us the order that we want and we’re not going to display all of our products. So we’re going to delete that. Instead what we’re going to do is to display a couple of different categories of products. The first thing we’ll do is we will display individual categories. Actually I know we don’t have time for that. So I’m just going to show you what I recommend.

There’s a whole bunch of ways to do this but what I recommend in this case is the use the Add to Cart for the free product and that is wp_estore_fancy1. We’re going to use fancy1 here like this, insert that. Then it’s going to ask us what the id number is so we just enter 1. It’s going to be fancy diplay1 with a product id of 1. If we hit update and look at this page now. Now we just have the first product and it’s our free product with this Add to Cart button which looks like this. If you select the Add to Cart button, it takes you to that page we created Register For Your Free Course. So it’s behaving like we wanted to.

Let’s add that special Image to the Add to Cart here and get rid of that text in this simple button. Let’s just go down to our products for a moment, Manage products. We’re going to go to 1. We’re going to go to additional product details and button image URL is what we want. So we’ll come back to media library and go to library and grab that one. We’re going to use the free register one. Grab that button. Place it here.

This allows you to create a different button for every product if you want. You can use the same button every time or you can create a new button for every product. So now if we look at our products and refresh this, you’ll see our new button shows up there. Because of the way Thesis treats inputs, this will need a little extra styling in order to make it look like this. We’ll talk about how to style this kind of stuff, so it looks right out of the box. You can see I’ve done a little bit of styling. I’ve put the old price in red, put them side by side and then reconfigured the button so that it is the right size. We’ll just work on that next time.

Then we’re just going to add the next two products. It’s not the same one though because we don’t want to use the Add to Cart. So we want now is Buy Now. And we’re going to use the buynow fancy. We’re going to choose the ID for the product; it is 2. If we don’t specify a style in here, it’ll automatically get the fancy1 and we can just copy this and paste it again and change the 2 to 3. Hit update. Refresh. And we actually have all of three products here now. If you select on this it takes you off to the product page and if you select the Buy Now button now, it’s going to automatically take you to PayPal. Let’s see how it goes here in a second. So there it is, took us directly to PayPal.

There’s one other thing that I wanted to do and that is to put this same button on the product page itself, How to install WordPress and Thesis. So we’re going to edit this page and add this Add to Cart button but it’s just plain Add to Cart. It’s not going to be the fancy button. So without fancy added to it, you’re going to see a button. Hit update. We view the page and there’s our button.

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