I inherited a wordpress e-commerce website from a developer that only half finished the project. I do not know alot about css or php, but I have been able to play around with the coding enough to almost finish the products page. I am having trouble formatting the products page however, the products listing is too wide and is showing below my sidebar instead of next to it.

Here is a link to my site and the page that shows the error I am talking about


I have played around with the wpsc-default.css file to resolve this simple issue, but the changes I make do not seem to be having any effect with the product list row taking up the whole content area. I tried to change the product display container, from 100% width to 60%, but when I updated the file the website still looked the exact same.

Any ideas on where I might want to look in the code to resolve this issue?

  • This is not WordPress specific, but you may add CSS for .wpsc_category_grid{float:right;} and .wpsc_default_product_list{float:left;}.
    – fischi
    Dec 27, 2012 at 20:43
  • Sorry that this wasn't wordpress specific, but your fix almost worked! Now my products are displaying correctly, being next to my sidebar. But now it seems I am having the same problem with my product categories, being that they are listed below my sidebar and not next to it, like it was before I added your code to my style.css file... Any ideas on how I can get them both displaying correctly?
    – user753964
    Dec 27, 2012 at 21:35
  • Never mind I have it working now, I just defined the width in my style.css for the .wpsc_category_grid and .wpsc_default_product_list. Thanks for the help!
    – user753964
    Dec 27, 2012 at 21:50

1 Answer 1


So there are a few things you'll want to take a look at... And let me clarify the behavior you're seeing too...

First, are you saying that when you actually make code changes to the wpsc-default.css file and save them, when you inspect the code after you refresh the page, your changes are not there? If that's the case, it sounds like you could either have a caching plugin installed or your host might be caching files for you. (The first scenario is more likely). If you have a caching plugin, you'll want to temporarily disable it during development.

If that's not the case, and you can successfully make changes to the code and you can see those changes in the code when you refresh your browser, I'd recommend actually making your changes in style.css which is located under your theme folder. It looks like that file is being loaded after wpsc-default.css, which means you can keep wpsc-default.css pristine (in the event you can upgrade it some day) and your overrides are in your actual theme code.

All of that said, this is probably more of a CSS/HTML question (than a WordPress question). There are any number of ways you can adjust the layout to do what you want. Just as a quick example, you can add these styles to style.css and it should get you on the right track.

.wpsc_categories {
    float: right;
.wpsc_default_product_list {

Of course, that might impact how the WP E-Commerce framework styles things by default and such. I don't know anything about WP E-Commerce.

  • Well overriding .wpsc_category_grid and .wpsc_default_product_list worked! I made them float in the direction you suggested and also override the width for each. Thanks for all your help!
    – user753964
    Dec 27, 2012 at 21:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.