Category Images

Hi

How can a give a certain product category an image. When I create one, there is no place to assign one. I want my categories and subcategories to display in a more graphic way (grid way), rather than just with text.

Thanks

    DavidM

    Hello Ecoshop,

    We're currently working on implementing a grid type of display for the products themselves but I'm not so sure about the categories. And I'm not so sure regarding category icons as well. Those are great ideas for a feature suggestion, though!

    https://premium.wpmudev.org/forums/forum/feature-suggestions

    I'd love to see what others around here have used for solutions in these types of cases, as most people using Wordpress eventually come across the need for grid-based category displays.

    Cheers,
    David

    Markol

    Hi,

    This is possible in a number of steps. Requires some programming ability.

    1) Install the Wordpress plugin "Category Icons Lite"

    2) update this plugin. File: caticonslite.php line 173.
    Add the code taxonomy' => 'product_category', to the array.

    Full array: array = wp_dropdown_categories(array('taxonomy' => 'product_category', 'hide_empty' => 0, 'name' => 'categoryiconliteid', 'echo' => 0, 'orderby' => 'name', 'selected' => $category_id, 'hierarchical' => true, 'show_option_none' => __('None')));

    This allows you to assign an image to a product category using the Media menu in Wordpress admin

    3) Use the following code to display all of your top level categories with their images and descriptions

    $args=array(
      'taxonomy' => 'product_category',
      'title_li' => '',
      'hide_empty' => 'false',
      'child_of' => '',
      'hierarchical' => false
      );
    
    $categories=get_categories($args);
    
      foreach($categories as $category) {
      if ($category->parent > 0) { continue; }  //hide sub categories
    
    //This code uses the images selected in the Media menu (using Category Icons Lite plugin)
    $query = "SELECT wp_posts.guid from wp_posts, wp_postmeta WHERE wp_posts.ID = wp_postmeta.post_id AND wp_postmeta.meta_key = '_wp_attachment_category' AND wp_postmeta.meta_value = " . $category->cat_ID;
    
    	global $wpdb;
    	//$wpdb->show_errors();
    	$myrows = $wpdb->get_results($query);
    	if($myrows){
    	    foreach ($myrows as $image){
    		echo "<img src='" . $image->guid . "' alt='". $category->name ."' />";
    	    }
    	//$wpdb->print_error();
    	}else{
    		//default images
    	  echo '<img src="path/to/images/placeholder.gif" alt="" />';
    	}
    
    <h2>' . $category->name .'</h2>
    <p>'.$category->description . '</p>
    <div class="link"><a href="' . get_bloginfo('url') . '/store/products/category/' . $category->slug . '">link</a>
    ThePath

    Acht crivvens! Yer codes a wee bit scunnered ya ken!

    @Dana I managed to get this working and here is how:

    1) Install the Wordpress plugin "Category Icons Lite"

    2) Update this plugin. File: caticonslite.php line 173.

    Add the code:
    taxonomy' => 'product_category', to the array.

    It should now look like this:
    $array = wp_dropdown_categories(array('taxonomy' => 'product_category', 'hide_empty' => 0, 'name' => 'categoryiconliteid', 'echo' => 0, 'orderby' => 'name', 'selected' => $category_id, 'hierarchical' => true, 'show_option_none' => __('None')));

    3) Now what I did was to create a custom store front template you do this buy creating a file call mp_store.php in YOUR theme directory. For more info see: Themeing_MarketPress.txt in plugins/marketpress/marketpress-includes/themes

    In your mp_store.php add this code (probably within your #content div):

    <style>
    				.mp-catbox{ float:left; display:block; text-align:center; width:150px; height:auto; margin:10px; padding:0;}
    				.mp-catbox-title{ float:left; display:block; width:150px; height:auto; margin:5px 0 0; padding:0;}
    				.mp-catbox-desc{ float:left; display:block; width:150px; height:auto; margin: 5px 0 0; padding:0;}
    				</style>
    
    				<?php $args=array(
                          'taxonomy' => 'product_category',
                          'title_li' => '',
                          'hide_empty' => 'false',
                          'child_of' => '',
                          'hierarchical' => false
                          );
    
                        $categories=get_categories($args);
    
                        foreach($categories as $category) {
                            if ($category->parent > 0) { continue; }  //hide sub categories
    
                            //This code uses the images selected in the Media menu (using Category Icons Lite plugin)
                            $query = "SELECT wp_posts.guid from wp_posts, wp_postmeta WHERE wp_posts.ID = wp_postmeta.post_id AND wp_postmeta.meta_key = '_wp_attachment_category' AND wp_postmeta.meta_value = " . $category->cat_ID;
    
                            global $wpdb;
                            //$wpdb->show_errors();
                            $myrows = $wpdb->get_results($query);
                            if($myrows){
                                foreach ($myrows as $image){
                                    echo '<div class="mp-catbox"><a href="' . get_bloginfo('url') . '/shop/products/category/' . $category->slug . '"><img height="150" width="150" src="'. $image->guid . '" alt="'. $category->name .'" /></a>';
                                }
                            //$wpdb->print_error();
                            }else{
                                //default images
                              echo '<div class="mp-catbox"><a href="' . get_bloginfo('url') . '/shop/products/category/' . $category->slug . '"><img height="150" width="150" src="' . get_bloginfo('template_directory') . '/images/placeholder.jpg" alt="" /></a>';
                            }
    
                        ?>
    						<?php echo '<h2 class="mp-catbox-title"><a href="' . get_bloginfo('url') . '/shop/products/category/' . $category->slug . '">' . $category->name .'</a></h2>' ?>
                            <?php echo '<p class="mp-catbox-desc">'.$category->description . '</p></div>' ?>
    					<?php } ?>

    Ive even added some CSS so it goes grid-like.

    PLEASE NOTE: I have used get_bloginfo('url') . '/shop/products/category/' as my stores url as I changed this in the MP settings you will probably want: get_bloginfo('url') . '/store/products/category/'
    Could we use mp_store_link(false, true) here I wonder to failsafe it.......

    However Im wondering if an expert here can explain the src="'. $image->guid . '" is there a better way of getting the image, perhaps a custom thumbnail?

    Hope this helps you Dana and others. I think this functionality should be added to the MP core. Only I would like to add a category image on the "add category" page within the products menu.