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 3 – How to Customize the Simple 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 are going to edit the simple view of WP eStore product listings. We did this for the category listings in an earlier lesson but now we’re going to do it for the product listings.

Eliminate the Borders

We already did it for one element of the product listings when we were in the last lesson because we were looking at different ways to use the custom classes. We also want to get rid of this border. Let’s go ahead and inspect the element to see what controls it. If we go down here to div class-‘eStore-product’ you can see that it is the eStore-product that controls that.

If we open up our custom.css and look down here at our category display styles, it’s actually the same place we got rid of the border in the previous example. Now come down here, copy this and paste that. Instead of category-display put in simple-product-display and then get rid of the width, the float left and the margin left. Now we have each of those elements sitting there without a border around them.

Adjust CSS Style

This seems like it’s a little close so I’m going to add a bit of space. I’m going to say margin-bottom, colon, 20 pixels, and that gives us a little bit more room to maneuver and to identify the differences here. You could also if you wished add a bottom border to help emphasis that. Say border-bottom colon, solid, color efefef and semi-colon. Now what you would have is a nice separation without actually having a box around it.

Update and Test the Site in Various Browsers

Next we want to copy this again. To make sure I’ve got it all right I usually just copy the whole section. Then we come back over to our CSS file and we take that section and replace it with our new information. Go ahead and hit Save Document, upload the document, test it in Firefox, test it in Internet Explorer and test it in Chrome.. It looks great. That concludes our customize the simple view of product listings lesson.

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