This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome back to Part 5 of Lesson 13 of the Build Your Own E-Commerce Website tutorial series. In this part of the lesson we are going to change the shopping cart so that it displays only on individual pages not on every page on our ecommerce website.
WP eStore Shortcodes
The way we’re going to do that is by using the WP eStore Shortcodes. You may already have downloaded the WP eStore ShortCodes Cheat Sheet but if not I have included a link to that again here at the bottom of this Lesson 13 Resources. We are going to open the cheat sheet because I want to get some information from it. Scroll down the cheat sheet and you’re going to see that we’ve got some ecodes that affect our shopping cart. There are four different kinds of ecodes. There is the standard shopping cart, and there is the standard that does not display if it’s empty, and then they have their fancy one that does not display when it is empty; it only displays when it has a product inside of it.
We’re going to copy that, come back over to our widgets, delete this shopping cart and add a new text widget. So we’ll come down here to the bottom, grab our Text widget and put this there below our You Tube and call this Shopping Cart. Then we are going to paste that short code there. Next we want to choose which pages this is going to show on so select Show on checked and we’ll show on our Customer Support page, our E-Books page, our Books page, and our Categories of Books and E-Books – I think that’s about it.
Four Shopping Cart Styles
Hit Save, come back over to our site, go back to the Home page and you can see that there is no shopping cart anymore on the home page. We go to one of our products and the Shopping Cart is here and it shows up. You can see it right there even though it says it is empty. If we add something to the cart then the rest of the cart fills out just like before. So, so far so good – the Shopping Cart works like this just like we thought it should.
Now let’s take a look at our other options. If we come back over to our short code and instead of that short code we pick the we_estore_cart_when_not_empty short code, come back over to Widgets and replace the short code and hit Save, come back over to this page and refresh it. Because we have a product in there it still shows but if we remove our products now the only thing that shows up is our title, Shopping Cart – nothing shows there at all. Which I don’t actually think is a very good idea so we’re going to fix that.
If we come back over here and we look at our wp_estore_cart_fancy1 and copy that and then come back over here and paste it and hit Save – now we’ll see the other version of their shopping cart – oh whoops – let’s refresh it. Okay so now it says Your cart is empty. If we add something to it now we get this style, their little fancy style of shopping cart. So if we picked our other version, that is if we picked this one here, the when_not_empty one, it behaves exactly like this so there’s really no reason for us to do that.
But I do prefer this one so I’m going to take that back, come back over here, paste that and hit Save. Then we’re going to close that up, come back over and take a look at this and the one thing I don’t like about the Shopping Cart is that the default Thesis settings kind of screws these things up a little bit. Really these things shouldn’t have a background color and shouldn’t have this little border around them. It should in fact look like this. So if we come over to our Catalogue and we add something to the cart, it should like this with no border around that, with no border around this, no border around that – so we’re going to fix that in the last part of this lesson and we’re going to fix that in CSS.