Update!
If you are experiencing issues in IE7 or 8 – product boxes display in a vertical row instead of side by side it is because div.productdisplay_group is set to [css]height:auto;width:100%;margin:0;padding:0;[/css] Since this is the containing div for the following 2 divs: textcol_group & imagecol_group it is width:100% causing the vertical display.
TRY THIS (Proven Fix):
[css]
/*Group Style*/
/*Feel free to make the boxes shorter or wider or taller.*/
div.productdisplay_group {
float: left;
position: relative;
/*Feel free to make the boxes shorter or wider or taller.*/
width: 205px;
height: 460px;
margin: 0 4px 0 8px;
padding: 10px 4px 0 4px;
}
/*Group Style*/
div.textcol_group {
width:100%;
margin:0;
padding:0;
}
/*Group Style*/
div.imagecol_group {
text-align: center;
display: block;
margin: 5px auto 5px auto;
}
[/css]
I have tested this fix on a user’s site who asked me for help -in IE7 because that is the version I have on my Windows box. If you still see issues after trying this fix on IE8 Please let me know.
Read Original Post:
When the fabulous creators of wp-e-commerce released version 3.7+ they added the template engine to each theme making it possible to style the multiple products page and single products page independently of each other.
This makes it really easy for me and you to write our own styles for the multiple product page while keeping the single product page structure intact.
The Objective: To leave the single products page style intact while restyling the multiple product page.
To follow this tutorial please be using wp-e-commerce version 3.74 or higher. I don’t want to get blamed if you try this on an incompatible version. Thank you.
To follow this tutorial you must have a text editor. I like Crimson Editor (PC) and Textwrangler (MAC) because they show line numbers and have Search capability.
BEFORE YOU START
Please make copies of the files you are going to edit, especially if you have already made changes you quite like. If something goes very wrong you can then delete the problem files and re load the intact ones and we can all walk away from this a little sadder but perhaps a bit wiser.
Files we will be editing:
Your_theme.css (either marketplace.css, iShop.css or default.css)
Products_page.php
Open products_page.php.
Search for productdisplay
Rename to productdisplay_group
Search for textcol
Rename to textcol_group
Search for imagecol
Rename to imagecol_group
Save and re upload with ftp. Or use your filemanager in your cpanel..
Let’s start writing our own styles.
Open either default.css, iShop.css or marketplace.css. Find @ line 209
(assuming you have not edited before and the line #’s are still intact)
Find div.productdisplay {} Copy & Paste & rename to div.productdisplay_group {}
Find div.imagecol{} Copy & Paste & rename to div.imagecol_group{}
Find div.textcol{} Copy & Paste & rename to div.textcol_group{}
Remember the idea is to add more classes not to delete existing ones. We don’t want to wreck the single product page style.
Also we aren’t deleting the style rules in between the brackets,either. I just didn’t feel like copying it all here.
Your style sheet should now have :
div.productdisplay{}
/*Group Style*/
div.productdisplay_group {}
div.textcol{}
/*Group Style*/
div.textcol_group{}
div.imagecol{}
/*Group Style*/
div.imagecol_group{}
A very basic design:
[css]
/*Group Style*/
div.productdisplay_group {
height:auto;width:100%;margin:0;padding:0;
}
/*Feel free to make the boxes shorter or wider or taller.*/
/*Group Style*/
div.textcol_group {
float: left;
position: relative;
/*Feel free to make the boxes shorter or wider or taller.*/
width: 205px;
height: 460px;
margin: 0 4px 0 8px;
padding: 10px 4px 0 4px;
}
/*Group Style*/
div.imagecol_group {
text-align: center;
display: block;
margin: 5px auto 5px auto;
}
[/css]
Save. Re upload with ftp. Or use your filemanager in your cpanel.
Now look at your shop page. (Refresh the page.) A lot of corrective tweaks can be made by making textcol_group wider, shorter, taller or narrower.
TROUBLE SHOOTING!
Halp! My product boxes are in one single vertical line! I wanted at least 3 to a row! You have ruined my life!
Settle down, drama queen. Make sure you have renamed each of the classes I told you to rename or the new style won’t get applied.
Halp! My product descriptions overflow the product boxes! You have ruined my entire life!
The reason for this is we set a fixed height for div.textcol_group. And fixed height is a cruel mistress. If containers don’t have enough room for the content that will go inside them this content will spill over out of the frame. We wanted fixed height because we wanted a consistent look. It’s like that old Public Image Limited chorus: “This is what you want/This is what you get”.
NON HACK WAYS TO DEAL WHEN YOU HAVE LONG PRODUCT DESCRIPTIONS MESSING UP EVERYTHING
- You could set min-height on div.textcol_group instead of height:465px (or whatever). This is good for div.textcol_group boxes without borders or backgrounds since it will be less obvious if some boxes are different heights than others.
- Edit all of your products and put the long description in the Additional Description box and keep only a short 2 line description in the main description box.
If that sounds like a lot of work because you have a lot of products that would have to be edited, read on.
WARNING! DIRTY HACKS FOLLOW!
Open products_page.php
Find this chunk (Hint: Search for the word More).
[php]<?php if(wpsc_the_product_additional_description()) : ?>
<div class=’additional_description_span’>
<a href='<?php echo wpsc_the_product_permalink(); ?>’ class=’additional_description_link’>
<img class=’additional_description_button’ src='<?php echo WPSC_URL; ?>/images/icon_window_expand.gif’ title=’Additional Description’ alt=’Additional Description’ />
<?php echo TXT_WPSC_MOREDETAILS; ?></a>
<span class=’additional_description’><br />[/php]
Replace it with this:
[php]<?php if(wpsc_the_product_additional_description()) : ?>
<div class=’additional_description_span’>
<a href='<?php echo wpsc_the_product_permalink(); ?>’ class=’description_link’>more details</a>
<span class=’additional_description’><br />[/php]
Don’t worry every < div > and < span > gets closed further down so you won’t be breaking the page.
What that does is turn the toggle the more details open/shut doodad into a link that goes to the single product page and that can be styled by adding it to the stylesheet.
.description_link {}
Halp! I did what you said and my descriptions ARE STILL overflowing. I may sue. Why did I listen to you?
Before calling your lawyer please take a minute to come back to your senses. You still have too much description text or your fixed height is too short.It could be either.Both lead to the same result.
If you have had about as much as you can take and think 40.00 dollars for the Gold Cart is starting to sound very cheap about now, you know what you have to do.
Delete the files you edited, replace them with the copies I know you made and buy the gold cart. If 40.00 dollars still sounds very extravagant:
Before you keep going, ask yourself if you really wouldn’t rather just edit all your products to have a shorter description in the main description area and put the rest of the description into the additional description area. If you have a lot of products and you’re unwilling to edit all of them and you know you wanna get really dirty and yank the description out of the multiple product page view altogether , continue.
Open products_page.php again.
Find and remove this:
[html]<div class=’wpsc_description’><?php echo wpsc_the_product_description(); ?></div>[/html]
Now your product boxes will have in this order:
- A product image
- A title
- A more details link
- Variations, if you’ve added any
- A Sale price, if on sale and regular price
- An add to cart button
Each of those features is removable but I would try to leave as much in as possible. Or just buy the Gold Cart then you can turn them off and on at will. (sort of).
Halp! I can only get 2 boxes to a row! You lied to me!
If your WordPress theme is especially narrow you may not be able to fit 3 boxes abreast at the width you set for div.textcol_group.
Halp! I made my boxes narrower and they are still stretched out!
If your product boxes are narrower than your product images are wide you should go to Settings>> Presentation and adjust the default thumbnail size… Quite a lot can be adjusted from the Presentation settings.
Please don’t hesitate to ask me questions if you have followed all of this and have gotten into a tight spot.
Hmm… SO I’d have to go from submit to image for that background thingy right?
thanks!
Kev
I’m not understanding you,Kev. Do you mean this background thingy? http://www.chris-wallace.com/simplecart/wp-content/themes/simplecart/images/background-wood.jpg
Any image included in the theme can be switched out for one of your design. Any image:buttons,logos and background images. I am getting my work done before i go on vacation for 2 weeks on Monday. I would otherwise be happy to further assist you on your quest but I simply do not have the time. Please take my advice and ask your Simple Cart questions over at the Simple Cart website. I will not be approving any more of your comments but I am keeping this post open to other responses for people who have a question related to this tutorial.
I’m having the same issue that dude futurity. The hack works like a charm in all browser except the IE 7 . The product boxes display in a vertical unic row. I search for a div with clear:both after each box but there’s no such div.
I’m considering buy the gold cart files to solve that bug.
That is probably your best bet. One day when I have the time I will attack this display problem! But I am so busy you may as well pay 40 dollars to remove the headache in the meanwhile. I’d also love to say that I stopped support for ie7 and all that jazz but sooo many folks still use it. You gotta design for soo many browsers even the evil ones like ie6 and 7.
huhu.. it wont works once ive upgrade t0 3.7.6.4, ive tried to change according the tutorial but still it wont works. any advise on this mccormicky?
Won’t works huh? I hate that! Seriously,though I’m sorry it isn’t working for you. Send a detailed list of exactly how you changed the template and a link to the site you are working on.
For emergency help, send ftp info and a login to your wordpress dashboard.
Hi Sweetie,
It looks like you are pretty busy but also very attentive to supporting your fans. I appreciate that. I have also followed your instructions and everything worked beautifullyin every browser except IE7 and IE8. I went back and applied your instructions to both the default and marketshop theme just to make sure and it still does not work. I was wondering if you could take a look at my code/files and see what I might be missing. I would be in forever debt to you dear!
If I didn’t miss anything perhaps you could see if there is a way I can make this work? Thank you so kindly for all of your hard work you are genius! You can get back to me at joeycardoza@joeycardoza.com
Thank you soooo much!
Hi Joey,
You get fast help when you send a link and login -things are slow right now so I had a chance to login and check out the problem.
When I wrote this tutorial I do not remember div.productdisplay- which we renamed to div.productdisplay_group- being included the product list Loop but apparently it is now. I had thrown in the style suggestion of width:100% for div.productdisplay_group and this is what was causing the products to display in a vertical line.
So there you are. Your design should be fine now.
wow!! its great!!!
McCormicky well done chap!
I made all the changes in php and css, but nothing happens, nothing is different. Any ideas what can be wrong?
Hi Mihkel, the possible list for what might have gone wrong is extensive.
I could try to offer some guesses or you could speed it up by telling me exactly what you did.
1. Do you have your theme files moved to wp-content/uploads? Option located in Store>>Settings>>Presentation
2. Are you using Safari?
3. If using Safari did you clear your cache?
4. When you view the source of your redesigned products page do you see your new ids and classes showing up in the source?
5. Did you use a proper code editing text editor to edit the files or did you use WordPad?
Ok, found my problem – I was changing files in the wrong directory, turned out that my themes were moved to wp-content/uplouads. Thanks for you help:)
Great Mihkel, thank goodness it was something relatively easy. I hope you enjoy the results!
Excellent tutorial. Worked for me very well 🙂
Massive hugs!!!
GUYV3R
Dear Mccormicky..
just wanted you to know that this line of code breaks the page:
WARNING! DIRTY HACKS FOLLOW!
Open products_page.php
Find this chunk (Hint: Search for the word More).
<a href='’ class=’additional_description_link’>
<img class='additional_description_button' src='/images/icon_window_expand.gif’ title=’Additional Description’ alt=’Additional Description’ />
Replace it with this:
<a href='’ class=’description_link’>more details
Don’t worry every and gets closed further down so you won’t be breaking the page.
Is this only happening on my site? I replaced the code back to its normal state because I am working on the site and like I said it breaks the page so if you want to go into my site and play around your welcome to:
This solution works PERFECT for me other than it breaking the page. I would SO appreciate it if you could help me, your page saved my life you are amazing. thank you thank you thank you.
Joey
I’ll take a look and provide notes when I have time. There is a reason I wrote warning on this part of the tutorial.
Anytime I ask someone to alter html in any way there will always be mistakes made.
If you could upload the file rename it to test.txt or something I can download it from your server and take a look at what is going wrong.
Thank you, this was exactly what I was looking for!
And thanks for making me laugh too 😉
Hi Steven, nice to hear that, thanks!
Thx…!!! its work 4 mee….
Hi
I have try your tutorial in this post, but I found the default.css was not have same conitain with your file.
Would you like to update your tutorial? Thanks
Fauzan
Yes it might be true since I wrote this tutorial based on the iShop theme for wp-e-commerce.
Thanks for the great write up. Took me less than half an hour to get my product page looking how I wanted it to.
That’s what I like to hear! Thanks for letting me know it worked so well for you.
mccormicky, you are fantastic!! I have this GAPING white space to the right of my page with all the products going down vertically so this tute is ideal! I do have an issue though as I cannot seem to find productdisplay in products_page.php (i know thats like the first thing, right?) and I wonder if the plugin has been updated and so the classes have been changed? I would love to hear back from you to see if there’s a way around it.
Thanks!!
Hey Gray, do you have a text editor with Search? If not get a free copy of Crimson Editor,assuming you’re using a PC, and search for productdisplay.
I found the class name for the div in the most recent version of the iShop theme on line 85 of the template file products_page.php
Hey McComrmicky, Love your grid view solution by the way:)
In my laptop (windows7) grid view is perfect – shows 4 products in row, but in another PC (XP), it shows only 2 products per row, but there’s definately room for one (or two) more products. What might be the cause for that?
Thanks in advance,
Mihkel
Hi Mihkel,
the fact that 2 boxes are appearing side by side tells me the tutorial worked for you to a point…if it was completely broken you would have a vertical line of single boxes wandering down your product list pages.
Check your stylesheets (your wp theme and your choice of wpec theme)for other (div)blocks that might not have a bounding width which might be limiting the amount of space allowed for the product boxes
in that area because sometimes not setting a width can make IE act this way. Pay close attention to padding,margin and if any borders on the div for the page and the divs for the product boxes.
If you are using padding and margin and border-widths, IE might be adding extra space to it all which would cause the boxes to line up 2 to a row instead of 3 or 4.
This is all guesswork-if you want me to analyze the problem, send a url.
URL is http://www.muusikapood.ee
Thanks:)
It all works perfectly. Thanks a ton.
Hi,
Thank you for your tutorial on Forcing Grid View with WP E-Commerce.
Both product page and product categories (I am using product catergories widget) page, I can display the grid view. The only problem I have is the product categorgies page’ s image product page’s image.
ie. product page image is thumnail of 150X150
while product categories’s image is actual image that I upload ie 300X300.
Is there any way, that we can force product categories page’s image = product page’s image.
Would you mind give me any tips or hints? I thought of create a new group display_categories but not sure if this can be done.
Your advise and guidance is greatly appreciated
My site http://www.alisonhome.com.au
Many thanks
Duyen
Sorry for the very late reply. My tutorial is not on category images but oh well. I think this is a simple matter of adjusting/playing with settings. Either in your Store>Settings>Presentation in the images section
or in the Categories/Groups editor, where you actually upload the image for your categories, are settings regarding image size. Where you find the category image upload form there is an option to override any default size setting (in Presentation) for category images. I suggest a bit of experimentation with these 2 different places.
Hi, I solved problem.
Correct the categories thumnail size.
Thanks anyway.
Duyen
Very nice tutorial. I search from any where about this tutorial, and finally I found your blog and it’s very helpful for me.
real cool work, thanks a bunch Mccormicky. I am so happy I found this page, now my product page looks as I wished. You are wonderful !!