How To Show Woocommerce Products On Homepage

How to Show WooCommerce Products on Your Homepage: A Beginner’s Guide

Want to give your online store a boost? One of the easiest and most effective ways to do that is to showcase your products directly on your homepage. Think of it like this: Imagine walking into a brick-and-mortar store – the most attractive and popular items are usually displayed right at the entrance to grab your attention! Showing WooCommerce products on your homepage achieves the same thing for your online shop.

This guide will walk you through various methods, from simple to slightly more advanced, to display your products on your WordPress website’s homepage using WooCommerce. No coding experience needed for the easiest methods!

Why Show Products on Your Homepage?

Before we dive into the *how*, let’s cover the *why*. Displaying products on your homepage offers several benefits:

• Improved User Experience: Customers immediately see what you have to offer, reducing the number of clicks needed to find something interesting.
• Increased Sales: Highlighting bestsellers, new arrivals, or sale items can entice visitors to purchase immediately. It’s like saying, “Hey, look at these amazing things!”
• Enhanced Brand Story: Curated product displays can tell a story about your brand and its offerings. For example, if you sell organic skincare, showcasing a specific routine can emphasize that aspect.
• Better SEO: Having product information on your homepage can improve your site’s SEO, especially if you optimize the text around those products with relevant keywords.

Method 1: Using WooCommerce Shortcodes (The Easiest!)

WooCommerce comes with built-in *shortcodes* – little snippets of code enclosed in square brackets – that you can insert into your pages or posts to display products. This is by far the simplest method.

1. Identify Your Homepage: Go to WordPress Dashboard > Pages. Find your homepage and click “Edit.”

2. Insert a Block: Click the “+” icon in the WordPress editor (Gutenberg editor) to add a new block.

3. Choose “Shortcode” Block: Search for “Shortcode” in the block search and select it.

4. Insert the Shortcode: Now, paste in one of the following WooCommerce shortcodes, depending on what you want to display:

• Display all products:
• Display products by category (replace ‘your-category-slug’ with the actual slug):
• Display specific products by ID (replace ‘123, 456, 789’ with the actual product IDs, separated by commas):
• Display recent products:

*(The ‘per_page’ attribute controls how many products are displayed, and ‘columns’ controls how many products are displayed in each row.)*

5. Update and View: Click “Update” to save your changes and then “View Page” to see the products displayed on your homepage.

Example: Let’s say you sell handmade soaps and want to display your “Lavender” scented soap category. You would replace `”your-category-slug”` with `”lavender-soap”` (assuming that’s the category’s slug) like this:

Tip: You can find the category slug by going to Products > Categories, hovering over the category, and looking at the URL that appears at the bottom of your browser window. The slug is usually the last part of the URL. You can also see this by editing the category and the slug will be displayed.

Method 2: Using a WooCommerce Product Block (For Gutenberg Users)

If you’re using the Gutenberg block editor (the default WordPress editor), you can use WooCommerce’s dedicated product blocks.

1. Edit Your Homepage: Go to Pages and edit your homepage.

2. Add a Block: Click the “+” icon to add a new block.

3. Browse WooCommerce Blocks: Scroll down to the WooCommerce section or search for terms like “product,” “featured products,” or “best selling products.” You’ll see several pre-built blocks.

4. Choose Your Block: Select the block that best suits your needs. For instance, “Featured Product” allows you to highlight a specific product. “All Products” will display all products. “Products by Category” let you choose a category.

5. Configure the Block: Each block has its own settings. For example, with “Products by Category,” you’ll select the category you want to display. With featured product you will select the actual product.

6. Update and View: Save your changes and view your homepage.

Example: You have a new line of summer dresses. You would select the “Products by Category” block and choose the “Summer Dresses” category. You can also choose the number of columns and order the dresses in the order you wish. This allows your website to display your products on the homepage with a visual presentation.

Method 3: Using a Page Builder Plugin (Elementor, Beaver Builder, etc.)

If you’re using a page builder like Elementor, Beaver Builder, or Divi, you’ll have even more control over how your products are displayed. These plugins offer visual interfaces with drag-and-drop functionality.

1. Edit Your Homepage with the Page Builder: Open your homepage using the page builder plugin’s editor.

2. Find the WooCommerce Element/Module/Widget: Each page builder has its own terminology. Look for elements related to WooCommerce products (e.g., “Products Grid,” “Product Slider,” “Product Categories”).

3. Drag and Drop: Drag the product element onto your page where you want it to appear.

4. Customize: The page builder will provide options to customize the display:

• Number of columns: How many products per row?
• Order: Sort by price, popularity, date, etc.
• Category: Display products from a specific category.
• Style: Customize the appearance (fonts, colors, etc.).

5. Save and Preview: Save your changes and preview your homepage.

Example: You’re using Elementor. You would drag and drop the “Products” widget onto your homepage. Then, in the Elementor settings panel, you can choose to display your “Sale” products in a grid layout, highlighted with a red “Sale” badge. You can further refine by showcasing products with over 4-star reviews.

Method 4: Custom Theme Modification (Advanced – Requires Coding Knowledge)

If you’re comfortable with PHP and WordPress theme development, you can directly modify your theme’s `homepage.php` or `index.php` file to display products. Be very careful with this method, as mistakes can break your website. Always back up your site first!

1. Access Your Theme Files: Connect to your website via FTP or use the File Manager in your hosting control panel.

2. Locate the Homepage Template: The homepage template is usually named `homepage.php` or `index.php` in your theme’s directory. If you’re using a child theme (recommended!), modify the template in the child theme’s directory.

3. Add WooCommerce Code: Add the following PHP code snippet where you want the products to appear:

 4, // Number of products to display
'orderby' => 'date', // Order by date
'order' => 'DESC', // Show newest first
);

$products = wc_get_products( $args );

if ( $products ) {

echo ‘

‘; // Start the products list

foreach ( $products as $product ) {

echo ‘

• ‘;

  echo ‘get_permalink() . ‘”>’;

  echo ‘get_image_id() ) . ‘” alt=”‘ . $product->get_name() . ‘”>’;

  echo ‘

  ‘ . $product->get_name() . ‘

  ‘;

  echo ‘‘ . $product->get_price_html() . ‘‘;

  echo ‘‘;

  echo ‘

‘;

}

echo ‘

‘; // End the products list

} else {

echo ‘

No products found.

‘;

}

?>

4. Customize the Code: Adjust the code to suit your needs. You can change the number of products (`limit`), ordering (`orderby`), and add filters for specific categories. Remember to adjust classnames like products and price to style correctly.

5. Save and Upload: Save the changes to your template file and upload it to your server.

6. Check Your Homepage: View your homepage to see the products displayed.

Warning: Modifying theme files directly can be risky. If you’re unsure, consider using one of the easier methods above or hiring a WordPress developer.

This is a starting point only. You will want to implement the shop style on the elements to make the store look more visually appealing and fit with the website branding.

Conclusion:

Displaying your WooCommerce products on your homepage is a fantastic way to attract customers and boost sales. Choose the method that best suits your technical skill level and the level of customization you desire. Whether you’re using shortcodes, WooCommerce blocks, a page builder, or custom code, getting your products in front of visitors as soon as they arrive is a winning strategy! Remember to always test your changes and back up your site before making any modifications. Good luck!