How to Showcase a WooCommerce Product on a Custom Page: A Beginner’s Guide

Want to give your WooCommerce products a spotlight beyond the standard shop pages? Displaying specific items on custom landing pages, promotion pages, or even blog posts can be a powerful way to drive sales and highlight key features. This guide will walk you through how to achieve this, even if you’re a WooCommerce newbie.

Think of it this way: imagine you’re launching a new coffee blend. Instead of burying it in your general “Coffee” category, you create a dedicated landing page with glowing reviews, tempting images, and a clear call to action. Showing the product *directly* on that page makes the purchase process much smoother!

Why Put a WooCommerce Product on a Custom Page?

* Targeted Marketing: Create landing pages focused on specific products and tailored to particular marketing campaigns.

* Improved User Experience: Guide users to the exact product you want them to see, reducing clicks and potential frustration.

* Enhanced Storytelling: Surround your product with context, testimonials, and compelling reasons to buy.

* Better SEO: Optimize your custom page with keywords relevant to the specific product, boosting its visibility in search results.

Method 1: Using a Shortcode

The simplest way to display a WooCommerce product on a custom page is using a shortcode. WooCommerce provides several built-in shortcodes for various purposes. For displaying a single product, you’ll use the `[product]` shortcode.

Here’s how it works:

1. Find the Product ID: Go to Products > All Products in your WordPress dashboard. Hover over the product you want to display. You’ll see the Product ID in the URL or by editing the product and looking for ‘post=’ followed by a number. This ID is crucial.

2. Edit Your Custom Page: Open the custom page where you want to display the product. If you’re using the Gutenberg editor, add a “Shortcode” block. If you’re using a classic editor, just paste the shortcode directly into the content area.

3. Insert the Shortcode: Use the following shortcode, replacing `XX` with your product’s ID:

[product id=”XX”]

For example, if your product ID is 123, the shortcode would be:

[product id=”123″]

4. Save and View: Save your page and view it on the front end. The product will now be displayed, including its title, price, image, and add-to-cart button.

Real-World Example: Let’s say you’re promoting a specific yoga mat on a “Yoga for Beginners” page. By embedding the product directly on that page, you remove the need for users to navigate to the general “Yoga Accessories” section.

Method 2: Using the WooCommerce Blocks (Gutenberg)

If you’re using the Gutenberg block editor (which is the default in newer WordPress versions), you can use the built-in WooCommerce blocks. This offers a more visual and intuitive way to add products.

1. Edit Your Custom Page: Open the custom page where you want to display the product.

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

3. Search for “Product”: Type “Product” in the search bar. You’ll see a few WooCommerce related blocks. Select “Single Product”.

4. Search for Your Product: Start typing the name of the product you want to display. WooCommerce will suggest matching products. Select the correct product.

5. Customize (Optional): Some themes and plugins provide additional options to customize the appearance of the product block.

6. Save and View: Save your page and view it on the front end.

Reasoning: Using blocks offers more flexibility in terms of layout and design compared to simple shortcodes. You can easily combine the product block with other blocks, like images, text, and calls to action.

Method 3: Custom Code (For More Advanced Users)

If you need more control over the product display, you can use custom PHP code within your theme or a custom plugin. This method requires familiarity with PHP and WordPress theming.

1. Create a Custom Template (Optional): If you want a highly customized layout, create a custom page template in your theme. This involves creating a PHP file within your theme’s directory (usually in a child theme to avoid overwriting updates) and assigning it as a template to your custom page.

2. Retrieve the Product Data: Use the WooCommerce functions to retrieve the product data. Here’s a basic example:

<?php
$product_id = 123; // Replace with your product ID
$product = wc_get_product( $product_id );

if ( $product ) {

echo ‘

‘ . $product->get_name() . ‘

‘;

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

echo ‘

‘ . $product->get_description() . ‘

‘;

echo ‘

Price: ‘ . wc_price( $product->get_price() ) . ‘

‘;

echo woocommerce_template_single_add_to_cart(); // Display the “Add to Cart” button

} else {

echo ‘Product not found.’;

}

?>

Explanation:

• `wc_get_product($product_id)`: Retrieves the product object based on its ID.
• `$product->get_name()`: Gets the product name.
• `wp_get_attachment_url($product->get_image_id())`: Gets the URL of the product image.
• `$product->get_description()`: Gets the product description.
• `wc_price($product->get_price())`: Formats the product price.
• `woocommerce_template_single_add_to_cart()`: Displays the default “Add to Cart” button.

3. Add to Your Page: If you’re using a custom template, paste the code into your template file. If you’re not using a template, you’ll likely need to add this code via a custom plugin or by editing your theme’s `functions.php` file (again, use a child theme!). Be *very* careful when editing your theme’s `functions.php` as errors can break your site.

Important Security Note: Always sanitize and validate user inputs and product IDs to prevent security vulnerabilities. Avoid directly embedding unsanitized product IDs from the URL.

Benefit: This method allows for complete control over the product’s appearance, enabling you to integrate it seamlessly into your custom page’s design and layout. You can also add custom features, like specific attributes or related products.

SEO Considerations

Remember to optimize your custom page for search engines:

* Keyword Research: Identify keywords related to the product and target audience.

* Optimize Content: Use the keywords naturally within the page title, headings, and body text.

* Image Optimization: Use descriptive alt text for the product image.

* Internal Linking: Link to the custom page from other relevant pages on your site.

* Meta Description: Write a compelling meta description to encourage clicks from search results.

By strategically showcasing your WooCommerce products on custom pages and optimizing those pages for search, you can significantly boost sales, improve user experience, and enhance your overall online marketing efforts. Good luck!