Displaying Featured Products in WooCommerce

WooCommerce has products called Featured Products which are products what become featured when they are starred in the WP Admin dashboard.

woocommerce-featured-products

Here is how you can display them.

 

Featured Products Shortcode

Display WooCommerce Featured Products via shortcode like so:

[featured_products per_page="9" columns="3"]

Other parameters you can use in the shortcode are ‘orderby‘ and ‘order‘.

Featured Products Custom Loop

Display WooCommerce Featured Products via a custom loop like so:

<?php
$args = array(
'posts_per_page' => -1,
'post_type' => 'product',
'post_status' => 'publish',
'tax_query' => array(
array(
'taxonomy' => 'product_visibility',
'field' => 'name',
'terms' => 'featured',
'operator' => 'IN',
),
)
);
$featured_product = new WP_Query( $args );
if ( $featured_product->have_posts() ) :
echo '<div class="woocommerce columns-3"><ul class="products">';
while ( $featured_product->have_posts() ) : $featured_product->the_post();
$post_thumbnail_id = get_post_thumbnail_id();
$product_thumbnail = wp_get_attachment_image_src($post_thumbnail_id, $size = 'shop-feature');
$product_thumbnail_alt = get_post_meta( $post_thumbnail_id, '_wp_attachment_image_alt', true );
?>
<li class="product">
<a href="<?php the_permalink();?>">
<img src="<?php echo $product_thumbnail[0];?>" alt="<?php echo $product_thumbnail_alt;?>">
<h3 class="woocommerce-loop-product__title"><?php the_title();?></h3>
<button class="yellow-but">VIEW PRODUCT</button>
</a>
</li>
<?php
endwhile;
echo '</ul></div>';
endif;
wp_reset_query();
?>
<!-- Featured products loop -->
view raw custom-loop.php hosted with ❤ by GitHub

Above I am creating a loop with an infinite amount of featured products by setting the value ‘-1’ to the ‘post_per_page’ key, in the loop markup output  I am using some regular WooCommerce css classes to the display of the data and my own data structure of the parts of the product I want to display.

Featured Products Shortcode Custom Loop

Display WooCommerce Featured Products via a shortcode custom loop like so:

<?php
add_shortcode( 'woo_featured', 'wb_woo_featured' );
/*
*
* Featured Product Loop
*/
function wb_woo_featured() {
$args = array(
'post_type' => 'product',
'posts_per_page' => 3,
'post_status' => 'publish',
'tax_query' => array(
array(
'taxonomy' => 'product_visibility',
'field' => 'name',
'terms' => 'featured',
'operator' => 'IN'
),
),
);
$featured_product = new WP_Query( $args );
if ( $featured_product->have_posts() ) :
ob_start();
echo '<div class="woocommerce columns-3"><ul class="products">';
while ( $featured_product->have_posts() ) : $featured_product->the_post();
$product = wc_get_product( $featured_product->post->ID );
$post_thumbnail_id = get_post_thumbnail_id();
$product_thumbnail = wp_get_attachment_image_src($post_thumbnail_id, $size = 'shop-feature');
$product_thumbnail_alt = get_post_meta( $post_thumbnail_id, '_wp_attachment_image_alt', true );
// Featured Post Loop Output
// wc_get_template_part( 'content', 'product' );
?>
<li class="product">
<a href="<?php the_permalink();?>">
<img src="<?php echo $product_thumbnail[0];?>" alt="<?php echo $product_thumbnail_alt;?>">
<h3 class="woocommerce-loop-product__title"><?php the_title();?></h3>
<button class="yellow-but">VIEW PRODUCT</button>
</a>
</li>
<?php
endwhile;
echo '</ul></div>';
endif;
wp_reset_query();
return ob_get_clean();
}

Above is pretty much the same as the previous loop – this time shortcode is created which needs to be added to an area to display it [[woo_featured]] and  only 3 products will show.

Also commented out is …

//  wc_get_template_part( 'content', 'product' );

You could use this instead of the custom output to render the default WooCommerce output.

2 Comments

  1. khalid on March 3, 2019 at 10:02 am

    hello there,
    thank you for your work, the code work prefect however, i am trying to get only 2 columns next to each other. i tried changing columns-3 to columns-2 but the products not next to each other.
    so could you please help me with this.

    Thanks in advance.

  2. T on June 12, 2018 at 2:16 am

    I didn’t find this helpful. I need to know how to make a link to all featured products – that is all. I get that the link should have a “?” followed by a parameter that specifies featured. This is all I want. Not this. Can you help?

Leave a Comment