Woocommerce How To Include Products On Pages

WooCommerce: Mastering Product Inclusion on Pages (The Definitive Guide)

Introduction

WooCommerce is a powerful e-commerce platform built on WordPress, offering immense flexibility and control over your online store. One of the most common tasks for WooCommerce store owners is displaying specific products on pages that aren’t the shop page. This allows for targeted promotions, curated collections, and improved user experience. Whether you’re highlighting featured items on your homepage, showcasing related products on a blog post, or creating landing pages for specific campaigns, knowing how to effectively include products on pages is crucial. This article will guide you through various methods, empowering you to seamlessly integrate your products within your WordPress pages.

Methods to Include WooCommerce Products on Pages

There are several ways to embed WooCommerce products onto WordPress pages. We’ll cover the most popular and effective methods, focusing on their advantages and potential drawbacks.

1. Using WooCommerce Shortcodes

WooCommerce provides a range of built-in shortcodes that are incredibly versatile. These shortcodes allow you to display products based on various criteria, such as category, ID, SKU, and more.

• `[products]`: This is the most versatile shortcode. It accepts multiple attributes to control which products are displayed.
• Example: To display the three most recent products:

[products limit="3" columns="3" orderby="date" order="DESC"]

• Attributes:
• `limit`: The number of products to display.
• `columns`: The number of columns to use for the display.
• `orderby`: How to order the products (e.g., date, price, popularity).
• `order`: The order direction (ASC for ascending, DESC for descending).
• `category`: Display products from a specific category (slug).
• `ids`: Display specific products by their IDs (comma-separated).
• `skus`: Display specific products by their SKUs (comma-separated).
• `[product_category]`: Displays products from a specific category.
• Example: To display products from the “clothing” category:

[product_category category="clothing" columns="4"]

• `[product id=”123″]`: Displays a single product by its ID.
• Example: To display the product with ID 123:

[product id="123"]

• `[products skus=”SKU1, SKU2″]`: Display products by their SKUs
• Example: To display products with SKUs SKU1 and SKU2:

[products skus="SKU1,SKU2"]

Advantages:

• Simple and easy to use: No coding knowledge is required.
• Flexible: Offers various attributes for customization.
• Built-in: No need to install additional plugins for basic functionality.

Disadvantages:

• Limited customization: More complex layouts may require custom coding.
• Can become lengthy: Shortcodes with many attributes can make your page editor cluttered.

2. Using the WooCommerce Product Block (Gutenberg)

If you’re using the Gutenberg editor (the default WordPress block editor), WooCommerce provides dedicated product blocks. These blocks offer a visual way to include products on your pages without needing shortcodes.

• Available Blocks:
• All Products: Displays all your products with various layout options.
• Featured Product: Highlights a single featured product.
• Products by Category: Displays products from a specific category.
• Products by Attribute: Displays products based on attributes (e.g., color, size).
• On Sale Products: Showcases products that are currently on sale.
• Top Rated Products: Displays products with the highest ratings.
• Hand-picked Products: Allows you to manually select specific products.
• Newest Products: Showcases the most recently added products.

Advantages:

• Visual editing: See the products displayed directly within the Gutenberg editor.
• User-friendly: No need to memorize shortcodes or attributes.
• Modern design: Blocks are designed to integrate seamlessly with modern WordPress themes.

Disadvantages:

• Limited customization: Less fine-grained control compared to shortcodes or custom coding.
• Dependent on Gutenberg: Only works with the Gutenberg block editor.

3. Using Custom Code (PHP)

For advanced users, you can use PHP code to directly query the WooCommerce database and display products on your pages. This method provides the highest level of control but requires coding knowledge.

• Example: Displaying products from a specific category using `WP_Query`:

 'product',
'posts_per_page' => 4,
'product_cat'    => 'clothing', // Replace with your category slug
);

$loop = new WP_Query( $args );

if ( $loop->have_posts() ) {

echo ‘

‘;

while ( $loop->have_posts() ) {

$loop->the_post();

wc_get_template_part( ‘content’, ‘product’ );

}

echo ‘

‘;

} else {

echo ‘

No products found matching your selection.

‘;

}

wp_reset_postdata();

?>

Advantages:

• Maximum flexibility: Complete control over the display and layout.
• Advanced filtering: Complex product selection criteria can be implemented.

Disadvantages:

• Requires coding knowledge: Not suitable for beginners.
• Potential for errors: Improper coding can break your site.
• Maintenance overhead: Code needs to be maintained and updated.

4. Using Third-Party Plugins

Several third-party plugins enhance the WooCommerce experience by providing advanced product display options. These plugins often offer features such as product carousels, grid layouts, and advanced filtering.

• Examples of Popular Plugins:
• WooCommerce Product Table: Displays products in a customizable table format.
• Product Slider for WooCommerce: Creates attractive product carousels.
• Ultimate WooCommerce Filters: Adds advanced filtering options to product displays.

Advantages:

• Extended functionality: Offers features beyond the core WooCommerce capabilities.
• User-friendly interface: Many plugins provide a visual interface for configuration.
• Reduced coding effort: Simplifies complex product display requirements.

Disadvantages:

• Plugin bloat: Too many plugins can slow down your site.
• Compatibility issues: Plugins may not be compatible with your theme or other plugins.
• Cost: Premium plugins often require a paid subscription.

Optimizing for SEO when Including Products on Pages

Regardless of the method you choose, it’s crucial to optimize your pages for search engines when including WooCommerce products.

• Use relevant keywords: Incorporate keywords related to your products within the page content and headings.
• Write compelling descriptions: Provide detailed and engaging descriptions for each product.
• Optimize product images: Use high-quality images with descriptive alt text.
• Ensure mobile responsiveness: Make sure your product displays look good on all devices.
• Internal linking: Link to your product pages from relevant blog posts and other pages.

Conclusion

Including WooCommerce products on your WordPress pages is a key aspect of creating a compelling and engaging online store. Whether you opt for the simplicity of shortcodes, the visual convenience of Gutenberg blocks, the power of custom code, or the enhanced functionality of third-party plugins, understanding the different methods empowers you to create targeted promotions and enhance the user experience. Remember to optimize your pages for SEO to maximize your visibility and drive more traffic to your products. By mastering these techniques, you can take your WooCommerce store to the next level.