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 7 – Part 2 – Customize the Checkout View

Difficulty Level -

Listed Under Lesson Subjects - ,

Applies to -

We’ve customized our Shopping Cart view and the next thing we’re going to do is customize the checkout view in Shopp.

Review Current Checkout View

The checkout view is very similar except it’s got a bunch of input fields that need attention. You can pretty much see we’ve got a login button that’s going crazy. We’ve got email, password, first name and last name organization.

Those things are fine and it could even well be that our billing address is fine although I would feel better about it if it was wider so that’s what we’re going to do. We’re going to come in here and fix our login button, our submit order button and widen out our billing address information.

We’re going to make those style changes using plain old ordinary CSS. We don’t really need to modify or change this in any way. That’s interesting, Shopp form UL LI span. That’s a span and that has the password in it. It’s this width, 45% thing that is still causing us problems and this is format text input. These are input type passwords, right?

You have different kinds of input types and when I said width auto, what happened was I fixed all this stuff but when I made an input type text, that fix went away. Inspect element, input type = submit and the id = submit login checkout. Okay, let’s just go ahead and fix those things.

Email and Password Field Fixes

Enter there and we’re just going to take this whole thing again and instead of text, we’re going to say password. Then we’re going to go ahead and add another button to this. We’ll copy this, comma and enter. Actually, that wasn’t a class name, was it? That was a pound sign so that was an id, as I recall. This was id = submit login checkout.

It would be slightly different here than that. Submit login checkout, copy that again, paste it there and put our hover pseudo class in that. That should make our login button right. Before we do anything else, let’s upload this. I like to check my work as I go along so I make a few edits. Check it, make a few more edits and check it.

Okay, that fixed my email and the password field so we’re part way done with customizing the checkout view. What can I do to make that line up a little bit better? There’s a little bit of margin around that thing, is that right? Let’s see. Margin left, that margin is okay. It seemed like there was something on the bottom as well.  We can move this thing around just a little bit.

In fact, let’s just take a look at the checkout form in Shopp for a second here because maybe that’s where the solution to this is. I suppose we might actually be able to force that stuff to line up a little bit better if we mucked about with that but we’re not going to do that tonight. It looks pretty good.

Customize the Widths

The next thing we’re going to do to customize the checkout view in Shopp is widen out these things and this is input type = text. What I really want to do is get all of these little bits because right now, their widths are coming from nothing in particular. I could just take each one of these things, grab their ids and give them a more specific width.

For example, if we just look at all of these, we’ve got billing city and we’ve got billing address. We’re just going to do that; we’ll grab billing zip code and or billing post code. Let’s just go back to that for a second. If we did billing post code, right now, it’s 143 pixels wide. If we made it 300 pixels wide, that would probably be fine. Let’s just try that. Maybe that won’t look as good as I think it does.

We’re going to pick up a new group here and this is going to be the product view, category and shopping cart. I like the checkout, here we go. Then we’ll say .format_text #shop and .custom format text_shop, input, we’re going to say id and this is going to be billing address.

Here, what we’ll do is say, width 300 pixels and then of course, we want this 4 times. That’s funny, why do I get that every time? It’s not billing address; billing x address is the next one. Okay billing x address, billing city and billing post code. Let’s see what that looks like now.

There it is, we’ve made our things line up better. Now it’s working fine except for submit order. Let’s add submit order to our thing. Input type = submit class = checkout button so that’s what we’ll take, checkout button.

It’s exactly the same thing we’ve done up here with the rest of the buttons in Shopp. Input, comma, we’ll come down and put it next to hover. Upload and refresh it. We’re going to want that to go off to the right and we may as well make this one bigger too, right? I don’t want anybody missing the submit order button.

We could just add it to this and use the checkout button, we’ll try that. That’s interesting. It drops down there so why did it drop down? Maybe what we needed to do in this is give it a width and let’s give it 200 pixels. See what happens. That didn’t do it. Let’s go play with this over on Firefox a little bit. It’ll be easier to do this in Firefox than it is in Chrome.

We’ve got our submit order down here and we have UL. It’s entirely outside of the UL. Maybe it’s a better choice just to make it aligned to the left instead. We need the colon, 200 px. Nice big font, size: 14 px. No, 15? 16? 17? Let’s give it a little top margin.

We’ve got the form to fill out and we’ve got our nice, big submit order button. I’m going to give it 18 pixels and let it stand out nice and big. I know we really want it to do it.

That’s what this is going to look like instead. We have our checkout and we have all the rest of that stuff working. If we hit submit order, of course it’s going to want me to fill out the payment information so I can’t go any further. Anyway, that completes our Customize the Checkout View in Shopp lesson.

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