If you purchased Gold Cart and Grid Module WP e-commerce and activated it, you will find out that sometimes the Grid View doesn’t work the way it should. Not all rows of your products line up correctly and makes it look like messed up. This is really an ugly scene for your well designed flashy store. You might notice that there are wide white empty space on some rows with only one product and the other rows shows the correct number of products of  three or four or depending on how wide your theme is.  See the screenshot below:

wp e-commerce gridview empty space problem

wp e-commerce gridview empty space problem

When i first encountered this i almost got crazy finding out why this happened, no matter what i do it still has that empty space. Then I thought this might be a CSS issue, Good thing i have firebug and a quick inspection shows that the div in question is div.product_grid_display div.product_grid_item It seems that there is something there that pushes the images and making them disaligned. So i tried editing it using firebug real time CSS editing and made the height to about 200px and viola! the products lined up perfectly. So i then made the changes to the grid_view.css  found at“wp-content/plugins/wp-shopping-cart/gold_cart_files/grid_view.css”for WP e-Commerce version 3.6 and for version 3.7 it is located here –>“wp-contents/uploads/wspc/upgrades/gold_cart_files/grid_view.css”.

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:200px;*/
height:auto !important;
height:180px;
}
Now adjust the height according to the length of your product title
or the length of the box. In my case i used height:200px :
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:200px;*/
height:auto !important;
height:200px;
}

If it still has the ugly empty space then delete height:auto !important;

Tell us about how you fixed this issue on

the comments below.

Popularity: 52%