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 5 – How to Customize the Box View of Product Listings

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.

Customize the Box View of WP eStore Product Listings

In this last part of the lesson we are going to customize the box view of the WP eStore product listing. That box view can be found over here under Washington Fruit and under Green Apples. What we are going to do with this product listing is to straighten it out so that these two are on top of each other. We are going to change these two background colors and we are going to make the Add to Cart button.

Identify the Elements of the Display

We’ll start customizing the box view of the WP eStore product listing by inspecting the element. This element starts off with its biggest class, eStore-product-fancy4. You can see how that is being defined and inside of that we have the eStore-fancy4-header which is one color and the eStore-fancy4-footer which is another color. Inside the footer is the eStore-fancy4-thumb and also the eStore-fancy4-product-description. These are all the structural elements that we’ll be working with here in order to customize the box view of WP eStore product listing.

Align the Thumbnail Images

Flip over to our custom.css. We’re going to go above this and start off by aligning the thumbnail with the description. The challenge here is to figure out which one of these defines the width. I believe it’s going to be defined by this eStore-fancy4-thumb – it doesn’t have a width yet.  The problem is that width is not defined and so rather than this being forced to be down below it, it is allowed to float over to the side. We’re going to give it a width that prevents these from being offset like that.

Copy this eStore-fancy4-thumb and type in .custom, paste, braces and give it a width of 125 pixels. What that automatically does is it forces these two apart. Let’s also give a margin right to make it stand off a little bit from that side. Give a margin right of 20 pixels so it steps in a bit. I like the way that looks.

Change the Background Colors

Next in order to customize the box view of WP eStore product listing I want to change the background color of the footer. Remember that is the footer there and right now the background color is this. So copy this. Footer is above that so I’m going to start it there, give some braces with a space inside and give it a background color of yellow. I’m going to call it background-color and I’m going to use this color. I want to change the background color of the button while I’m at it. So copy this, paste that. I’m just going to say input which is what that class is. Remember from an earlier lesson we saw that if we look at this button here that is the input element and we’ve given it a background color of this yellow and so it is no longer white.

We’re going to give our header a background color. What we’re looking at right here is our fancy4-header and I’m going to use this green. Copy that and that was the footer .custom, paste.

Change Link Colors

Now we’ll give this a background color and it is going to be background-color #c9f17a. That makes this far too light so we’re going to need to change this link as well. Next we figure out what that link is. That is eStore-product-fancy4-a and I’m going to take this and I’m going to make it green. I’m going to do that by copying this and then I’m going to put a green color in there. I have to do the .custom.

Change Border Colors

Finally to customize the box view of WP eStore product listing we are going to change the border colors.  Now we have this nice green color like this. We could even make this border around that color and that border is eStore-product-fancy4 as I recall. Go ahead and do the same thing and then we’re going to say border-color and let’s make it this green color. Let’s take this border color and let’s change it to that green color. We’ll take that, give ourselves a little space and then let’s just take that border color right there. We’re going to have to also add that .custom to this.

Upload and Test Changes to the Site

Copy all of the box model information and go over to our store, I’m going to come down here below this and paste that. Then we’re going to go ahead and steal this comment box and paste it. Now this is going to be our fancy4 styles. Save that. Upload it and test it.

None of those things affected any of these other things that we looked at, right? It doesn’t affect the grid views; it doesn’t affect the category views; it just affects the box views.  That wraps up our lesson on how to customize the box view of the WP eStore product listing.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
5 Comments… add one
5 comments… add one
  • Peter Plourde November 4, 2010, 1:34 pm

    Rick, great video, to the left as you are editing, is that in netbeans?

  • Peter Plourde November 4, 2010, 1:43 pm

    Rick, figured it out, web developer. I couldn’t get web developer to work with firefox, said it wasn’t compatible with the version of firefox. I have the latest version.

  • MICHAEL TERRY September 3, 2012, 12:29 pm

    Hey Rick,
    I’m having a hick-up with the css. The changes in Lesson 7 part 1 did not effect my products page.
    If you click on the E-Store link this is effected by the size change but not the border on the product.
    If you click on T-shirts you see that the border is right.
    I didn’t finish the custom class part but it would look right if there was no sidebar.

    The link to my product page is…


    • Rick Anderson September 4, 2012, 8:40 am

      Michael, perhaps you’ve changed this since posting the question but right now it appears to be working exactly as you have coded it. The code in lesson 7 part 1 applies to the simple product display, but your product page shows the fancy product display. FWIW, the code in lesson 7 part 1 isn’t in your custom.css file currently.

Leave a Comment