NB: Make sure you do a back up of your theme, files and database before attempting the tutorials

Intermediate

---- Last modified : Sep 06 2022

Estimated reading time : 1 minute, 16 seconds - 110 words

This tutorial will show you how to display your featured WooCommerce products with a query.

It is a simply query, however however our arguments we need to fetch the WooCommerce product post type. The ‘meta_key’ &=> ‘_featured’ will return featured products. We will also have the WooCommerce pagination hook.

With our first argument, we will create a variable that will store the product ID:
$id = $product->id;. This will allow use to fetch the product ID within the add_to_cart WooCommerce shortcode:

<?php echo do_shortcode('[add_to_cart id="'.$id.'"]'); ?>

You can stylized your products as you see fit via the CSS files.

Display WooCommerce Products

<div class="woocommerce columns-3">
	<ul class="products">
		<?php 
		$id = $product->id; 
		$args = array( 
		'post_type'           => 'product', 
		'meta_key'            => '_featured',
		'posts_per_page'      => 3, 
		'columns'             => '3', 
		'meta_value'          => 'yes' 
		); 

		$loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); 
		global $product; 
		?>
		<li class="product"></li>
		<?php endwhile; ?>
		<?php wp_reset_postdata(); ?>
	</ul>
</div>

You can implement it in any template you want.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>