WooCommerce: Unveiling Your Linked Hidden Products (A Beginner’s Guide)
So, you’re using WooCommerce and you’ve cleverly hidden some products, maybe for exclusive promotions or to only be accessible through specific links. Great! But now you want to actually *show* them to the right people. You’re in the right place! This article will break down how to display those sneaky, hidden WooCommerce products in a way that’s easy to understand, even if you’re new to the world of WordPress and e-commerce.
What are “Linked Hidden Products” Anyway?
Let’s clarify what we mean by “linked hidden products.” In WooCommerce, you might hide a product for a few reasons:
- Exclusive Bundles: You might have a “mystery box” where the contents are secret, but the customer knows they’re getting a value pack. The individual components are hidden but linked to the main mystery box product page.
- Upselling/Cross-Selling: You want to offer a discount on a complementary product ONLY when someone buys the main item. Think “Buy this camera, get a battery 50% off!” The battery discount page might be hidden and only accessible through the main camera product page.
- Members-Only Access: You only want certain products to be visible to logged-in members or subscribers.
- Special Promotions: A unique promo code grants access to a product not visible to the general public.
- Find the Product URL: Go to your “Products” page in the WordPress dashboard. Find the hidden product and click “Edit.” The product URL is typically displayed right below the product title. If not, click “Get Shortlink” to generate one.
- Add the Link: Edit the page or product where you want the hidden product to be displayed. Use the WordPress editor to create a standard link. Paste the hidden product’s URL as the link destination.
- Field Label: “Linked Product”
- Field Name: `linked_product` (important to use this exact name if you use the code below as is)
- Field Type: “Relationship”
- Post Type: Select “Products” so you can select other products in your store.
The crucial part is that these products aren’t meant to be found via your main shop pages or category archives. They are only accessible through a specific link or under certain conditions.
The Problem: How to Actually *Show* Them
WooCommerce’s default settings are designed to, well, hide these products. So how do you selectively reveal them? Here are a few methods, ranging from simple to slightly more code-intensive:
1. Direct Linking – The Easiest Way
This is the most basic approach and works best when you want to provide direct access to the hidden product via a link on another page (like the main product page in the camera/battery example).
Example:
Let’s say you sell a premium coffee grinder. You have a hidden “Beginner’s Guide to Espresso” ebook that you want to offer only to grinder purchasers. You’d:
1. Find the URL of the “Beginner’s Guide to Espresso” product (e.g., `https://yourshop.com/product/espresso-guide/`).
2. Edit the coffee grinder product page.
3. Add text like: “Want to learn to make amazing espresso? Get our Beginner’s Guide [HERE](https://yourshop.com/product/espresso-guide/)”.
This method is straightforward but requires manual insertion of each link.
2. Using Custom Fields and a Little Code (For More Control)
This approach gives you more flexibility. You can use custom fields to associate hidden products with specific “parent” products, and then write a small snippet of code to display these linked products.
Step 1: Install the Advanced Custom Fields (ACF) Plugin
ACF is a fantastic plugin for adding custom fields to your WordPress posts and products. It offers a free version that’s perfectly adequate for this task. Install and activate it from the WordPress plugin repository.
Step 2: Create a Custom Field Group
1. Go to “Custom Fields” in your WordPress dashboard.
2. Click “Add New.”
3. Name the field group something like “Linked Hidden Products.”
4. Click “Add Field.”
5. Under “Settings” (at the bottom), set “Location” to “Post Type is equal to Product.” This ensures the custom field appears on your product edit pages.
6. Click “Save Changes.”
Step 3: Link the Hidden Product to the Parent Product
1. Go to the “parent” product (e.g., the coffee grinder) that you want to associate with the hidden product.
2. Scroll down to the “Linked Hidden Products” section.
3. Search for the hidden product (e.g., “Beginner’s Guide to Espresso”) and select it.
4. Update the product.
Step 4: Add Code to Display the Linked Product
This is where you’ll need to add a code snippet to your theme’s `functions.php` file (or a custom plugin if you’re comfortable with that). Important: Always back up your website before editing theme files! Using a child theme is also highly recommended to avoid losing changes during theme updates.
<?php
function display_linked_hidden_product() {
global $product; // Access the current product object
$linked_product_id = get_field(‘linked_product’, $product->get_id()); // Get the product ID from the custom field
if( $linked_product_id ) {
$linked_product = wc_get_product( $linked_product_id ); // Get the product object
if( $linked_product ) {
echo ‘
echo ‘
You might also like:
‘;
echo ‘get_permalink() . ‘”>’;
echo ‘get_name() . ‘”>’;
echo ‘
‘ . $linked_product->get_name() . ‘
‘;
echo ‘
‘ . $linked_product->get_short_description() . ‘
‘;
echo ‘‘;
echo ‘
‘;
}
}
}
add_action( ‘woocommerce_after_single_product_summary’, ‘display_linked_hidden_product’, 20 ); // Display after product summary
?>
Explanation of the Code:
- `get_field(‘linked_product’, $product->get_id());`: This line retrieves the product ID of the linked product from the custom field we created.
- `wc_get_product( $linked_product_id );`: This uses a WooCommerce function to get the actual product *object* from the ID.
- `get_the_post_thumbnail_url( $linked_product_id, ‘thumbnail’ );`: This retrieves the URL of the product’s featured image (thumbnail size in this case).
- `add_action( ‘woocommerce_after_single_product_summary’, ‘display_linked_hidden_product’, 20 );`: This “hooks” our `display_linked_hidden_product` function into the `woocommerce_after_single_product_summary` action, which means our code will run and display the linked product *after* the main product summary on the single product page. The `20` is the priority, which controls the order in which functions are executed.
- The rest of the code is HTML to display the linked product’s image, name, short description, and a link to its page. You can customize this to match your website’s design.
Step 5: Customize the Styling (Optional)
You can use CSS to style the `.linked-hidden-product` div to make it look nice on your product pages. Add your CSS rules to your theme’s stylesheet or using the WordPress Customizer (Appearance -> Customize -> Additional CSS).
Why this is better than direct linking:
- Centralized Management: You manage the linked products through the ACF interface. Changing a link is much easier.
- Dynamic Display: The code dynamically pulls the linked product information, so you don’t need to manually update links if product details change.
- Flexibility: You can easily modify the code to display more or less information about the linked product.
3. Utilizing WooCommerce’s Built-in Upsells and Cross-sells (Sometimes a Good Enough Solution)
While not *specifically* designed for hidden products, you can leverage WooCommerce’s upsell and cross-sell features. The downside is that the products need to be visible in the admin area to be added.
1. Go to the product edit page.
2. Select the “Linked Products” tab.
3. Use the “Upsells” or “Cross-sells” fields to search for and add the hidden products.
The main drawback is that you can’t truly *hide* the upsell/cross-sell products from your shop archive. They’ll still be technically visible in the backend, even if you don’t directly link to them anywhere else. This makes it less suitable for scenarios where you want complete secrecy.
Important Considerations for SEO:
* Noindex, Nofollow: If these truly are meant to be hidden pages, you likely don’t want Google crawling them. Use a plugin like Yoast SEO or Rank Math SEO to set the “noindex” and “nofollow” meta tags on these hidden product pages. This tells search engines not to index or follow the links on those pages. This will prevent them from appearing in search results.
* Canonical URLs: If the hidden product is a variation of an existing product, ensure that it has the correct canonical URL pointing to the main product. This helps prevent duplicate content issues.
Conclusion
Displaying linked hidden products in WooCommerce can be achieved through various methods. Direct linking is the simplest, while using custom fields provides greater control and flexibility. Choose the approach that best suits your needs and technical skill level. Don’t forget to consider SEO implications to ensure your hidden products remain hidden from search engines if that’s your intention! Good luck!
