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 6 – Create Categorized Product in Genesis

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

Good morning everybody and welcome to this week’s session of the WordPress eCommerce Seminar Series. Today, we are going to continue the work that we were doing last week on setting up large eCommerce store that sells digital downloadable products and intangible products in WP eStore.

If you weren’t at the last session you might get a little bit lost but because I’m not going to go back through what we did last week. We’re just going to continue working with it this week and continue building the catalog in both the Genesis theme and in the Thesis theme.

Progress Report from Previous Session

Last week when we ended here, we’re in estore2.genesisestore.com, we had our product department pages and catalog pages completed. If you recall, we created 3 different categories or sort of super categories of products that was Instruction, Plugins and Consulting. Then each one of those had this sort of pseudo subcategory, so WordPress Instruction, Thesis Instruction, Genesis Instruction, WooCommerce Instruction, MarketPress Instruction, WP eStore, WP eMember and SimplePress.

We have all of these different instruction areas that are going to have products and these are product category teasers. Essentially, they’re just showing us the product categories with a link to the product category page that we created.

Remember, of course, that we did all of this in pages and we’re going to continue to work in pages in WP eStore. After we get the store set up in WP eStore for Genesis, we’re going to switch over to Thesis 2. In that case, we will be using custom post types but right now, we’re going to continue doing this using pages in Genesis.

Create Products in WP eStore

We’re going to just go back in and start creating products in Genesis. We’ll go into WP eStore and go to Add/Edit Products. And the first product that we are going to create, will be a plugin. So we’ll say First Example, Thesis Plugin. Give the product price a price of $15 and now, this is something that we didn’t do the first time we created products in WP eStore and that is we’re going to use this Additional Product Details for this.

Product Description

The first thing I want to do is to place a Product Description in here and this is going to be a short description. I’ll just take a little piece of lorem ipsum text. This short description can contain HTML so we could, for example, say bold this. It can also contain shortcodes.

There are a couple of display styles in particular that look for player shortcodes to play audio previews and so, you can put shortcodes in the Product Description. The Product Description will display differently depending upon which display style you’re using. So for example, if you’re using the Fancy 1 style of display, it’ll display the entire description regardless of how long it is and the same thing is true with Fancy 2.

Fancy 3 though won’t display any content at all there. This is actually the product title here, Fancy 4 will display it all, Fancy 5 will not display all of it. Fancy 5 cuts it off at a certain number of characters. Fancy 6 does not display any, neither does 7 or 8. Number 9 and 10 will display as much as you possibly want, number 11 I think actually displays a little bit, I guess maybe it doesn’t, but number 13 only displays a short amount of the description and the long description just gets cut off.

Product Description Length Depends on Display Style

So the amount of description that’s going to show up is dependent upon the display style that you’re going to use and so you want to keep that in mind when you’re thinking about that. This is an example where the shortcode is being used. In this display style, they don’t put any description, all they did was put a shortcode in for the player, the same thing is true with these two things here. The description can fill a variety of different purposes. In this case, we’re just going to make a short description, sort of introductory description and the full description will be on the product page itself.

Insert Thumbnail Image URL Into the Post

Next you have the Thumbnail Image URL and this is the location of the thumbnail image itself. More specifically, it could be a location of a thumbnail but it can also be the location of a full sized image and if you click the Upload, this will give you the opportunity to add it to your Media Library.

I’ve actually added all these images to my Media Library so all I have to do is come over to the Media Library and I’m looking for a choice of Thesis plugins. I said the first Thesis plugin so if I click on the Show button, all I have to do is say Insert into Post. None of the rest of these things really matter, all we’re doing is inserting this URL into the post. The full size and the thumbnail size has no bearing on this so we just click Insert into Post and we now have the image that we want to display.

Now, if we want somebody to go someplace when they click on the image then we would put that URL here. In our case, that’s going to be the product page. So while we’re at it, we’re going to create a product page as well.

Add Another Product Page

So we’ll come over here to Pages and Add New and our product is First Example, Thesis Plugin. We’re going to put that in there as our product name and then I’m going to put a bunch of lorem ipsum text in here as content. Then I’m going to pick the category that we want it to go under.

This is under Plugins so that’s going to be a child of Thesis Plugins and this is my first one so I’m going to give it an order of 1, we’ll just use that for organizing the display on the admin side. Hit Publish and then if we view the page, there’s our Product page.

Product Options

Now we’re going to take that URL, come back over to our product and add that as the Thumbnail Target URL and that is the page that you’ll go to when somebody clicks the thumbnail. Now, you could insert an old price say like $20 and these things will display the old price and the new price. If you add Additional Product Images, you could place the additional product image URLs here and then you would enter a comma after each one so you can do that there.

Product Page URL

The Product Page URL is the same thing as this Thumbnail Image URL and we’re going to paste that in here. Now, what happens in this case is if somebody clicks on the title of the product, they will be taken to the product page. So this makes the product title take them to the product page. This makes the thumbnail take them to the product page. So then we’re going to pick a category and that category is Thesis Plugins.

Button Image URL

Now, Button Image URL allows you to create your own image for your “Buy Now” or “Add to Cart” button. The image in this case is specific to the product, this product only. The image wouldn’t apply to any other product and so if you want a special button for this product, you can create one.

Button Redirect Target URL

We’re going to talk about the Button Redirect Target URL more in two weeks but this is a URL that would take somebody to a specific page if they click on the “Add to Cart” or “Buy Now” button. So rather than taking them to the cart or to PayPal, it will take them to the URL that you place here. And that’s what we’re going to use for free products.

In a couple of weeks, we’re going to be working on setting up free products and how the whole free product system works. So getting people linked in to your AWeber or MailChimp account and in that case, we’re going to use this Button Redirect Target URL to redirect them back to an email signup page before they can get that product. We’ll come back to that later.

Other Options

If you have quantities that you want people to be able to purchase then you would choose this. Obviously, that’s not relevant in eBooks and that kind of stuff so we’re not going to worry about it here for the moment. This allows the customer to specify their own price, if you can imagine wanting to do that, you can do that. This allows you to collect customer input. So for example, if you were having something engraved and you wanted them to provide the name that you want to engrave on it, you could check this box and then say, first name engraving or whatever as the label. Then a form would show up for them to fill it out.

Product Specific Commission, this really only has to do if you are using the WP Affiliate Platform and if there is a reason why you don’t want this product to follow the main settings that you set up in the affiliate platform.

A Reference Text is primarily used by membership plugins. So for example, WP eMember looks for this Reference Text when a product is purchased. There are plugins that will use this information.

So these are the kinds of things that you can set up but we’re not actually going to do any of these here with this product. The Digital Content Details, we would put the download URL of the product here so check it as Downloadable and then all the rest of this stuff we’re just going to leave the same and we’re going to hit Save Product.

How To Rapidly Create Products

Now, to the extent that you want to rapidly create products, you can always create a new product, click on that. This is Product ID 2 now, the one we just created and I’m going to show you how to copy this product. Just put Product ID 2 in there and say, Copy Product Details and all of a sudden, it’s done. Now you can say Second Example Thesis Plugin and then come along here and change things like the upload file and the target URL and that kind of stuff and make it a lot easier for you to quickly set up products here.

Add Products to the Product Page

Once you have your products set up, you want to add it to your product page. So we’re going to go back to edit this page. And if we go back over to the visual view for a second, you can use this shortcode function here to insert the product. Well, you could use this “Add to Cart” button. We’ll just insert that here and we’re going to say this is for product 2 and update.

When you do that, you get this “Add to Cart” thing here. That’s not particularly useful in this case but it actually might be useful down at the bottom so we’ll take it down here to the bottom. We could put something else up here instead, one that shows the price and all the rest of that stuff here. And that would be something like wp_eStore_fancy1 id and we’ll insert that and again, we’ll say product number 2.

If we hit Update now and refresh, we have the Fancy 1 display. So we’ve got an “Add to Cart” button down at the bottom of the description and an “Add to Cart” button here. You can see the HTML at work in the description here with the old price and the new price and the “Add to Cart” and our image.

Review Display Options on the Shortcodes Cheat Sheet

There are obviously a number of different choices that you can make here and the choice that we made automatically puts it in this style with an “Add to Cart” button. But let’s come over to the resources for this lesson, Sell Your Products with WP eStore and then go to Lesson 2. We have this Shortcodes Cheat Sheet here and let’s click on the Shortcodes Cheat Sheet which is a list of all the shortcodes that are available to us.

Displaying a Single Individual Product

If we want to display a single individual product, we have these things here under Product Display. If we want to display an individual product, we use this one wp_eStore_fancy1 and there are a bunch of sort of individual shortcodes here allowing you to add various different versions of these things.

For example, we could just come into this shortcode and instead of fancy1, say fancy3, hit Update and refresh this and that’s what Fancy 3 looks like in this context. If I want everything to jump up beside it, I have to do that. So if I do that, what happens is the text sits up, well, come on now. Let’s try that again.

Okay, I guess it doesn’t jump up automatically with this style; however, a much more versatile way of managing these things is to use this shortcode right here, it’s wp_eStore_fancy_display id=1 that’s the product ID so in our case, it’s id=2, type=1, that’s the type of button. So it’s “Add to Cart”, “Buy Now”, “Subscription” or “Download Now” type of button. So “Add to Cart” would be 1, “Buy Now” would be 2 and then style 1 through 13 because there are 13 different styles that you can choose from and this I think is a much more versatile shortcode here. It has a companion which has show_price=1 which would allow you to not display the price.

Now in this circumstance, there’s no reason to do it that way. There is one further down that has a restriction associated with it that’s based on a membership level. But for our purposes, this is what we’re going to use, this individual product, we’ll copy that, come back over to WP eStore and id=2, type=1, that’s “Add to Cart” and style=1, that’s that Fancy display style 1, hit Update, refresh it and it looks like this.

Now actually, I think that style 2 is more in keeping with this style of this Genesis theme and you’ll see what I mean so if I change it to style 2 now we have our description sitting directly below our product here. Yeah, I guess that’s what I want to show you.If we look at the style 3 for a second, I think it will jump up there beside it now. So using the code that way rather than Fancy 3, allows the text to jump up beside this. So if you want something that looks like this, it’s a workable solution I think for this.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment