Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Display Categories & related Subcat of Custom Tax in Grid Format WordPress

  • SOLVED

Hi Experts --

I've got a WP question that's been bugging me all day. Hopefully someone can provide a solution.

<strong>Facts:</strong>
1) Latest Version of WP
2) WooCommerce Plugin Enabled
3) Site developed using 978px Grid

<strong>Background:</strong>
Currently using WooCommerce plugin to power eCommerce portion of WP web project. WooCommerce registers custom taxonomy of: product_cat

Instead of the traditional "shop" page that displays all the products on one page I'm instead looking for a shop page that displays categories and related subcategories in a grid format.

WooCommerce uses the 'archive-product.php' template to display the 'domain.com/shop' page.

<strong>Picture Example:</strong>
Link: [[LINK href="http://cl.ly/061V0v0z2i0l3M142m2E"]]http://cl.ly/061V0v0z2i0l3M142m2E[[/LINK]]

<strong>Code Example:</strong>

<div class="grid4 first">
Category A Title
subcat
subcat
subcat
</div>

<div class="grid4">
Category B Title
subcat
subcat
subcat
</div>

<div class="grid4 last">
Category C Title
subcat
subcat
subcat


Please note that WooCommerce does enable you to associate images with categories. It would be awesome if the solution would also check for the main category image (main cat only) and display if applicable. I can post this as a separate question/solution if needed.

WooCommerce is free to download and similar to Jigoshop since they forked that project.

Thanks for helping. Cheers!


<strong>Update #1 at 12:34pm</strong>
Please see my additional discourse after what Alistair provided below:
Link: [[LINK href="http://wpquestions.com/user/discourseShow/id/7089/discourse_id/481"]]http://wpquestions.com/user/discourseShow/id/7089/discourse_id/481[[/LINK]]

<strong>Update #2 at 8:36am</strong>
It looks like we have final working solutions provided both by Kannan and John below. We also had help from other members early on in the process. Thanks to all for your efforts.

My first time using WP questions and certainly happy with the experience. Hopefully this thread will help others.

Answers (4)

2011-11-29

Pixel Coder answers:

Hi, WooCommerce looks like it uses custom posts here like you say, meaning that it benefits from all the WordPress query can throw at it.

Looking at how WooThemes allow for images to be added to the product_cat taxonomy they create 2 new actions.

product_cat_add_form_fields
product_cat_edit_form_fields

Within those functions largely they mimic each other with the additions for CRUD respectively.

The image is related to the category by sending the post id to a hidden field you are populating once an image is added with the WordPress media uploader to the category using some Woo specific jQuery.

The retrieval method is what concerns us now, we need to grab the correct image and display when in a category.

(Will have to come back to this)

For bringing out categories, you'd be looking to use "get_terms".

This should get you started.


<?php
$pxTerms = get_terms('product_cat', array(
'hide_empty' => 0,
'orderby' => 'name'
));
?>
<div class="container">
<?php foreach($pxTerms as $pxTerm) : ?>
<div class="product">
<a href="<?php echo $pxTerm->slug; ?>"><?php echo $pxTerm->name; ?></a>
</div>
<?php endforeach; ?>
</div>


So to summarise your points...

<blockquote>Currently using WooCommerce plugin to power eCommerce portion of WP web project. WooCommerce registers custom taxonomy of: product_cat</blockquote>
<em>Okie let's use this to grab term specific information when required using code similar to above. (We do need a way to retrieve the main image associated with a category, and ideally a hierarchy is visually represented).</em>
<blockquote>Instead of the traditional "shop" page that displays all the products on one page I'm instead looking for a shop page that displays categories and related subcategories in a grid format.</blockquote>
<em>Using the image you supplied as a guide we would structure our categories like this.
1st level: Has image
2nd level: We use for titles
3rd level: We use title with highlighted link.

All levels are links, level 1 via image, 2nd level by heading and 3rd by list item as their containing mark-up with the exception of img.</em>
<blockquote>WooCommerce uses the 'archive-product.php' template to display the 'domain.com/shop' page.
</blockquote>
<em>We will modify archive-product.php to accomodate above, and use product-cat.php as it exists then continue to perform the current functionality residing in your active theme.

Not sure if i'll get to the rest of this, spent a lot of time familiarising with WooCommerce but that should be a roadmap for any would be developers here.

Nice plugin, thanks!</em>


Ben comments:

Nice Job!

Let me look this through, implement, and provide feedback. Great start and thanks for the quick reply.


Pixel Coder comments:

I'm actually moving house, and really must get on with packing essentials. Hence being unable to commit more to this.

You'll be looked after well here.

Best of luck.


Ben comments:

Alistair,

Good luck with the move. Just got done with mine last week and it was a pain :)

I'll make sure to share the wealth when the final solution is found.

Thank you much and best of luck to you as well.


Pixel Coder comments:

Thanks for the well wishes and glad you got over the house move. This will be the last for a while!

Also, a mass of edits to previous post as nomenclature wasn't accurate.

Looking into how images are stored, if you look within wp_postmeta the category image is stored amongst other serialised data with the meta_key of _wp_attachment_metadata and guess what.... so is the post->id :)

Sorry can't have this fixed for you by now, I know the directions to go but lack the raw ability to bring it back instantly. Would have to Google around for the correct functions etc.

2011-11-30

Kannan C answers:

I used this get_categories to get this work. But category link is not got to work. But i retrieved the category images. Check this code.

updated code to display only parent category images:
I updated the code, so category link will now

<?php
$taxonomy = 'product_cat';
$orderby = 'name';
$show_count = 0; // 1 for yes, 0 for no
$pad_counts = 0; // 1 for yes, 0 for no
$hierarchical = 1; // 1 for yes, 0 for no
$title = '';
$empty = 0;

$args = array(
'taxonomy' => $taxonomy,
'orderby' => $orderby,
'show_count' => $show_count,
'pad_counts' => $pad_counts,
'hierarchical' => $hierarchical,
'title_li' => $title,
'hide_empty' => $empty
);
?>
<ul>
<?php $all_categories = get_categories( $args );
//print_r($all_categories);

foreach ($all_categories as $cat) {
echo '<p><a href="'. get_term_link($cat->slug, 'product_cat') .'">'. $cat->name .'</a> </p>';
//print_r($cat);
if($cat->category_parent == 0) {
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
echo '<img src="'.$image.'" width="60px" height="60px" />';
}
}
?>
</ul>

Let me know if this work for you.


Ben comments:

Hi Kannan --

Nice job on getting the main category image to display! Thanks for the contribution.

You're correct that the category links do not work. If we can get the category links to work then we can move on to separating the category lists.

This task/question is challenging, agree? I'm starting to think that it may not be possible. Hopefully a full solution is found.

Thanks,
Ben


Ben comments:

Sweet! Your update added link support. Nice job Kannan!


Kannan C comments:

i am out of battery as i am working in my Laptop. Will get back to once i reached my home. within 1 or 2hrs...


Kannan C comments:

Ok here is what you need in proper ul list


<?php
$taxonomy = 'product_cat';
$orderby = 'name';
$show_count = 0; // 1 for yes, 0 for no
$pad_counts = 0; // 1 for yes, 0 for no
$hierarchical = 1; // 1 for yes, 0 for no
$title = '';
$empty = 0;

$args = array(
'taxonomy' => $taxonomy,
'orderby' => $orderby,
'show_count' => $show_count,
'pad_counts' => $pad_counts,
'hierarchical' => $hierarchical,
'title_li' => $title,
'hide_empty' => $empty
);
?>
<ul class="products">
<?php $all_categories = get_categories( $args );
//print_r($all_categories);

foreach ($all_categories as $cat) {
//print_r($cat);
if($cat->category_parent == 0) {
$category_id = $cat->term_id;
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
echo '<li><a href="'. get_term_link($cat->slug, 'product_cat') .'">'. $cat->name .'</a>';
echo '<img src="'.$image.'" width="60px" height="60px" />';

$args2 = array(
'taxonomy' => $taxonomy,
'child_of' => 0,
'parent' => $category_id,
'orderby' => $orderby,
'show_count' => $show_count,
'pad_counts' => $pad_counts,
'hierarchical' => $hierarchical,
'title_li' => $title,
'hide_empty' => $empty
);
$sub_cats = get_categories( $args2 );
if($sub_cats) {
echo '<ul>';
foreach($sub_cats as $sub_category) {
echo '<li><a href="'. get_term_link($sub_category->slug, 'product_cat') .'">'. $sub_category->name .'</a></li>';
}
echo '</ul>';
}
echo '</li>';
}
}
?>
</ul>

I tested it, let me know if you have issues.


Kannan C comments:

i forgot to add the class names as you need. Change the '3' to no of columns you have.

<?php
$taxonomy = 'product_cat';
$orderby = 'name';
$show_count = 0; // 1 for yes, 0 for no
$pad_counts = 0; // 1 for yes, 0 for no
$hierarchical = 1; // 1 for yes, 0 for no
$title = '';
$empty = 0;

$args = array(
'taxonomy' => $taxonomy,
'orderby' => $orderby,
'show_count' => $show_count,
'pad_counts' => $pad_counts,
'hierarchical' => $hierarchical,
'title_li' => $title,
'hide_empty' => $empty
);
?>
<ul class="products">
<?php $all_categories = get_categories( $args );
$i = 1;
foreach ($all_categories as $cat) {
$list_name = (($i % 3 != 1) ? (($i % 3 == 0) ? 'grid4 last' : 'grid4') : 'grid4 first');
if($cat->category_parent == 0) {
$category_id = $cat->term_id;
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
echo '<li class="'.$list_name.'"><a href="'. get_term_link($cat->slug, 'product_cat') .'">'. $cat->name .'</a>';
echo '<img src="'.$image.'" width="60px" height="60px" />';

$args2 = array(
'taxonomy' => $taxonomy,
'child_of' => 0,
'parent' => $category_id,
'orderby' => $orderby,
'show_count' => $show_count,
'pad_counts' => $pad_counts,
'hierarchical' => $hierarchical,
'title_li' => $title,
'hide_empty' => $empty
);
$sub_cats = get_categories( $args2 );
if($sub_cats) {
echo '<ul>';
foreach($sub_cats as $sub_category) {
echo '<li><a href="'. get_term_link($sub_category->slug, 'product_cat') .'">'. $sub_category->name .'</a></li>';
}
echo '</ul>';
}
echo '</li>';
$i++;
}
}
?>
</ul>


Ben comments:

Kannan --

Thank you for your efforts. Sorry for the lack of time in between responses. Finally had to catch some sleep. Your last provided code worked. Along with John C's code I think we have a working solution. Appreciate your time.

Cheers!

2011-11-30

John Cotton answers:

You'll need to style the output as you want it, but this will give you a heirarchial list with images for the top level if they exist:


function get_product_terms( $term_id ) {
$html = '';

$args = array( 'hide_empty' => 0, 'parent' => $term_id );

$terms = get_terms('product_cat', $args);
foreach ($terms as $term) {
$html .= '<li>';

if( $term_id == 0 ) {
if( $thumbnail_id = get_woocommerce_term_meta( $term->term_id, 'thumbnail_id', true ) ) {
$html .= wp_get_attachment_image( $thumbnail_id );
}
}

$html .= '<a href="'.get_term_link($term->slug, 'product_cat').'">' . $term->name . '</a>';

if( $list = get_product_terms( $term->term_id )) {
$html .= '<ul>'.$list.'</ul>';
}

$html .= '</li>';
}

return $html;
}

if( $list = get_product_terms( 0 )) {
echo '<ul>'.$list.'</ul>';
}


Ben comments:

John --

Thank you sir! This works perfectly. Kannan's solution also worked but your code is certainly more efficient. Thanks again for your efforts and providing a working solution.

Cheers!


John Cotton comments:

Ben - Mine will also recurse down more than one level which I don't think Kannan's will. That may be a drawback if you don't want nested ULs but it's easily fixed with some adjustment to that recursive call.

2011-11-29

Luis Abarca answers:

Can you provide an exported file of your products and categories, to duplicate your site in my local server


Ben comments:

Luis,

I have a test site on my server that contains some similar data to the production site. However, after the information that Alistair provided below it may not be necessary. You can use dummy data like:

Volvo
- ZX Series
- LX Series
- RN Series

BMW
- RO Series
- BO Series
- BS Series