WP e-Commerce Sub-Category Display

Posted by on July 9, 2012 in WordPress Development | 3 comments

WP e-Commerce Sub-Category Display

Displaying sub-categories at the top of a product list page in WP e-Commerce is one of those things which seems totally common sense, but for which WP e-Commerce apparently has no real solution. I ended up creating a routine at the top of the theme’s WP e-Commerce template file to accomplish this.

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 /wpsc-grid_view.php file. You will need to open and modify the file which pertains to the layout type you’re using. Here, then, is the top of my file:

  1. < ?php
  2. global $wp_query;
  3. ?>
  4. <div id="grid_view_products_page_container">
  5. < ?php echo do_shortcode('[raw]'); ?> // I'll explain this in another post. This is DEFINITELY the best way I've found to do this!!
  6. < ?php wpsc_output_breadcrumbs(); ?>
  7.    
  8.     < ?php do_action('wpsc_top_of_products_page'); // Plugin hook for adding things to the top of the products page, like the live search ?>
  9.     <div class="product_grid_display group">
  10.     < ?php if(wpsc_display_categories()): ?>
  11.       < ?php if(get_option('wpsc_category_grid_view') == 1) :?>
  12.             <div class="wpsc_categories wpsc_category_grid group">
  13.                 < ?php $category_id = wpsc_category_id();
  14.                 $getsubs = "SELECT term_id FROM wp_term_taxonomy WHERE taxonomy = 'wpsc_product_category' AND parent = '".$category_id."'";
  15.             $subcats = mysql_query($getsubs); //this gets the ids of the subcategories
  16.             $num_subcats = mysql_num_rows($subcats); //this is a count of how many subcategories the current category has
  17.                
  18.             while ($row = mysql_fetch_row($subcats)) {
  19.                 foreach ($row as $subcat)
  20.                 $catname = wpsc_category_name($subcat); // Gets the category name for use below
  21.                 $catimage = wpsc_category_image($subcat); // Gets the URL of the category image
  22.                 $catlink = get_term_link((int)$subcat, 'wpsc_product_category'); // Gets the link URL to the category page
  23.                    
  24.                 if ($category_id >= 0 || $category_id != '') { ?>
  25.                     <a href="<?php echo $catlink; ?>" class="wpsc_category_grid_item" title="< ?php echo $catname; ?>">
  26.                         < ?php
  27.                         // Here I did something a little different. I wanted to be able to display the category
  28.                         // title whether there is a category image or not. I made the category image the background
  29.                         // of a div and superimposed the title over it. No category image means the url for the
  30.                         // background property is empty. It's janky, but it won't break anything.
  31.                         ?>
  32.                                     <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">
  33.                                             < ?php if ($category_id != 0 || $category_id != '') { ?>
  34.                                         <h4 style="z-index:200;color:#C00"><span>< ?php echo $catname; ?></span></h4>
  35.                                             < ?php } ?>
  36.                                         </div>
  37.                     </a>
  38.                             < ?php
  39.                 }
  40.             } ?>
  41.                     </div>
  42.         </div><!--close wpsc_categories BC-->
  43. </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.

4 comments
Hookahs
Hookahs

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…

RickyHewitt
RickyHewitt

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!

sayhitotom
sayhitotom

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

jonahs
jonahs moderator

 @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.