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 2 – Part 4 – WP eStore Catalog Display

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

We’ve just discussed using WordPress to organize product display but the next thing that we’re going to do is look at the WP eStore system for catalog display. WP eStore employs its own system that’s entirely apart from the ordinary WordPress workings and it is based on WP eStore Product Categories.

WP eStore Product Categories

Now, we’re going to call those eStore Product Categories or ePCs to try to make a distinction between the post categories and potentially the product categories that we’re going to create in Thesis. We’re going to use the acronym ePC for eStore Product Category to represent this categorization system that WP eStore creates.

WordPress Doesn’t Recognize ePCs as a Taxonomy

Now, this ePC is not a WordPress taxonomy which means that WordPress does not automatically group products by the ePC and it does not automatically display products by product category. None of those automatic aspects of WordPress affect the eStore Product Category. So that’s the distinction that you need to make in your mind when you’re thinking about the WP eStore product categories. That is, they are not the same and they do not behave in any way like WordPress taxonomies since WordPress doesn’t recognize them as a taxonomy.

ePCs are not Hierarchical

Another thing about them is they’re not hierarchical which means that you cannot have Child eStore Product Categories. In that regard, they’re more like tags. That is, they’re all on the same level. So even though I may have a product category called Instruction, I cannot have a subcategory of that called WordPress Instruction. I can have another category called WordPress Instruction but there’s no possibility for a built-in relationship between Instruction and WordPress Instruction because there is no parent-child relationship in eStore Product Categories.

So as long as you understand these limitations, we can go on to talk about them because they’re very useful and we’re still going to use them.

What WP eStore Can Display

WP eStore can display products in a number of ways.

A List of Products

First, it can display a list of all products. So if you’ve got 5 products, you can put a product list on your site and it will show all 5. If you have 500, you can put a product list on your site, it’ll show all 500.

A List of All or Individual eStore Product Categories

It can also display a list of all ePCs or eStore Product Categories. So if you’ve got 10 product categories, you can display a list of all 10 product categories. It can also display all products in a given eStore Product Category and this is what you’re going to use the most often.

So for example, we’ll be displaying all of the products in our WordPress Instruction product category. When we click on that product category we’ll be able to see all the products that are in that. And this is the one you’re going to use more often than anything.

A Single eStore Product Category or Product

Then you can also display a single eStore Product Category and we’re going to talk about that in a minute. Not all the products in it but just display it alone. And you can also display a single product which we saw a little bit last time when we displayed a “Buy Now” button for a single product. But you can display all the information about a single product as well.

So those are the 5 different kind of configurations in which WP eStore can display products. It can display all of them, it can display all of the product categories, it can display all products in a given eStore Product Category, it can display a single eStore Product Category and it can display a single product.

Displaying All Products

When you’re looking at all products, you have 2 choices. You can see all products displayed in a simple list. It’s essentially the name of the product as a link to the product page. So you can display it as a simple list or you can display it as a styled list.

Now, this styled list system is actually used repeatedly throughout the store. Let’s go to Tips & Tricks HQ and go to their WP eStore page, go to their Documentation and look at their different Display Styles. This link is going to show up with the lesson so that you have access to it but WP eStore comes with essentially 13 styled product displays.

Product Display Styles

The first one looks like this, it’s called Fancy 1 if you can believe that. It’s got a product image, a description, available quantity, a price and an “Add to Cart”. This is Stylish 2 which has sort of a footer with the price on one side and “Add to Cart” button on the second. This is Fancy 3 which provides you essentially the opportunity to do a gridded display where you just have the image, the price and the “Add to Cart”.

This is Fancy 4, a different kind of display of all the same things and Fancy 5 again is the same. Fancy 6 is another perhaps gridded style and then you get to some of the more specialized ones and these are the ones that have the mp3 music previews. You’ve got Fancy 7 and Fancy 8, whether or not you want them stacked or all in a line. Then you’ve got Fancy 9 which is an example without any kind of an image in it.

Fancy 10 allows you to have multiple product images displayed. Fancy 11 is a more complex display of that. Fancy 12 is again a different version of the audio preview. Fancy 13 is this new border list or full frame image that again is vertical.

So those are the 13 different display styles that are built-in to WP eStore allowing you to display your products in any of those ways. We’re going to look at how to do that here as we work our way through this.

Displaying All Product Categories

If you’re going to display all of your eStore product categories, you can also display those as a simple list. So, WordPress Instruction, Thesis Instruction, Genesis Instruction and when you click on that list, it brings you to that page. So you can display a simple list or you can display a styled list.

However, there is only one style of list and I’m going to show you that style here. This is, the site that I developed teaching the original course and this is what the stylish display looks like. It’s got a book on the left, it has a link that is the category name and then it has the description of the product with the box around. So this is the built-in system for displaying product categories in a stylish way but unlike products, it only has one style not the 13.

Displaying All Products in a Given ePC

Then you can display a list of all products in a given eStore Product Category. And again, it can be a simple list that just links the product name to the product page or it can be a styled list of those 13 styles that we saw before. An example of that again on this site is on the Books page, this is I believe Fancy 1 if I recall correctly which when I created this was just Fancy. Anyway, this is Fancy 1 with some slight modifications to it and that’s what that display looks like.

Displaying a Single Product

You can also display a single product and that single product can be styled just as a single box and it can be anyone of those 13 styles. So if you place a single box on a page, it’ll show all of the information for whichever one of those 13 styles you choose.

You can also just add a simple link to a product in a page and then you can also add individual parts of the product and that’s what we did last week. One of the parts we added was a “Buy Now” button but there are other parts you can add to the page like the price or the quantity available.

There are different things for products that you can add to pages that are not the full product description. You can show a box with a specific style, you can show a simple link or you can use individual parts of the product display on the page.

Displaying a Single Product Category

If you want to show a single product category in a page, it’s either the simple link or it’s that styled link like I showed you earlier. I showed you one that had all of the categories but you can also show only a single category. This is what we’re going to use on our department pages. Since we can’t list all of the categories on our department pages, what we’ll be doing is we’ll list the categories in that department using a styled link with a single product category.

WP eStore Button Types

Now, something that may not be immediately obvious to you is that WP eStore offers 4 different types of buttons with all those displays. It has an “Add to Cart” button, a “Buy Now” button, a “Subscribe” button and a “Download Now” button.

Add to Cart Button

The “Add to Cart” button does just that, it takes the product and sticks it in the cart. In order for the person to make the purchase, they have to go to the cart and finish the purchase by clicking on the “Purchase Now” button or whatever. With the “Add to Cart” button you can add lots of different products to a cart before you make a purchase.

Buy Now Button

With the “Buy Now” button, you can only buy a single product and when you click on it, it doesn’t go to a shopping cart, it takes you immediately to PayPal for you to make a payment. There are no intermediate steps involved. It’s just one direct payment that happens as soon as they click the button where they’re taken immediately to PayPal.

Subscribe Button

The “Subscribe” button is for subscription type products. So if you have a PayPal account like I have where you can split the payments for a product over a number of months or if you’re selling a product that is by subscription where they pay so much a month in order for them to have access to the site, that is a subscription type of button. Neither “Add to Cart” nor “Buy Now” will work for those and the “Subscribe” button can’t go into the cart.

If you are including a subscription product, when they click on the “Subscribe” button, it takes them directly to Paypal for them to make that subscription purchase. The subscription features require that you use a “Subscribe” button for that process. So if you place a “Subscription” button on your page for product that’s a subscription product but you use the “Add to Cart” button, you’ll get the money but the subscription won’t be automatically set up and it’s going to fail. So it’s very important to recognize that if you are doing any kind of split payment or subscription style products, those products require you to use a “Subscribe” button and therefore you cannot use either “Add to Cart” or “Buy Now”.

Download Now Button for Free Products

The fourth button is the “Download Now” button and this is for free products. It’s not for any other kind of product, it’s just for free products. It’s WP eStore’s way of essentially bypassing PayPal and essentially processing the transaction without processing a financial aspect of the transaction. When you click on the “Download Now” button it automatically makes a site behave in the same way that the purchase button works if they actually purchase access to the download. So those are the four kinds of buttons.

Using WP eStore Shortcodes to Display Products

Last week, we looked at all these shortcodes for WP eStore. Let’s take a look at this list. I should just kind of walk you through how this spreadsheet works. It has main categories like Category Display, Product Display, Shopping Cart, Downloads and Miscellaneous, those are the 4 main categories.

The first row tells you what the shortcode affects, so this shortcode affects all categories and if you put that shortcode in a page, it will display a plain list of all categories and those list will link off to their category pages.

The next one is wp_eStore_list_categories count=true, it will display the plain list but it’ll also show product counts. All categories, wp_eStore_list_categories count=false order=1, this allows you to either show or display the count and also sets an order for the list of the categories. So this order number is sort by category ID in ascending or by a category ID in descending or by category name in ascending or descending. So that’s 1, 2, 3 and 4, those are your options and you put one of those options here, it’ll order that list in that way.

Then you get to the Fancy list, that’s the one I showed you earlier where it displays all of the categories in that stylish way. You still don’t have the count or the sort order anything like that here so this is just going to automatically display them by category ID from smallest to greatest, I believe.

Then this one, all products within a category, this is one where it displays all products in a given category and this is a very simple list and then you have display all the products in a given category fancy and that’s Fancy 1. That’s the one I showed you on the other site where it’s id=1 and in that case, that’s the category ID and style=3. You actually have styles 1 through 13 to choose from because you can use this shortcode to display all of the products in a given category, in a given style, okay?

Then you have all of the products in a given category, in a given style, in a given order so now you can set the order. Then you have all of the products in a given category, in a given style, in a given order with a specific type of button, “Add to Cart”, “Buy Now”, “Subscription” or “Download Now”.

So you can start getting a feel for how this works then this is all of the products in a given category, in a given style, in a given order, with a given kind of button and only show 5 of them so that’s limiting it. That’s how these things work and then here’s your listing of all products and then all products in a stylish way and you can specify the style and specify the order and all products, specify the style, specify the order, specify the button type.

In this case, this is multiple products and in this case, now you can specify…well, this one is the latest products so the 5 latest products or some number of latest products in a given style. Then the next one is popular products, you’ve got random products, you’ve got popular products and then you’ve got this individual “Add to Cart” buttons and things like that.

So you’ve got quite a bit of different variation in the shortcodes and including showing the individual products say, for example, in Fancy 13 ID here is not category ID but product ID and then you’ve got the individual product elements that can be used.

There’s a lot of shortcodes here with a lot of options in order for you to display your products that way. So, those are all the shortcodes and all the ways in which things can be displayed. Now, in order to really understand how this works, you actually have to have data.

In last night’s session somebody wanted me to demonstrate how to payout affiliate commissions using the affiliate platform but the only way you can do that is if you actually have commissions to pay out. And the same thing is true here, you can’t really see what this stuff looks like until you have the data, until you have products and product categories. So, that’s what we’re going to do now.

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