categories - Custom Woocommerce Category view

I'm kind of new to WordPress development and I'm trying to make a plugin so I can show all the categories I have in a list.

The Idea is to customise the default view

Instead of the default list I would like something like this.

I hope you understand and can help me.

I'm kind of new to WordPress development and I'm trying to make a plugin so I can show all the categories I have in a list.

The Idea is to customise the default view

Instead of the default list I would like something like this.

I hope you understand and can help me.

• categories
• css
• woocommerce-offtopic

Share Improve this question edited Jun 12, 2017 at 11:49 Johansson 15.4k1111 gold badges4444 silver badges8080 bronze badges asked Jun 21, 2016 at 19:25 ivancoeneivancoene 1311 silver badge66 bronze badges 5

• Looks like you don't really need to change the category search. Clever use of css could already do what you are trying to achieve. – cjbj Commented Jun 21, 2016 at 19:50
• @cjbj Thank you for your comment. I could do that with css indeed, but I also want to show the category description... – ivancoene Commented Jun 22, 2016 at 8:51
• Right. Wat is the current code that generates the default view? You'll probably have to insert category_description in a smart way into that. – cjbj Commented Jun 22, 2016 at 9:25
• @cjbj For the moment I just use the default woocommerce shortcode '[product_categories number="12" parent="0"]' – ivancoene Commented Jun 22, 2016 at 9:53
• I'm afraid if you want to modify a woocommerce shortcode, you'll have to take your question to their forum... – cjbj Commented Jun 22, 2016 at 10:11

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

If you create your own shortcode based on the product category shortcode

function duck_product_categories( $atts ) {
        global $woocommerce_loop;

        $atts = shortcode_atts( array(
            'number'     => null,
            'orderby'    => 'name',
            'order'      => 'ASC',
            'columns'    => '4',
            'hide_empty' => 1,
            'parent'     => '',
            'ids'        => ''
        ), $atts );

        if ( isset( $atts['ids'] ) ) {
            $ids = explode( ',', $atts['ids'] );
            $ids = array_map( 'trim', $ids );
        } else {
            $ids = array();
        }

        $hide_empty = ( $atts['hide_empty'] == true || $atts['hide_empty'] == 1 ) ? 1 : 0;

        // get terms and workaround WP bug with parents/pad counts
        $args = array(
            'orderby'    => $atts['orderby'],
            'order'      => $atts['order'],
            'hide_empty' => $hide_empty,
            'include'    => $ids,
            'pad_counts' => true,
            'child_of'   => $atts['parent']
        );

        $product_categories = get_terms( 'product_cat', $args );

        if ( '' !== $atts['parent'] ) {
            $product_categories = wp_list_filter( $product_categories, array( 'parent' => $atts['parent'] ) );
        }

        if ( $hide_empty ) {
            foreach ( $product_categories as $key => $category ) {
                if ( $category->count == 0 ) {
                    unset( $product_categories[ $key ] );
                }
            }
        }

        if ( $atts['number'] ) {
            $product_categories = array_slice( $product_categories, 0, $atts['number'] );
        }

        $columns = absint( $atts['columns'] );
        $woocommerce_loop['columns'] = $columns;

        ob_start();

        if ( $product_categories ) {
            ?>
            <div class="woocommerce columns-<?php echo $columns;?>">
                <ul class="products alternating-list">
            <?php
            foreach ( $product_categories as $category ) {
                ?>
                <li class="product-category product first">
                    <a href="<?php echo get_category_link($category); ?>">
                        <?php
                             $thumbnail_id = get_woocommerce_term_meta( $category->term_id, 'thumbnail_id', true );
                                $image = wp_get_attachment_url( $thumbnail_id );
                                if ( $image ) {
                                    echo '<img src="' . $image . '" alt="" />';
                                }
                            ?>
                     </a>
                </li>
                <li class="product-category product last"> 
                    <?php echo $category->name; 
                        echo '<div class="shop_cat_desc">'.$category->description.'</div>';
                    ?>
                </li>          
                <?php
            }

            woocommerce_product_loop_end();
        }

        woocommerce_reset_loop();

        return '<div class="woocommerce columns-' . $columns . '">' . ob_get_clean() . '</div>';
    }
add_shortcode('dd_product_categories', 'duck_product_categories');

Then add this CSS:

.alternating-list li:nth-child(4n+3) {
    float: right !important;
}

When you call the shortcode

[dd_product_categories number="12" parent="0" columns="2"]

put columns="2" or you can just hard code it into there if that's what you're going with.

This includes a category description under the title on the side of the image. Like this https://snag.gy/YVIBCl.jpg

<?php
                        $args = array( 'post_type' => 'services_type', 'posts_per_page' => 4, 'services_cat' => 'regenerative-sports-spine-and-spa', 'orderby' => 'date', 'order' =>'ASC');
                        $loop = new WP_Query( $args );
                        while ( $loop->have_posts() ) : $loop->the_post() ;global $product;  
                        $sliderurl = get_the_post_thumbnail_url( get_the_ID(), 'full' );
                    ?>

                    <div class="box">
                        <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
                        <div class="img"><img src="<?php echo $sliderurl;?>"></div>
                        <p><?php the_excerpt(); ?></p>
                        <h5><a href="<?php the_permalink(); ?>">Schedule Appointment Now</a></h5>
                    </div>

                 <?php endwhile; ?>
                <?php wp_reset_query(); ?>