So, if you have installed WP Ecommerce and also purchased the Gold Cart and are using Grid View, you may have experienced this issue. Not all rows of your products line up correctly. There is usually a large space on one row, where it might only show one item where normally it should show 3 or 4. It might look something like the screenshot below.
So there you see the “space” that cannot be filled, no matter what you try to do.
Well, in reality, the reason for this is a blank “more info” area that’s put in by Grid View. There is no information there, but the “More Info” area still takes up space, and by doing so it pushes the space that the item takes up down. This is what causes the next row not to line up correctly.
Below you will see a screenshot diagraming this. The red box is the “More Info” area and as you can see, the green line brought straight across from it does not line up with the next row of images. That’s why you get the blank space. Where the “More Info” box is located is based on how long your product description is, but in most cases, you will see this error.
So, how do we solve this problem? It’s actually pretty simple, once you see how it’s done. You will navigate on your server to “wp-content/plugins/wp-shopping-cart/gold_cart_files/grid_view.css” and you will see the following style:
div.product_grid_display div.product_grid_item{
margin-bottom: 20px;
width: 120px;
float: left;
position: relative;
margin: 4px 8px 8px 0px;
min-height:180px;
height:auto !important;
height:180px;
}
In that style, you will remove this line: “height: auto !important;”
Once you do that, you should see your page working correctly. One more thing to remember is, the product description will push the “More Info” box down further if the product description is long. If that is the case, and this issue happens again, you can then modify the “height: 180px;” area to a larger number to solve this issue again.
I hope that helps anyone having this issue…and until next time…
August 8th, 2008 at 12:00 am
This hack works like a dream, Shayne. Thanks
For people new to css remember you don’t have to delete just place /* style */ either side to comment out.
August 13th, 2008 at 2:02 am
Nice solve
I also enjoy your ebook very much, good work Guru
August 20th, 2008 at 7:34 pm
Great stuff! Thanks! BUT, how about if I can’t get the products to show up in a row? I’ve played around with the margins in the grid_view.css but can’t get it to work. Any thoughts? Help!!!
August 21st, 2008 at 7:25 am
Wow! Shayne, that was so easy to follow even me, no longer “up to speed on all this CSS, PHP, etc. techno-stuff”, could do it!
Wow again! that looks So Much Better!
Thank you again for all of your help, Shayne, and Have a Great rest of your Wednesday evening!
- Michael
September 3rd, 2008 at 10:26 pm
Shayne,
This works for sure. I am still trying to understand much about the product, but you’ve been a tremendous help to get it working well for my client. Thanks a million! So…about the more info area, where does that text come from? I have “additional” info in the product areas, but that isn’t it. Also I tried eliminating the more info call to tighten the row spacing in the php file, but the result was a single column stacked. Maybe I messed it up?
-Larry
October 28th, 2008 at 1:01 am
This worked beautifully. Thanks!