Redesign Your Product Pages For WP-E-Commerce.

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.