Skip to content

Category wise products display in WP E-Commerce products page

WP E-Commerce displays all the products from all the categories in the default products page which uses the template file: wpsc-products_page.php for displaying. There are situations when we have product categories, under each category we have different products. Now we have to display all the products grouped by product-categories. Like:

 
Product-Category#1
 – Product #1
 – Product #2
 – Product #3
 Product-Category#2
 – Product #4
 – Product #5
 Product-Category#3
 – Product #6
 – Product #7
 – Product #8

Solution:

We can achieve this using short-codes provided by wp e-commerce, but then we have to write the shortcode that many number of times as we have number of categories.

[wpsc_products category_id='4']
[wpsc_products category_url_name='test-category']
[wpsc_products category_url_name='test-category' number_per_page='16' sort_order='price' order='desc']

Find a complete list of wp e-commerce category shortcodes with additional arguments
There are some other problems like: we have to create another product page,write the short codes there and keep the default products page intact, else chances are there that the single product page, category page etc. may break or show page not found error.

So another option is to change the default products-page template file( wpsc-products_page.php ) to display products group by categories. This can be done by running multiple loops in the the products page template file. I have used this once and works fine for me. Use this if it suits your requirement. 🙂

Steps:

— Open the wpsc-products_page.php file.
— Find the products loop statement in the code.

	
	

— Find the products loop end statement.

	
	

— Copy the whole block in between while and endwhile for the product loop.
— Then enclose those copied code inside the below mentioned condition.
— Save and check the products page.
 

Example Code:

term_id;
		$wpec_term_name = $wpec_categories->name;
		$wpec_term_slug = $wpec_categories->slug;
		
		/* --------- JUST PRODUCT CATEGORY WHICH IS DEFAULT IN WPSC ---------- */
		if($wpec_term_slug == 'categories' || $wpec_term_slug == 'product-category') {
			continue;
		}
		
		/* --------- SET THE PRODUCT QUERY ARGUMENTS ARRAY --------- */
		$wpec_args = array(
			'post_status' => 'publish',
			'post_type'   => 'wpsc-product',
			'numberposts' => 12,
			'showposts' => 12,
			'wpsc_product_category' => $wpec_term_slug
		);

		$wpec_categoryProducts = new WP_Query($wpec_args);
?>	
		

have_posts()) : $wpec_categoryProducts->the_post(); global $wpsc_custom_meta, $wpsc_variations; $wpsc_custom_meta = new wpsc_custom_meta( get_the_ID() ); $wpsc_variations = new wpsc_variations( get_the_ID() ); /* ======================================================================= */ /* ADDED/MODIFIED CODE -- CHANGED THE PRODUCT LOOP ABOVE TO OUR CUSTOM ONE */ /* ======================================================================= */
/* ---------- ------------- Continue code - product display ------------- ---------- */
/* ---------- ------------- Continue code - product display(same as previous) ------------- ---------- */

 

Download the modified wpsc-products_page.php !!

 

40 thoughts on “Category wise products display in WP E-Commerce products page”

  1. Hi!
    I want to sort my products by the product category in my website. I use wp-ecommerce and goldcart plugin.
    I have figured out to open the php file, but I saw that between the mentioned rows there is already some code.
    Should I delete it? Or what code should I keep?
    I’m new in using php code and I need more details. Eventualy I can provide to you my php files, wpsc-products_page.php with the default view, and the gridview.php if you can help me.
    Thank you very much for your work,
    Best regards,
    Mihai Antonache

  2. Thank you for your reply Subharanjan!
    I thought that I shall let that code undeleted. But the code provided by you shall be copyed and pasted in my php file and that’s it?
    Or shall I intercalate it with the original code?

  3. Hei Subharanjan,

    I was looking for this so many time and before trying it looks like I need. I don’t understand why e-commerce doesn’t give more facilities for do this (a nice guideline). I tried to do it with old WP-Query but then you have troubles using the wpsc_product function in the loop! Thanks for sharing!

    Greets from Berlin!

      1. yes! That worked. I’m not sure where things were falling apart for me. Sloppy cutting/pasting, most likely. I really appreciate your help – and this fantastic solution to what I’m sure is a common need. Thank you so much!

  4. Hello Subharajan,

    I use the wp e-commerce and gold cart plugins on my page.
    I tried your solution, but it does’n work.
    If I understand correctly, I download your modified wpsc_products.php file. Delete the original wpsc_products.php file, than I add your wpsc_products.php file.
    I did it, but it isn’t working for me.
    Any idea?
    Please help me!!!

  5. Hi and thanks for your example!

    Is there an easy way to control the order in which the categories are rendered on the page? They seem to render in alphabetical order by default…

    1. Hi Pirkka, Yes we can control the order of the display of categories on the page by passing some extra parameters on the product query arguments.
      Refer to this post here( http://subharanjan.com/list-of-parameters-that-can-be-pass-through-wp_query-constructor-to-create-a-new-query-object-in-wordpress/ ) and see the section for “order” and “orderby” parametrs that can be used in the “PRODUCT QUERY ARGUMENTS ARRAY” in the example code given here for fetching the products. You have to play a little with code though !! 🙂

  6. Hi and thanks for the tip! I quickly tried modifying the product query arguments array in your example but only managed to change the order of products within a category, NOT the order of categories. Any further tips? 🙂

    1. Yes, my bad… You can modify the code where we get all the Product Categories…

      Before Modification:

      /* --------- GET ALL THE PRODUCT CATEGORIES ---------- */
          $wpec_product_categories = get_terms( 'wpsc_product_category', 'hide_empty=0&parent=0');

      After Modification:

      /* --------- GET ALL THE PRODUCT CATEGORIES ---------- */
          $wpec_product_categories = get_terms( 'wpsc_product_category', array('hide_empty'=>0,
                                                                           'parent'=>0,
                                                                           'orderby'=>'name',
                                                                           'order'=>'DESC'));

      Various arguments for the “orderby” parameter are: id, count, name – Default , slug, term_group, none
      http://codex.wordpress.org/Function_Reference/get_terms

      Hope this helps….

  7. Thanks a lot for this post, you saved my life !!

    My customer asked me to offer two different displays for a category page: all products on one single page, or on several pages using pagination.
    I changed a bit your code to fit my needs and it seems to be working quite well !
    You can find it here: http://foundationantiques.com/ (still work in progress but thanks to you I will be able to work on the rest of the website 🙂

    Thanks again

  8. Hi again!

    I was wondering if it is possible to somehow fix the order of the product categories? E.g. if I have categories “Books”, “Cars”, “Doors” and “Elephants” how can I sort them in this order:
    – Doors
    – Books
    – Elephants
    – Cars

    or any other order I’d like?

    From the database I can see that the categories have “term_id” but I don’t want manipulate those values to create the order I want. That would probably just break something…

  9. Hi

    I try to do that, i copied already, but it wasnt work for me. After i tryed the file, which i download, but it was the same.

    Is it works by the newest ecommerce as well?

    1. I haven’t tried this on the latest e-commerce though, but it should work. Will check and get back…
      Before that, can you check if you have the same file inside your current theme directory as well as inside the e-commerce plugin theme folder ?

  10. Hi and thanks for your example!

    I have used wp-ecommerce plugin in my site and is working fine. I have used your code to display categorywise products on the product page. Also I have set the product page as my website’s homepage. Now when I click on the category name from homepage I get page not found error.

    Any idea??

    Please help!

  11. I am looking to customize the display a little. I would like to have a grid view of the categories only when clicking on the “Products Page” then when a category is clicked I want it to display only items from that category, with out the grid view of categories. Can this be done?

  12. Hi Subharanjan, thanks for the fantastic code. I’m trying to split my products by category on to two separate tabs within my products page. I have the basic idea working but just can’t work out how to specify the category – at present the same category is repeated on both. Any idea what I’m doing wrong?

    Many thanks!

  13. Hey! I was able to resolve the issue. Thanks!

    I had another query.I want to integrate Amazon checkout for payments in wp-ecommerce.

    Anyone having idea about this?

    Thanks in advance.

  14. Hi, Subharanjan

    This is Omkar

    I have downloaded the modified wpsc-products_page.php that you have given above and replaced it with the existing file, but nothing happened. I am not a developer. can you help for the same?. I have to show on product page

    Categories
    1st level sub category
    2nd level sub category


    n th level sub category
    Product details

    here goes a link of my site
    http://www.advancedphotonicsindia.com/?page_id=69

    something like this
    http://www.newport.com/

    if you click on optics it opens to sub categories in optics and so on….

  15. How i can modify code on next structure:

    Product-Category#1
    – Subcategory
    – Product #1
    – Product #2
    – Product #3
    Product-Category#2
    – Subcategory
    – Product #4
    – Product #5
    Product-Category#3
    – Subcategory
    – Product #6
    – Product #7
    – Product #8
    When we go in Product-Category – we can look thumbs category, after click on Product category – we look Subcategory thumbs, and then after click on Subcategory we will see Products

    How can modify code?

    Thanks

Leave a Reply