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.
Share Improve this question edited Jun 12, 2017 at 11:49 Johansson 15.4k11 gold badges44 silver badges80 bronze badges asked Jun 21, 2016 at 19:25 ivancoeneivancoene 131 silver badge6 bronze badges 5 |2 Answers
Reset to default 0If 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(); ?>
csscould already do what you are trying to achieve. – cjbj Commented Jun 21, 2016 at 19:50category_descriptionin a smart way into that. – cjbj Commented Jun 22, 2016 at 9:25