Display WooCommerce Featured Products Without a Shortcode

There are many ways to display Woocommerce Featured Products, such as use a shortcode, a wordpress plugin. But in this tutorial, i want you know how to display Woocommerce Featured Products without a shortcode or a wordpress plugin.

In fact, WooCommerce comes with a number of useful shortcodes to allow quick insertion of WooCommerce related content within posts and pages. One of these shortcodes can be used to display featured products like so:

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

The above would output the featured products in a grid.

This is great, however, what if we want go one step further and have more control over the products shown, or if we’re already using the shortcode elsewhere on our site?

Specifying Featured Products in WordPress

First, let’s take a look at how we set featured products. When logged into WordPress simply navigate to the ‘Products’ section and you’ll notice that there is a column containing stars.

Woocommerce Featured Products Off

Woocommerce Featured Products Off

If a star in this column is black it means it is featured. To add or remove a product to the list of featured products you simply click the star.

Woocommerce Featured Products On

Woocommerce Featured Products On

Obtaining The Featured Products

We can obtain the products in question much like we can obtain posts normally by using the WP_Query class like so:

$args = array(
    'post_type' => 'product',
    'meta_key' => '_featured',
    'meta_value' => 'yes',
    'posts_per_page' => 1
);

$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 );
        
        // Output product information here
        
    endwhile;
    
endif;

wp_reset_query(); // Remember to reset

The first thing that is happening above is to set the arguments for the query we want to run. You’ll notice we are only getting posts where the post_type is ‘product’, and where the meta_value, ‘_featured’, is set to ‘yes’. We’ve also specified that we only want to get one featured product so simply increase this number if you want to obtain more.

The next part is pretty standard in terms of looping through posts. The only other important line is:

$product = get_product( $featured_query->post->ID );

By doing this we can then access all the product related information, for example SKU, that isn’t available in a normal post object.

Here is demo to display WooCommerce Featured Products i’ve used for 1 site of mine:

<?php
     $args = array( 'post_type' => 'product', 'meta_key' => '_featured','posts_per_page' => 15,'columns' => '3', 'meta_value' => 'yes' );
     $loop = new WP_Query( $args );
     while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
                        <li class="product">    
                            <a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
                                <h3><?php the_title(); ?></h3><br /><span class="price"><?php echo $product->get_price_html(); ?></span><br />
                                <?php woocommerce_show_product_sale_flash( $post, $product ); ?>
                                <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="300px" height="300px" />'; ?></a>
                                <span class="motangan"><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?></span><br />
                        </li>
                <?php
            /**
             * woocommerce_pagination hook
             *
             * @hooked woocommerce_pagination - 10
             * @hooked woocommerce_catalog_ordering - 20
             */
            do_action( 'woocommerce_pagination' );
        ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>

Hope this post is useful for you. Good luck !

4
Leave a Reply

avatar
4 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
TheoRamesh KumarHassan MehmoodRazvan Recent comment authors
  Subscribe  
Notify of
Razvan
Guest
Razvan

Hello, great tutorial. Does the pagination works? I’m trying to create a shortcode for sale products that has pagination. And it has proven to be more of a challange. Can you guide me? Thanks

Hassan Mehmood
Guest

Thank you so much mate. It works perfect for me. 🙂

Thanks

Ramesh Kumar
Guest
Ramesh Kumar

It’s work superb !!!

Theo
Guest

Hi
Thank you for the code. I tried it and it works good. I can even add a custom image size, which rises the quality of the image displayed and improves speed. There is only one thing i could not achieve and that is adding the add to cart button. I tried the shortcode . But i don’t know how to write a variable into id=”XY”. If you have any idea how to add the button, your help is much appreciated.
regards
theo