How To Display Woocommerce Products On Front Page

WooCommerce is a widely-used e-commerce plugin for WordPress, enabling users to sell products on the internet. A frequent inquiry among WooCommerce users pertains to the ways they can showcase their products on their website’s homepage. This article will explore various approaches to accomplish this objective.

Method 1: Using a Shortcode

The easiest way to display your WooCommerce products on the front page is by using a shortcode. To do this, you need to add the following code to your theme’s functions.php file:

add_action( 'woocommerce_before_main_content', 'display_products_shortcode' );
function display_products_shortcode() {
    echo do_shortcode('[product_category category="your-category"]');
}

Replace “your-category” with the name of the product category you want to display. This method will display all products in that category on your front page.

Method 2: Using a Widget

Another way to display WooCommerce products on the front page is by using a widget. To do this, you need to add the following code to your theme’s functions.php file:

add_action( 'widgets_init', 'register_product_category_widget' );
function register_product_category_widget() {
    register_widget( 'ProductCategoryWidget' );
}
class ProductCategoryWidget extends WP_Widget {
    function __construct() {
        $widget_ops = array('classname' => 'product-category', 'description' => 'Display products from a specific category on the front page.');
        parent::__construct( 'product-category', 'Product Category Widget', $widget_ops );
    }
    function form( $instance ) {
        $title = isset($instance['title']) ? esc_attr($instance['title']) : '';
        $category = isset($instance['category']) ? esc_attr($instance['category']) : '';
        ?>
        

            Title:
            
        
        

            Category:
            
                Select a category
                slug) . '" ' . selected(esc_attr($category), esc_attr($cat->slug), false) . '>' . esc_html($cat->name) . '';
                } ?>
            
        
        

Once you have added the above code to your theme’s functions.php file, you can add a new widget to your front page and select “Product Category Widget” from the available options. You can then choose a category and give it a title.

Method 3: Using a Plugin

If you don’t want to mess with code, you can use a plugin to display WooCommerce products on the front page. One popular plugin for this purpose is “Frontend Products” by WPBeginner. This plugin allows you to display your products in a grid or list format and customize the appearance of the products.

Conclusion

Displaying WooCommerce products on the front page is an effective way to increase sales and engage with your customers. By using one of the methods discussed in this article, you can easily display your products on the front page of your website.