0

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.

  • 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 Jun 21 '16 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 Jun 22 '16 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 Jun 22 '16 at 9:25
  • @cjbj For the moment I just use the default woocommerce shortcode '[product_categories number="12" parent="0"]' – ivancoene Jun 22 '16 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 Jun 22 '16 at 10:11
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

| improve this answer | |
-1
<?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(); ?>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.