WooCommerce is loaded with some great features and shortcodes which make the software extremely easy for non-technical people. One of the shortcodes that we use quite often, is the featured products shortcode like this:

[featured_products per_page="12" columns="4"]

This shortcode is great, but it doesn’t allow for much flexibility if you want to change the layout or structure.

How to make a product featured in WooCommerce

To specify a featured product, simply go to the products list and click on the star that corresponds to that product. If a star is blue, that means it’s a featured product.

Alternatively you can go into the actual product edit screen, click on the little edit button next to “Catalog visibility” within the “Publish” section in the top right. This will display a checkbox to select whether or not the product is featured.

Coding a custom featured products section

So if the shortcode doesn’t suit your needs and you would like to create your own featured products section, we can use the WP_Query class.

Things have changed a bit in version 3.0. The developers over at WooCommerce have changed the featured products so now it’s not simply a meta_query, but now includes a tax_query.

$meta_query  = WC()->query->get_meta_query();
$tax_query   = WC()->query->get_tax_query();
$tax_query[] = array(
	'taxonomy' => 'product_visibility',
	'field'    => 'name',
	'terms'    => 'featured',
	'operator' => 'IN',
);

$args = array(
	'post_type'           => 'product',
	'post_status'         => 'publish',
	'posts_per_page'      => 10,
	'meta_query'          => $meta_query,
	'tax_query'           => $tax_query,
);

$featured_query = new WP_Query( $args );
	
if ($featured_query->have_posts()) {

	while ($featured_query->have_posts()) : 
	
		$featured_query->the_post();
		
		$product = get_product( $featured_query->post->ID );
		
		// Product info here
		
	endwhile;
	
}

wp_reset_query();

The above shows you the basic query used to get the products into a loop, and where it says “Product info here” is where we are going to put the template code such as title, product image and price.

So here’s the code with some product information included:

<?php
$meta_query  = WC()->query->get_meta_query();
$tax_query   = WC()->query->get_tax_query();
$tax_query[] = array(
	'taxonomy' => 'product_visibility',
	'field'    => 'name',
	'terms'    => 'featured',
	'operator' => 'IN',
);

$args = array(
	'post_type'           => 'product',
	'post_status'         => 'publish',
	'posts_per_page'      => 10,
	'meta_query'          => $meta_query,
	'tax_query'           => $tax_query,
);

$featured_query = new WP_Query( $args );
	
if ($featured_query->have_posts()) {

	while ($featured_query->have_posts()) : 
	
		$featured_query->the_post();
		
		$product = get_product( $featured_query->post->ID );
		$price = $product->get_price_html();
		
?>
<div class="featured-product">
	<a href="<?php the_permalink(); ?>">
		<?php echo woocommerce_get_product_thumbnail(); ?>
	</a>
	<a href="<?php the_permalink(); ?>">
		<h3><?php the_title(); ?></h3>
	</a>
	<?php echo $price; ?>
</div>
<?php
		
		
	endwhile;
	
}
?>

You can change this code to suit your needs and apply some CSS to make it look all neat and tidy. If you have any issues or questions, let us know in the comments section.

Free Graphics, Icons, Tutorials
Free Graphics Free Christmas Vector Icon Graphics Pack 2017Free Fitness Vector Icons Graphics PackFree Camping Vector Graphics PackFree Summer Graphics PackFree File Icon PackFree Fast Food Vector Graphics
Sharing is caring...
Like & Follow
Share the love, share this page! Facebook Twitter Digg Reddit LinkedIn Pinterest Email
Close [X]
The Web Taylor
1000 Lakeside North Harbour Portsmouth, Hampshire PO6 3EN
02392 123358