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 3 – Place the Shopping Cart on the Store Pages

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to - ,

Now that we’ve configured the WP eStore shopping cart, the next thing we’re going to do is actually place the shopping cart on a Store page. We’re going to add the shopping cart to this Checkout page.

Add the Shopping Cart to the Checkout Page

So we’re going to come back over here to go and edit page and then under Lesson 3 Resources, there’s this WP eStore Shortcodes Cheat Sheet, I’m going to access that because I’m going to copy a shortcode here and you’re undoubtedly familiar with this.

If you scroll down towards the bottom, you’ll see a set of shortcodes specifically addressing the shopping cart. We’re just going to copy this one at the moment, the [wp-eStore-cart] and come to the edit page and paste it. Hit update and then view the page. Right now, it says no items in your cart, there’s a little thing “Visit The Shop” you can click.

We’ll come over to the Store and I’m going to go to Instruction and I’ll go to WordPress Instruction and WordPress Video. I’m going to hit “Add to Cart”. Well, right now, you don’t see anything, right? We’ve added to the cart but you don’t have any indication of that.

Add Widget to Sidebar to Show the Cart

The fix for that is to actually add the cart to the sidebar using that widget so we’ll do that here. We’re going to come over to our Appearance and Widgets, we’re going to grab the WP eStore cart and stick it in the primary sidebar. So WP Cart for Digital Products, drop it there and refresh this page and here it is.

With that refreshed, it’ll look different in Internet Explorer now because you see a little warning, “Item already exists in the cart”, so it did not automatically add another one to it but it is adding the WordPress Video.

You’ve got this “Checkout with PayPal”, you can click on “Continue Shopping”, you can remove the product if you wish or you can add the product to cart. We don’t have a quantity here so you can’t increase the quantity but we could also add the WordPress book to cart. When we add that, the total increases and if we hit “Checkout with PayPal”, it’s now going to take us to the Rick Anderson’s Test Store, the test site.

It’s actually showing the wrong email address here for us, it’s showing the business email. If we want to make this purchase, we’re going to make the purchase using the rick@tailoringtheweb email which is the buyer account that I created but we’re not going to do that yet.

Review the Checkout Page

So if we go to the cart which is Items in Your Cart, here’s what the regular checkout page looks like. We’ve cleared out everything and we just have one great big shopping cart here and interestingly, this should be taking us to the shopping cart so I must have not saved that redirection thing in this Plugins settings.

We’re going to come back over here to those Plugins settings, WP eStore, Settings and we don’t have Terms & Conditions, this our product store, that one’s working, here’s our URL, our Cancel URL we’re leaving blank and Do Not Show Quantity in Shopping Cart, Display/Continue Shopping Link, okay. So I guess if we want to take advantage of this page then you would in fact, click “Automatic redirection to checkout page”. Let’s do that and hit Update Options. Go to WP eStore and click Checkout, still taking me to PayPal so if I click that, it doesn’t matter.

You see there’s this SHOPPING CART WIDGET TITLE up there and if I click this, it’s ignoring that order to go to the shopping cart page which is a little surprising to me because I thought that would work. So let’s try this, Enable Fancy Redirection On Checkout. Let’s update those options and then go back and take a look at it again.

This refreshes it. Let’s do that, that’s what happens with that Fancy redirection, it just does that which I guess is fine. But in any case, it’s not taking us to our shopping cart page and I don’t know why that is the case. Obviously, it doesn’t really matter here but nevertheless, that’s what it’s supposed to do, is when you click on a product and add it to cart, now it’s happening.

I take that all back. It’s the “Add to Cart” that takes you to the Checkout page, you can “Continue Shopping” to go back and you’ve got the shopping cart here. Add that product to cart and every time you add a product to cart, it takes you to the Checkout page and then you can “Continue Shopping” or you can continue with PayPal. If you “Continue Shopping”, it takes you back to the main store page and if you “Checkout with PayPal”, it takes you to the PayPal payment system.

Ways to Display the Shopping Cart Using Shortcodes

There are other ways in which you can display this shopping cart and they’re all based on shortcodes. Let’s just look at our shortcodes here. You could use this shortcode which will display exactly the same shopping cart but is only visible if the shopping cart’s not empty.

Let’s come back over to our Pages and go to our Checkout Page and instead, we’ll do this one, [wp_eStore_cart_when_not_empty]. Hit update and then look at this. Let’s just clear that out but then come to Checkout, it doesn’t show anything there. It doesn’t show your shopping cart as empty, return to shopping or anything like that. Whereas previously, if you had gone to this without contents in your shopping cart, it would’ve said that, “Your shopping cart is empty. Please return”.

Then you’ve got another concept here which is the [wp_eStore_cart_fancy1] and we’re going to go take a look at that. That looks a fair bit different and we’ll go visit the shop and we’ll add a product. So this is the Fancy version, right? Where you’ve got a little “Continue Shopping” button and all that sort of thing. So you can use this kind of a system instead of the standard one and that actually looks pretty nice. You could use some CSS to customize it so it matches your store without too much difficulty.

Adding the Compact Cart

Next up you have the same thing but is hidden if it’s not empty. So again, some of it we saw before. Then you have the [wp_eStore_display_compact_cart] and the compact cart is the version of the cart that’s in the widget. So if we just copy that, come over here and paste that . Then hit Update and refresh the page, now we have the exactly the same thing. This is the compact cart, pardon me. This is not exactly the same thing as the widget. The widget shows that, the compact cart does not and you wouldn’t use the compact cart on a page but you would use the compact cart in something like a widget area.

First off we’re going to copy that and paste it in a little text document and then secondly, we’ll come over here and go back to cart_fancy1. Let’s come over to Appearance and Widgets and this child theme in Genesis has this right widget area which is very common in Genesis child themes.

We can drag a text widget up to that and then take our compact cart shortcode and place it in that text widget and save it, Now if we refresh this…that’s not what I was expecting either. Okay, this is not the compact cart that I was shooting for because this one is significantly enlarged, [wp_eStore_display_compact_cart].

I see, this is a smaller version, compact_cart2. Now we’ve got this nice little thing here where no matter where you are, you see that cart up there and if you remove items from the cart, it says, “Your cart is empty” and that sort of thing.

The alternatives are [wp_eStore_display_compact_cart3] which gives you really the same functionality with a somewhat different style and the same thing is true with 4, it’s the same functionality just a different style. Then if you add a subproduct to your cart it says, “1 item $13.00 View Cart” and so on.

Specifying Different Aspects of Compact Cart

Now, there also is this nice little system of showing your compact cart where you can specify the aspects of the compact cart that you want to show up. So for example, if you want to show the subtotal you can do that. If you want it to show up only when it’s not empty, you can put a 1 there. If you want to show the title, you can put a 1 there and show cart image, you can put a 1 there.

We’re just going to go ahead and copy this and I’m going to show you what that looks like. I’m going to put this one in the primary sidebar in a text widget and make sure this is actually a whole text widget. So [wp_eStore_display_compact_cart show_empty=1 show_sub_total and this is a “Compact Cart Test”.

If we look at it over here, here’s the Compact Cart Test and it’s got the image and shows 1 product. If we remove the product then nothing is showing up there, it says, “Your cart is empty”, “Visit The Shop”. If we add a product back in, it’s going to show the image, items in your cart and this.

If we put a 0 here and a 0 here and a 0 there and a 0 there and refresh this cart, now all it is is “1 item in your shopping cart” and “View Cart”. So it doesn’t have price, it doesn’t have subtotal or anything like that. Then if you want to say, show the subtotal, we can put the 1 back in there, hit save, refresh and there’s your subtotal. So this is another way of displaying shopping cart in some place or another.

There are a couple of other shopping cart ones and this shopping cart is actually the one you may want to use because it shows this thumbnail image of the product. So let’s view the cart and edit this page and put this code in [wp_eStore_cart_with_thumbnail]. Hit Update, view the page, that’s what it looks like. Now, it doesn’t just have the name of the product but it also places a thumbnail image of the product beside it. So those are your various “Add to Cart” functions and they’re all working just fine. Now that we’ve done this, let’s test the transaction.

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