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.
Thanks for the info. Seems like a very versatile e-commerce product.
do you have any idea if this will work with the simplecart theme? am looking at files and trying to make sense of it but my css is not all that great 🙂
Hi Ginny, I had a minute to check out simple cart, from the example image it looked like the products were already displayed in a grid. So I am not sure what you need to do or if it is necessary
to edit that theme at all.
CSS stuff: basically any div in any theme can be a fixed width and height and float to the left
.products {
width:200px;
height:300px;
float:left;
}
thank you for sharing this tutorial.
greetings from a wordpress noob,
Hi Soedjono!
Thanks for your comment.
We all start out as noobs.
But we do not have to stay noobs.
hey thanks for the tut!
it helps me a lot!
i wish u all the best for your kindness!
wow – some good stuff here! Lots of us are wanting to tweak the products page ! i want to simply add some contant (text) to the very TOP of this page but… i tried just entering it after the … to no avail .
HALP — i may cry if you don’t halp me 😉
You can use the category description to show intro text. Its a lot easier than trying to directly hack the theme files. For example if you have one main category and all your products have been put in this category and it is the product group category you picked in your presentation settings (which is where you get rid of the annoying P&P tag) to show on the main shop page, then write a description for it and whammo there it will be.
But if it isn’t you have to turn it on. Go to Products>settings>>presentation and find the Product Group Settings and choose Show Product Group Description
Get rid of P&P:
In your presentation settings look for this, hint its at the top of the page:
Product Settings
Show Product Ratings: [Yes / No]
Display Fancy Purchase Notifications: [Yes/ No]
Show Postage and Packaging: [Yes / No]
This was a tiny bit misleading: the category description will not show on the shop home page–the description only shows up on a product category page… haven’t had the time to find a work around to this.
ps — getting rid of that annoying “P&P” tag ?? any idea?
When I turn off Show Postage and Packaging, the shipping fee disappears on the product page (good), but it also does not display on the Checkout page (bad).
Any suggestions?
You could edit the actual theme file instead…but that is a lot more involved. Yikes, well I haven’t seen the result you got on my own sites so I can’t replicate the issue and then tell you how to fix it. But if you send me a wp admin&ftp login I can just shut down P&P in the theme file and check your presentation settings,too. BYW, which version are you running? They’re up to 3.7.5.3 for the shop plugin now.
Hi
Been trying to get a grid view working using the info here, to fit into the Picture Perfect theme which I’m using, however, all the products are appearing in one column. I’ve checked to make sure I’ve renamed everything as you’ve said to do and I’m sure I have done so but it’s still not working, any thoughts?
We chatted in email about this. I believe we fixed this issue, awesome.
hi, it’s cool
but now i wonder how to open the sub-categories from categories above. it just link product directly,,
thanks
Hey Irma I don’t quite get what you mean,sorry.
my savior! thanks a bunch for this useful tutorial. What i’m looking for now is how to tweak the product page. I have manage to alter the thumbnails but the positioning is not quite right.. any idea where to find the css for the product_page?
guess its inside the theme css file but unfortunately i failed to locate the wpsc_print_category_image in the css..
All the css is in the .css file for the theme you are using. The bset thing to do is use a text editor that has a search function so you can look up exact words which will help you track down the thing you think is causing the issue.
Hi there,
I was wondering whether you could help me with a simple css issue I can’t seem to resolve.
I want the product title, description, etc to appear under the product image while using the ishop theme with wpec.
I have tried heaps of combinations within the css without any luck. After reading your above post, it made a little more sense, but still not enough.
My thumbnails on the product page is set at 300×150 and the image on my single page is set at 500×250. I have done this as I will try and sell some of my photos from my travels.
Would you be able to give me some help with the css to get the pages looking right?
Thanks,
Jeff.
Sure, send me a login and I’ll check around.
Hi,
I’ve got this all working fine on all browsers apart from IE7 where it seems to be doing the one long column thing – its fine in IE8 but when I click on compatibility view it goes wrong. Any ideas?
Thanks!
I would have to to check and see if there is a clear:both after each product box div which is probably making the boxes go vertical instead of floating 3 to a row, which might also be what is causing the compatibility view in IE* to make the rows go vertical,too.
Send me a link to your site so I can check the source.
hi,this is cool man..i’ve been searching for this quite a while..but does all this will enable multiple product upload and view as well?
No in order to have multiple product upload…photos… you must purchase the gold cart.
thanks bro.. very helpfull… 🙂
weee..thanks alot mccormicky! i found it already..u r truly superb 🙂
Hi there,
I gave this a shot on a fresh install of version 3.7.6.1, and I keep getting the following error after uploading products_page.php:
“Parse error: syntax error, unexpected T_ENDIF in /home/shellyst/public_html/st/wp-content/plugins/wp-e-commerce/themes/default/products_page.php on line 291”
I’ve scoured my code to see if I mistyped anything. No typographical errors. Also, when I go to replace the file with my backup of the original, I still get the same error. I have made no other modifications to any of these files. Any thoughts?
That error means one of the loops in the theme file was either moved to a wrong location,doubled up which can cancel it out or deleted accidentally. However there is no reason that I can think of that deleting the messed up file and re uploading the backup file should not restore your shopping cart to full working condition. And sorrowfully without a FTP login to the server I can’t even begin to offer suggestions as to why this is happening. But have you tried de activating the plugin, deleting it and re uploading a fresh copy? That will surely take care of this issue.
Thank you, that was great and I know have the e-commerce product page in 2 row/3col
I would like to take it further though, you replied to someone about simplecart in october 09 :
“I had a minute to check out simple cart, from the example image it looked like the products were already displayed in a grid. So I am not sure what you need to do or if it is necessary
to edit that theme at all.”
Actually, this grid layout works only if you ALREADY have purchased goldcart, it is not my intention and I like to discover CSS modifying bit by bit by following your instructions for example.
Where can I modify the default stylesheet to get something more or less similar, i.e, broader, wider, rather than long with 2 row/ 4 col like in the example they give on their site (http://www.chris-wallace.com/2009/07/17/simplecartjs-a-free-wp-e-commerce-thematic-child-theme/), with that background larger as well?
Many thanks!
Kev
Hi Kev
Thank you for your interest but I’d appreciate it if you asked the developers of the Simple Cart theme questions directly related to their theme.
Your question about how to make the background image larger tips me off that you are not quite ready for this particular tutorial.
A background image can be positioned i e background-position:center;
it can be re sized with some sort of photo manipulation software like Photoshop or Gimp (but if you make an image larger than the original you will lose pixel quality)
it can be made to tile or not tile. But without javascript you won’t really be able to enlarge it. Google Superstretcher for that.
Oh sorry, reading your posts I thought you were someone cool.
My bad.
I provided quite a lot of guidance on how to do exactly what you want to do in my tutorial. I also don’t know why asking you to direct your questions about re-designing the Simple Cart theme to the Simple Cart theme developers makes me uncool. I’m sorry I just don’t have enough time right now to spell it out for someone who isn’t prepared for a project like this.
Apart from that uncool reply how much do you take usually, do you work per site or per day or per hour? 🙂
that’s ok 🙂 how do you usually work, could we partner to build a few sites? Do you get paid by the hour?
Kev