I built this site using WordPress and a shopping cart plugin called WP e-Commerce.
WP e-Commerce is a great add on to an already terrific base, but sometimes there isn’t a pre-built solution to get it to do what you want it to do and you need to change some of the code yourself.
Enough people have asked me about how I managed to get the collapsing categories you see on the left sidebar to work, that I thought it would be easier to post my code here for any one that was interested.
If you’re interested, please read on…
If you’re not interested in looking at some badly written code, visit our main site and check out the terrific hand crafted gifts we have for sale. 
Ok .. if you’re reading this, I’ll assume you’re interested in the code, so here it is
But first, a quick disclaimer .. I’m not a professional programmer and manage to do things by what I call “trial and error coding”. As such, there’s probably a better way to do this, but it works.
in file category_widget.php (in your cart theme) … around line 4, find
and replace it with
in file /widgets/category_widget.28.php … around line 25, find
$selected_categorisations = array_keys((array)$instance['categorisation'], true);
and place this before it
$thisisa = "
";
In your wordpress theme header.php … find
and add this before it
In your theme’s css file .. add this.
You’ll need to modify it to fit your theme and preferences.
.menu_list {
width: 185px;
}
.menu_head {
background: url(/images/site/16-square-blue-add.png) center right no-repeat;
padding: 5px 10px;
cursor: crosshair;
position: relative;
border-bottom: dashed 1px #7cdfe7;
}
.menu_body {
display:none;
}
.menu_body a {
display:block;
}
you’ll also need to change the jscript and css to point to the images you want to use for the + and -
Well .. that’s it.
I hope you find it useful.
11 Comments
[News] Collapsing Categories in WP e-Commerce – http://www.eclipse-creations.com/blog/ot...
what php script to put under sidebar.php ??
Hi Joe,
I didn’t change anything in sidebar.php.
I modified the included category widget to add the div and ids
thanks for replying… i did exactly what u did and using the same template as yours but nothing is working. hmph….
because my categories are on this column instead of the sidebar which I found it hard… :S
what’s your email?
hello again.. i just wanna know your script under
“Browse Our Creations” on the left panel.
something like this…
That’s the Product Categories widget that comes with WPEC in the sidebar.
Modifying this file … /widgets/category_widget.28.php … adds the tags to it for the jquery and css code to work on.
If you’re not using he widget, then you’ll have to add the tags to the code you’re using to display the categories.
Hope that helps
hey there again. thanks for your help. I think I find my widget
on the APPEARANCE > Widget at the left panel. hmph…
hahas
am kinda noob on this. anyway.. appreciate your input really
Hey, Great Tutorial, I got this working, but am having a really tough time trying to figure out how to keep the first category expanded when the page loads… When you were putting this together, did you have any necessity for that, or could you help a brother out?
Hi Royce, I’m glad it worked for you.
As far as keeping categories expanded … That would be nice to have, but I’m not really a coder and this was pretty much all I could figure out.
I cant see the category_widget.28.php in my widget folder.
Hi Jansie,
There have been several updates to e-Commerce since I originally modified the files to get the collapsing categories to work .. and I’m actually a few versions behind. That file may have been renamed or moved.
Write a Comment