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 8 – Add Products to the Product Category Catalog Pages

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Now that I’ve shown you how to create your first product for WP eStore, we’re going to go over to a different site where I have created 28 products, Here under WP eStore, I have 28 products all with their information already set up.

Under Pages you can see that the product pages have been created, so we’ve got our Consulting and Consulting by the Hour, First Consulting Package, Second Consulting Package, Instruction, WordPress Instruction, Thesis Instruction so on and so forth.

Each of the product categories has products that have been created already and I didn’t think you needed to watch me create all those products again and again. Instead, I’m showing you a site that has all that done.

Add the Category of Products to the Product Category Page

However, if we go to our Products page and say we come over to Instruction and we go to WordPress Instruction, we still don’t see our products listed and that’s sort of the last part of setting up this product catalog, that is to add the category of products to the product category page that we set up.

Remember we set up a parent page called Store which is our products. Inside that parent page it has 3 child pages, Instruction, Consulting and Plugins and then each of those 3 has their own child pages. So right now, we’re on the WordPress Instruction child page which is supposed to take a listing of all the products under WordPress Instruction.

Add the Shortcode to List the Products

If we hit Edit Page here, we could put some introductory text in first but the next thing we want to do is put in a shortcode that’s going to list our products. Now, what we’re looking for is category products and so wp_eStore_category_products or wp_eStore_cattegory_fancy id=. And so in this case, we are going to take this one for a moment and then we need the category ID for that product which we need to look up.

WordPress Instruction is category 4 so we insert that with a 4, hit update and now, all of the products are going to display. Let’s view our page and no, that’s not right, I’m sorry that was the wrong shortcode. The right shortcode is category_products and 4. Hit update and view the page, “No products in this category yet!”, because I haven’t assigned categories to those products yet.

Assign Product Categories to the Products

So we have to come back over to our products and assign them product categories. Let’s go back to Manage Products and we’ll just start at the bottom and edit this product. We’ll give it a product category, this is the First Example Thesis Plugin so it’s already got a category of Thesis Plugins, okay.

This is the Second Example Plugin, it also has Thesis Plugins, I’m guessing the third one does too. No, so we add Thesis Plugin category to that and then save the product. Then Manage Products and then First Example Genesis Plugin and we’re going to do this more here, Genesis Plugins, save.. So now we have all of our products properly categorized and now if we refresh this, we have our WordPress eBook and our WordPress Video under WordPress Instruction.

Add Product Display Style

If I wanted to show that style 2 though what I would do is come back over here to Category Products, all products within a category and I’m going to use this one wp_eStore fancy. So I can choose the fancy style, the ID is of course is the category ID, the style is what we want the thing to look like. Fancy 2 in this case so we’d use 2, order is the sort by whatever product order you want and type is the type of button we’re going to use.

Let’s copy this code and come back over here to our page and instead of this one, we are going to say 4. It’s going to be type 1 and it’s going to be style 2, hit update, view the page and now we have this style that matches our other style.

Let’s come back and look at our products and we’re going to do this with each of them. We’ll go to WordPress Instruction and grab that shortcode again. If we edit this page and look at our categories, Thesis Instruction is category 5 so we’ll paste that there with ID of 5. And this has two sets of videos and 2 books under that so that one’s done and then that’s WordPress and Thesis.

We’ll look at Genesis Instruction next and Genesis Instruction is category 6 so paste that shortcode in there and replace it with a 6, view the page, okay there we go. On to WooCommerce Instruction and that is 7 and that one’s working. MarketPress Instruction and MarketPress Instruction is 8.

If we click on one of these it takes us actually over to that one, there it is. So WP eStore Instruction, I’m guessing this is 9 and 10, if we look at that a video is missing from this. We don’t have the right category set up for the video so we have to come back to that one. Let’s see, WP eMember and Edit Page and that one’s going to be 10. Okay, the book and the video, both. And then SimplePress Instruction is 11, okay, those are done.

Now that Instruction is done, we’re going to go to Plugins and we’ll start with Thesis Plugins, Edit Page and Thesis Plugins are 12, okay we’ve got our 3 plugins there, 12, Genesis Plugins with 13. First, second and third examples take us over to the product, okay and then Consulting and Consulting is category 3.

There we have it, we now have set up our products and we’ve set up our product pages so that people can drill down on our products.

Add Breadcrumbs on Pages

The other thing I want to do with this is to add Breadcrumbs and we’re going to add Breadcrumbs on pages. Well, at the moment that’s where we leave them on and we’ll just say Save Settings. Now we’ve got little Breadcrumbs.

We’re missing our Store page here so let’s go back to our menus and let’s find our Store page, Add to Menu, that back up here. We’re going to remove this one and what we’re going to do is we’ll add our products to that page.

We’ll go back to the site and now the Our Products page takes us to our Store page and our Store page would have everything in it that our Products page had so these categories here would go into our Store page and now, our Breadcrumbs work perfectly because we’re Home, Store, Plugins, Genesis Plugins and Second Example Genesis Plugin. So if we want to go back to Plugins, we can just do that, if we want to go back to Store, we can do this and we can browse around.

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