WP e-Commerce Sub-Category Display
WP e-Commerce and Mysitemyway Themes: In Hell I Will Have to Integrate Them
I’ve been kicking these issues around for a couple of months. Mysitemyway themes are domineering things, quite insistent upon having the things they display be formatted a certain way. WP e-Commerce’s default templates output a hash of strangely formatted code and are fairly tedious to re-design. The combination of the two can be almost torturous to work with.
The Sub-Category Display Issue
So, let’s say you’ve got an online store which sells clothing. You’ve got main product categories (Men, Women, and Kids), and sub-categories for each of them (Shirts, Pants, Shoes, Accessories). When your customers come to your site, you’d like for them to be able to click ‘Men’ and come to a page which presents all of the subcategories for men’s clothing. Seems like pretty standard stuff, right?
No, I’m sorry, you’re totally wrong. In fact, you’re so wrong that you’re going to have to modify your default WP e-Commerce theme template files in order to accomplish this. Many thanks to chrismarie from the getshopped.org user forums for the snippet I modified to achieve the results I was looking for:
The Code:
I had WP e-Commerce copy its template files into the active theme directory. Since I’m using an upgraded version of WP e-Commerce, I needed to modify the
- < ?php
- global $wp_query;
- ?>
- <div id="grid_view_products_page_container">
- < ?php echo do_shortcode('[raw]'); ?> // I'll explain this in another post. This is DEFINITELY the best way I've found to do this!!
- < ?php wpsc_output_breadcrumbs(); ?>
- < ?php do_action('wpsc_top_of_products_page'); // Plugin hook for adding things to the top of the products page, like the live search ?>
- <div class="product_grid_display group">
- < ?php if(wpsc_display_categories()): ?>
- < ?php if(get_option('wpsc_category_grid_view') == 1) :?>
- <div class="wpsc_categories wpsc_category_grid group">
- < ?php $category_id = wpsc_category_id();
- $getsubs = "SELECT term_id FROM wp_term_taxonomy WHERE taxonomy = 'wpsc_product_category' AND parent = '".$category_id."'";
- $subcats = mysql_query($getsubs); //this gets the ids of the subcategories
- $num_subcats = mysql_num_rows($subcats); //this is a count of how many subcategories the current category has
- while ($row = mysql_fetch_row($subcats)) {
- foreach ($row as $subcat)
- $catname = wpsc_category_name($subcat); // Gets the category name for use below
- $catimage = wpsc_category_image($subcat); // Gets the URL of the category image
- $catlink = get_term_link((int)$subcat, 'wpsc_product_category'); // Gets the link URL to the category page
- if ($category_id >= 0 || $category_id != '') { ?>
- <a href="<?php echo $catlink; ?>" class="wpsc_category_grid_item" title="< ?php echo $catname; ?>">
- < ?php
- // Here I did something a little different. I wanted to be able to display the category
- // title whether there is a category image or not. I made the category image the background
- // of a div and superimposed the title over it. No category image means the url for the
- // background property is empty. It's janky, but it won't break anything.
- ?>
- <div class="cat_image" style="background:url('<?php echo $catimage; ?>') top center no-repeat; background-size: < ?php echo get_option('category_image_width'); ?>px < ?php echo get_option('category_image_height'); ?>px;width:< ?php echo get_option('category_image_width'); ?>px;height:< ?php echo get_option('category_image_height'); ?>px">
- < ?php if ($category_id != 0 || $category_id != '') { ?>
- <h4 style="z-index:200;color:#C00"><span>< ?php echo $catname; ?></span></h4>
- < ?php } ?>
- </div>
- </a>
- < ?php
- }
- } ?>
- </div>
- </div><!--close wpsc_categories BC-->
- </div>
< ?php
global $wp_query;
?>
<div id="grid_view_products_page_container">
< ?php echo do_shortcode('[raw]'); ?> // I'll explain this in another post. This is DEFINITELY the best way I've found to do this!!
< ?php wpsc_output_breadcrumbs(); ?>
< ?php do_action('wpsc_top_of_products_page'); // Plugin hook for adding things to the top of the products page, like the live search ?>
<div class="product_grid_display group">
< ?php if(wpsc_display_categories()): ?>
< ?php if(get_option('wpsc_category_grid_view') == 1) :?>
<div class="wpsc_categories wpsc_category_grid group">
< ?php $category_id = wpsc_category_id();
$getsubs = "SELECT term_id FROM wp_term_taxonomy WHERE taxonomy = 'wpsc_product_category' AND parent = '".$category_id."'";
$subcats = mysql_query($getsubs); //this gets the ids of the subcategories
$num_subcats = mysql_num_rows($subcats); //this is a count of how many subcategories the current category has
while ($row = mysql_fetch_row($subcats)) {
foreach ($row as $subcat)
$catname = wpsc_category_name($subcat); // Gets the category name for use below
$catimage = wpsc_category_image($subcat); // Gets the URL of the category image
$catlink = get_term_link((int)$subcat, 'wpsc_product_category'); // Gets the link URL to the category page
if ($category_id >= 0 || $category_id != '') { ?>
<a href="<?php echo $catlink; ?>" class="wpsc_category_grid_item" title="< ?php echo $catname; ?>">
< ?php
// Here I did something a little different. I wanted to be able to display the category
// title whether there is a category image or not. I made the category image the background
// of a div and superimposed the title over it. No category image means the url for the
// background property is empty. It's janky, but it won't break anything.
?>
<div class="cat_image" style="background:url('<?php echo $catimage; ?>') top center no-repeat; background-size: < ?php echo get_option('category_image_width'); ?>px < ?php echo get_option('category_image_height'); ?>px;width:< ?php echo get_option('category_image_width'); ?>px;height:< ?php echo get_option('category_image_height'); ?>px">
< ?php if ($category_id != 0 || $category_id != '') { ?>
<h4 style="z-index:200;color:#C00"><span>< ?php echo $catname; ?></span></h4>
< ?php } ?>
</div>
</a>
< ?php
}
} ?>
</div>
</div><!--close wpsc_categories BC-->
</div>This would replace the top of your template file all the way up to that closing comment.





This is really good. Among stare upon this gesture article content and we are surprised. We are curious about this kind of rules. Us appreciate human time, and assess doing while in this. Please keep updating. They are in fact valuable concepts research…
Great Post! Exactly what I needed. I slightly modified your code, I found that for my implementation I only needed the code between:
<?php $category_id = wpsc_category_id();
And
} ?>
Thank you for the help!
I found this very useful. Once I'm in the sub-category, how could I display them still and highlight the one you're in? I'd greatly appreciate the help
@sayhitotom This question totally slipped by me. Sorry about that!If you're still looking at this issue, and for anyone else trying to accomplish something similar, here's what I'd recommend:1.) Modify the query at line 14 to select from the ID of your base category, whatever that is. This will make sure that a complete list of your subcategories is always available.2.) Next, evaluate $subcat for equality with $category_id in line 32, and if they're equal insert an additional CSS class that has your highlighting styles specified in a style sheet.I'm being brief here. If this isn't clear to someone, let me know and I'll try to elaborate.