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” (UPDATE: If you’re using WP Ecommerce 3.7+ the file is located in ‘wp-contents/uploads/wspc/upgrades/gold_cart_files/grid_view.css’) and you will see the following style:
1 2 3 4 5 6 7 8 9 10 | 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…
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.
Nice solve
I also enjoy your ebook very much, good work Guru
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!!!
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
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
This worked beautifully. Thanks!
Hey Shane – I figured out this hack but have one that has totally stumped me. All the posts are helpful resource… but,
In internet explorer, the tag .product_grid_item floats up. over top of .cattitles Covers the text for the category name.
Only on IE. http://www.goshencoffee.com/products-page/?catego…
I have removed all other css docs to see if there is conflict but nothing. The other is this is the only thing that floats. Previous tags do not use floats.
It only exists in the grid view.
Any help is greatly appreciated.
Resolved it.
I had a few things…
mainly the changes I made to the grid_view.css that I was uploading was to the wrong folder. Sounds like a stupid mistake but I was uploading to the grid-view folder… but it needed to go loose in the gold-cart folder.
whoops.
Yep…that will do it 🙂
I love you you are a genius!!
PERFECT! THANK YOU!
Hi again Shayne,
Seems like the issue with variations involves not being able to update (I click them, I click update, nothing)…. Unless it is a brand new product.
For some reason, duplicating products doesn't work, but brand new products have variations just fine now…
But it is getting tiresome to make a brand new product every time 🙁
Please let me know if anyone else has had this issue, and if there is a fix!
Thank you! 🙂
Angela,
Yeah, I don't think the duplicate feature is for much else than duplicating the product, name and price…other stuff (like variations) sort of get lost in the mix…
I am totally lost here. I don't have a plugin folder "wp-shopping-cart", I have wp-e-commerce. I have purchased the gold cart and using grid view. So it sounds like this post should work for me.
[blockquote]So, if you have installed WP Ecommerce and also purchased the Gold Cart and are using Grid View, you may have experienced this issue.[/blockquote]
But I can't find the folders or files you mention. I have wp-e-commerce 3.7.1 with gold cart and grid view running on wordpress 2.8.3.
Allen,
With version 3.7.1 things have changed somewhat. You do have a "wp-e-commerce" directory instead of "wp-shopping-cart". The Gold module now has to be placed in a new location to activate.
It should go here:
wp-content/uploads/wpsc/upgrades/gold_cart_files
The grid files are actually built into the core files of the plugin now, so you can locate them in the theme directory for whatever theme you're using (default,iShop,marketplace).
Let's say you're using the default theme. You should find the grid files here:
wp-content/plugins/wp-e-commerce/themes/default/grid_view.php
Hope that helps.
PERFECT! THANK YOU!
Woooow… its the same FIX i did when i encountered this problem here –> http://fixmywpblog.com/fixing-wp-e-commerce-grid-… . So it was an empty more info in there that messes up alignment. Somehow i thought that there was an invisible thing that pushes the products to dis-alignment. I guess i was right about that invisible thing. I used firebug to discover that invisible more info box.
Thanks for clearing this up.
I am having this same issue and the solution here didn’t work. My css file doesn’t have the height and width set at all. I know it has been a long time since the last post on here but I hope that someone has an updated fix.
Thanks guys.