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 13 – Part 6 – Edit the Appearance of the Shopping Cart Using CSS

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects - ,

Applies to -

This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.

Welcome back to the sixth and final part of Lesson 13 of the Build Your Own E-Commerce Website tutorial series. In this part of the lesson we are going to edit the CSS of our Shopping Cart so that it no longer looks like this and instead looks like this.

We’re going to do that in a manner similar to the way we do all of our editing like this. We’re going to do that in Firebug. Open up Firefox. We’re going to go ahead and navigate to the page where we want to work on.

So we’re going to add a product to our shopping cart so now we’ve got our cart to look at and we’re going to inspect these elements in Firebug and then we’re going to use Web Developer to edit the CSS until we get it right. Then we’ll copy that code and paste it into our custom_css file, upload it and we’ll be good to go.

Identify the Elements in Firebug

We’re going to right click on that and say Inspect Element which pops up our Firebug. You can see that we’re all wrapped up in a div and the element in particular is an input type image. So if we come over here and look at what our styles are on the right you can see that it is being controlled by input and textarea which also applies to this, and this and this. We don’t want to change how it looks here but we don’t want this style being applied to this. So if we see what it looks like if we turned off our background, our border, and our border-style, you can see that it does pretty much solve that problem except now this goes off to white. So we have to turn that off only for our input type=’image’.

Modify Input Type Image

Let’s turn those back on and open up our Web Developer, we’re going to edit the CSS here. Go back over here so we can see what we’re looking at. Okay, again this is input type= ‘image’ with a class of shopping_cart so we’ll copy that class name. Come over to custom.css, first we’re going to copy this section here, paste it and now this is going to be Shopping Cart. Then let’s delete all this for the moment and let’s get our shopping_cart, copy that. We will start with a period for class, paste the class name and now let’s get rid of the background color. Say background, colon and we’re not getting rid of the background color, we’re just making it white – ffffff, and it’s not just the shopping_cart it is the input type=’image. So shopping-cart input and then a straight-up bracket, type, equals, double quotes, image, double quotes, closing bracket.

That got rid of the gray background around each of these buttons. Now we want to get rid of the border for each of those. So we could say border:white – well let’s try border:none first, see if that works. It works fine.

Now what we’ve done is we have changed the buttons without changing this background image simply by telling the input type equals image, which is what we’ve got down here, to have a white background and no border.

Modify the Heading

I want to make this Your Shopping Cart a little bit larger and so if we inspect that element we can see it’s an h2 and it’s an h2 inside of this shopping_cart class. So we can still take this, copy, paste, we’ll say h2 and none of these things really apply to it, so say font-size:2em. This is being affected someplace else so we can beat that by starting with a dot, custom, shopping_cart. In fact we should probably do that with this one too – dot, custom. That makes sure that this takes precedence over WP eStore Custom Styles or whatever else that is affecting this. We add custom in front of those things, our font size – I think we can go back down to 1.75.

Grab that code, copy it, come back over to our custom.css file, go down here below the advancedrecentposts, give ourself a little space, paste it. Save the document, open it up in Filezilla and upload the document, come back over to the website and refresh it. There it is. If we turn off all of our material we still have Your Shopping Cart and so we could get rid of this text here if we wished. Come back to Shopping Cart, delete that, and hit Save, refresh this and we’re good to go.

We want to give a little bit of padding above and below Your Shopping Cart. Come back over to custom.css and scroll down to that h2 tag, we’ve got our font size at 1.70em, we could say padding – top and bottom so we’ll say 10px then we’ll say 0px, that’s left and right. Then I think that looks pretty good.

I think I’ve told you before I usually copy an entire section just to make sure I’m not forgetting or missing something. Take that whole thing again, replace that, save it, upload it and look at it.

Test in Browsers

We may as well look at this in Internet Explorer as well. Open up Internet Explorer, paste the link and that looks fine. It looks like exactly how we want it to look. Go back over to our home page and our video shows up, our slideshow shows properly and we’ve got our entire product list and have succeeded in controlling which widgets show on which pages.

That wraps up Lesson 13 of the Build Your Own E-Commerce Website tutorial series.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
4 Comments… add one
4 comments… add one
  • ROBERT DIAS October 29, 2012, 6:10 pm

    did not find thesis_post_image custom field in the Version 1.8.5
    how can I Create a Product Listing Using the Advanced Recent Posts Widget. Thanks

    • Rick Anderson October 30, 2012, 7:58 am

      Robert, if the Thesis Post Image and Thumbnail dialog isn’t available on the post open up the “Screen Options” tab in the upper right and put a check in the box beside “Thesis Post Image and Thumbnail”. Once you’ve done that you’ll see the dialog.

  • ROBERT DIAS October 29, 2012, 8:01 pm

    Following your guide I got the one single thumbnail for the entire list. How can I modify and make just like your?

    • Rick Anderson October 30, 2012, 7:59 am

      Robert, could you post this question on the forum and include a link to where I can see the single thumbnail?

Leave a Comment