# How to Display WooCommerce Products on a Page: A Beginner’s Guide
So you’ve set up your awesome WooCommerce store, but now you need to actually *show* your products! This guide will walk you through several ways to display your WooCommerce products on any page of your WordPress website, from simple to more advanced techniques. We’ll focus on methods that are easy for beginners, even if you’re not a coding whiz.
Why Display Products Outside the Shop Page?
Showing products only on your shop page limits your reach. Imagine a clothing store – you wouldn’t just put all your shirts in one room! You’d create displays for new arrivals, featured items, sale products, and maybe even theme-based collections (like “summer dresses” or “hiking gear”). The same principle applies online. Strategic product placement boosts sales and improves user experience.
Method 1: Using WooCommerce Shortcodes (Easiest Way)
Shortcodes are little snippets of code that perform specific actions in WordPress. WooCommerce provides several helpful shortcodes to display products. This is the easiest method for beginners.
- `[products]`: This displays *all* your products. It’s simple, but might show too many products at once on a page.
- `[featured_products]`: Shows only your featured products. You can feature products individually in the WooCommerce product editor. This is great for highlighting bestsellers or new arrivals.
- `[best_selling_products]`: Displays your top-selling products. This leverages social proof and encourages sales.
- `[sale_products]`: Showcases your products on sale. Perfect for creating a dedicated “Sale” page.
- `[product_category category=”your-category-slug”]`: Displays products from a specific category. Replace `”your-category-slug”` with the actual slug of your category (e.g., `[product_category category=”summer-dresses”]`).
- Go to Appearance > Widgets.
- Find the WooCommerce widgets (e.g., “Featured Products,” “Products,” “Sale Products”).
- Drag and drop the desired widget into the sidebar or widget area where you want to display the products.
- Configure the widget settings (e.g., number of products to display, order).
Example: To display your featured products, simply add `[featured_products]` to your page content using the WordPress editor.
Method 2: Using WooCommerce Widgets (Visual Approach)
Widgets offer a more visual approach. You can drag and drop them into your WordPress sidebars or other widget areas.
This is ideal for showcasing products in sidebars or footers, complementing your main page content.
Method 3: Using a WooCommerce Product Gallery (Advanced, But Flexible)
For more control, you can use a product gallery. This requires some HTML and potentially some CSS for styling. This option is best for intermediate users and up.
This method involves creating a custom page template or using a page builder plugin (like Elementor or Beaver Builder). These plugins often have pre-built modules for displaying WooCommerce products in various layouts.
Method 4: Customizing with PHP (For Developers)
If you’re comfortable with PHP, you can create custom loops to display products. This offers the greatest level of control, allowing you to filter and display products based on complex criteria. Caution: Incorrectly modifying theme files can break your website. Always back up your files before making any changes.
'product',
'posts_per_page' => 4, // Number of products to display
'category' => 'summer-dresses', // Optional category filter
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) {
while ( $loop->have_posts() ) {
$loop->the_post();
woocommerce_template_single_title();
echo '';
echo the_post_thumbnail('thumbnail'); // Display featured image
echo '';
}
}
wp_reset_postdata();
?>
This code snippet displays four products from the “summer-dresses” category. Remember to replace placeholder values with your actual ones.
Conclusion
Displaying your WooCommerce products effectively is crucial for driving sales. This guide provides several options, catering to different skill levels. Choose the method that best suits your comfort level and desired level of customization. Remember to always back up your website before making any significant changes!
