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 4 – How to Customize the Grid 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.

In this part of the lesson we’re going to edit the grid view of WP eStore product listings. Let’s go over here to Tropical Fruit and here are all of our six different kinds of oranges. What we’re going to do is to add a background image that will serve as a frame for each of these. Then we’re going to make the images a little bit wider and then we’re going to give ourselves a little bit more space around them.  We will then have the basis for the grid view.

Use Firefox Inspect Element to Identify the Controlling Class

First, we want to find out what controls the background of these. Hit select Inspect Element. We have a div class of eStore-fancy3, and then a div class of eStore-fancy3-thumb. Inside of that thumb is the title and the image and then we have the div-fancy3-footer.

We’re going to put our background image inside of the div-fancy3-thumb. Copy that and come over here to custom.css. We’re going to do that above this so I type custom and then paste that there, curly brace, closing curly brace, indent a bit again. We’re going to give it a custom image as step one in creating the grid view of WP eStore product listings.

Create a Frame around Each Thumbnail Image Using a Background Image

That custom image already exists in my custom images folder but let’s look at it in FileZilla. You can see that inside of images I have this frame.png. We are going to describe this background image. It’s going to say background, hyphen, image and colon, URL and then we are going to have opening and closing parenthesis, a closing semi-colon. Inside of that parenthesis we’ll enter a single quote and then the address of the image. Copy the address of the site here first. Now that I’ve got my site I’m going to come over here and copy the sub-directories from FileZilla and paste that there. Then I need another slash. I’m going to copy the file name from FileZilla, paste and copy that then paste that there and do the closing single quote.

Adjust the Width and Height of the Display

Now you can’t really see it very well but that image has now shown up and if you look over here on the right as I’m hovering over it you can see that the frame image is 194 pixels by 215 pixels. So the only way to make this whole thing show up is to give height and width.

First let’s give that height and width to the class-eStore-fancy which is the big controlling class. If you look at this eStore-fancy3 it has a width of 139 pixels which is too narrow because we need 194 pixels. So, take this, come back over here and up above that I’m going to type .custom, space, eStore-fancy3, braces a little space. What we’re going to say is width, colon, 194px, semi-colon. That gave us quite a bit of additional view of the image. Because the image is not inside of eStore-fancy3 but is another level down inside of e-Store-fancy3-thumb, we also need to give that a width and a height. I’m going to give myself a little space and say width, colon, 194px  and then height, colon, 215px. Now the image shows up there nicely.

Adjust the Image Size

Then the next thing we want to do is to take this thumbnail and pull it down inside of the image itself and we’re going to do that using padding. Again we give ourselves some more space and we say padding, hyphen, top, colon, and let’s make it 40 pixels.

Then let’s give it some padding to the left, padding, colon, left, 30 pixels. Notice that when I did that all of a sudden we’ve got some background image showing up. That’s because the standard behavior of a background image is for it to repeat. We have to tell that background image not to repeat. Come back up here and say background-repeat, colon, underscore, no-repeat.

Adjust the Border

The background image repeat is gone and this looks pretty good except I don’t like the large border around these images although I don’t want to entirely eliminate it.  The way the colors work it wants some kind of a light frame. Let’s just make it smaller. I’m going to give it a border with one pixel. If I look at where the border is coming from it’s not from this thumb it’s coming from the image. So it’s eStore-fancy3-thumb, a, image. What I need to do here in order to get rid of that is to take this and below that we need to put our .custom in here.

The reason we put .custom in front of these styles even though they’re not Thesis styles is because sometimes the styling of a plugin can override the style you put in your custom.css file.  The way Thesis works unless is that it gives automatic priority to any CSS that starts with a .custom.

We’re at .custom, eStore-fancy3-thumb, a, image and let’s go ahead and say that border width 1 pixel. There we have our nice little border width of one pixel.

Adjust Image Size

I wanted to make the image larger as well. So what we’re going to do is to look at why the image is the size it is. It’s this size because of the eStore-fancy3-thumb image of 125 pixels. Copy this, paste it, get rid of the a there and we’re going to give it a height and width. Height, colon, 150px, width, colon, 150px. Now we need to change our padding a bit. Change this to probably about 34 and this comes down to 22. That works.

We have completely changed the appearance. We’ve put a nice background image behind this, we’ve thinned out the border around the images, we’ve made the images a little bit larger and the consequence of all that is it’s given all this a little bit more space.

Update the CSS File

Now all we have to do is make it official. Copy all of these things that we just did, open up our CSS file there. Then take this little piece of text and put it right here. I’m going to put it up at the top. Save it. Let’s upload it; go back and check it and there’s our new look – the grid view of WP eStore product listings.

Test the Changes in Various Browsers

Let’s take a look at it one last time in Chrome. If we refresh that in Chrome we can see the grid view in Bananas and if we take a look at in Internet Explorer, we’re going to see the grid view of product listings worked fine in Internet Explorer as well.

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