editing woocommerce template files for custom layout

2 Views

I am trying to add some customization to a WordPress theme using the woocommerce plugin. I am trying to stylize the shop page to have a list of categories across the top of the products or along the left hand side. When you enable the category option from the catalog page in the woocommerce admin settings it utilizes the content_product_cat2.php template file to display product category thumbnails within the woocommerce product loop. I have moved that php file and have begun editing it and getting results. I have removed the thumbnails but I cannot get the titles out of the grid format or outside the loop. Im open to adding some hooks to my functions.php but I didnt see any hooks in the woocommerce hook reference that looked like they would do. Maybe a combination of editing this template and using a hook to place it before the loop. Im not sure thats why im posting. Here is a link to the page. that im using it on and here are the contents of the php file: 

<?php
/**
 * The template for displaying product category thumbnails within loops.
 *
 * Override this template by copying it to yourtheme/woocommerce/content-product_cat.php
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     1.6.4
 */




global $woocommerce_loop;

// Custom Edits

if ( is_shop() && in_array( $category->slug, array( 'fakeie' ) ) ) {
return;
}


// Store loop count we're currently on
if ( empty( $woocommerce_loop['loop'] ) )
$woocommerce_loop['loop'] = 0;

// Store column count for displaying the grid
if ( empty( $woocommerce_loop['columns'] ) )
$woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 4 );

// Increase loop count
$woocommerce_loop['loop']++;
?>
<li class="product <?php
if ( $woocommerce_loop['loop'] % $woocommerce_loop['columns'] == 0 )
    echo 'last';
elseif ( ( $woocommerce_loop['loop'] - 1 ) % $woocommerce_loop['columns'] == 0 )
    echo 'first';
?>">

<?php do_action( 'woocommerce_before_subcategory', $category ); ?>

<a href="<?php echo get_term_link( $category->slug, 'product_cat' ); ?>">

    

    <h3 style="float:left;">
        <?php echo $category->name; ?>
        <?php if ( $category->count > 0 ) : ?>
            <mark class="count">(<?php echo $category->count; ?>)</mark>
        <?php endif; ?>
    </h3>

    <?php
        /**
         * woocommerce_after_subcategory_title hook
         */
        do_action( 'woocommerce_after_subcategory_title', $category );
    ?>

</a>

<?php do_action( 'woocommerce_after_subcategory', $category ); ?>

</li>

Thanks Guys…I know someone will have experience with this.

Read More

EDIT- Ok so what I realized is that editing the content_product_cat.php file is probably not the best way to go about it. Jay mentions below that it is better to edit the content_product.php file. While I initially thought this also to be a good solution what I realized is that it wont accomplish what im looking to do. Editing the content_product.php will only make edits within the loop and I need my categories to display before the loop so that they dont fall inot the grid format of the loop…..any new idea’s???

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. One alternative is that you can disable the default woocommerce category view and don’t use the template. Instead you can write custom code and get the category list and style it the way you want and add it to the woocommerce product grid. Below is how you do it.

    <?php $all_categories = get_categories( 'taxonomy=product_cat&hide_empty=0&hierarchical=1' );
                    foreach ($all_categories as $cat) {
                        if($cat->category_parent == 23) {                           
                                                        $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') .'"><img src="'.$image.'" alt="'. $cat->name .'"/><div>'. $cat->name .'</div></a>';
                        }
                    }
?>

  2. You could add to your functions.php:

    add_action('woocommerce_before_shop_loop','showcats');


function showcats()
{
    //list terms in a given taxonomy using wp_list_categories (also useful as a widget if using a PHP Code plugin)

$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        = '';

$args = array(
  'taxonomy'     => $taxonomy,
  'orderby'      => $orderby,
  'show_count'   => $show_count,
  'pad_counts'   => $pad_counts,
  'hierarchical' => $hierarchical,
  'title_li'     => $title
);

?>
<ul>
<?php wp_list_categories( $args ); ?>
</ul>
<?
}

function showcatlist()
{
    if(is_shop()) showcats();
}

    The function showcats is adopt from: http://wordpress.org/support/topic/plugin-woocommerce-excelling-ecommerce-category-list. Read more on: http://codex.wordpress.org/Template_Tags/wp_list_categories. To change the style of the list you will read:

    You can remove the outermost item and list by setting the title_li
    parameter to an empty string. You’ll need to wrap the output in an
    ordered list (ol) or unordered list yourself (see the examples above).
    If you don’t want list output at all, set the style parameter to none.

    Instead of the wp_list_categories you could also use get_categories http://codex.wordpress.org/Function_Reference/get_categories and write the html output your self. This will be the same as done by Jay Bhatt who provide the right answer in the first place.