WooCommerce Showroom Mode: Display Your Products Without Selling
Want to showcase your amazing products on your WooCommerce store without actually selling them online? Maybe you have complex pricing that needs individual quotes, sell services instead of physical goods, or just want to drive in-store traffic. That’s where WooCommerce Showroom Mode comes in.
This article will guide you through turning your WooCommerce store into a beautiful online catalog, perfect for browsing without the pressure of online purchasing. We’ll break down everything in an easy-to-understand way, even if you’re a WooCommerce newbie.
Why Use Showroom Mode?
Before we dive into *how*, let’s understand *why* you might choose to use showroom mode. Here are a few common scenarios:
* Complex Pricing: Imagine you sell custom-built computers. Pricing depends heavily on component choices and requires a personalized quote. Showroom mode lets customers browse the available components without being able to add them to a cart. They can then contact you for a personalized quote based on their selections.
* Service-Based Business: You offer landscaping services. Displaying your past projects as a gallery allows potential clients to see your work. They can then contact you to schedule a consultation. A traditional e-commerce checkout is simply not needed.
* Driving In-Store Traffic: Maybe you want to leverage your website to encourage visits to your physical store. Use showroom mode to display your products and entice customers to come see them in person. Think furniture stores showcasing their items online but preferring in-person sales.
* Compliance Restrictions: Some products, like alcohol or tobacco, may have legal restrictions on online sales in certain regions. A showroom allows you to display the product range without enabling online purchasing, keeping you compliant.
* Building Interest: You’re launching a new product line soon but aren’t quite ready to start selling. A showroom creates anticipation and allows you to gather leads before the official launch.
Implementing WooCommerce Showroom Mode: The Easy Ways
There are several ways to achieve showroom mode. We’ll cover a few of the easiest and most popular options:
#### 1. Using a Dedicated WooCommerce Showroom Plugin
The simplest method is using a plugin specifically designed for WooCommerce showroom functionality. Many free and premium options are available in the WordPress plugin repository. A popular choice (with excellent reviews) is “WooCommerce Catalog Mode, Disable Shopping & Enquiry Form.” Here’s why plugins are often the best starting point:
* Ease of Use: They provide a user-friendly interface, often with just a few toggles to switch on showroom mode.
* Flexibility: Many plugins offer advanced features like disabling the cart, checkout pages, and “Add to Cart” buttons selectively.
* No Coding Required: Perfect for beginners who are not comfortable editing PHP files.
Here’s a general idea of how using a plugin might work:
1. Install and Activate: Search for a WooCommerce Catalog Mode plugin in your WordPress dashboard (`Plugins > Add New`). Install and activate it.
2. Configuration: Find the plugin’s settings (often under the WooCommerce or Settings menu in your WordPress dashboard).
3. Enable Catalog Mode: Look for a setting to enable catalog mode or showroom mode. Often it’s as simple as checking a box.
4. Customize (Optional): Most plugins let you customize the appearance, hide pricing, or replace “Add to Cart” buttons with enquiry forms or contact buttons.
Example using the “WooCommerce Catalog Mode, Disable Shopping & Enquiry Form” plugin:
(Based on plugin documentation, but may vary slightly with plugin updates)
1. Install & Activate Plugin.
2. Go to `WooCommerce > Catalog Mode`.
3. Enable “Enable Catalog Mode.”
4. Customize options like:
- “Remove Add to Cart button”
- “Remove Price”
- “Replace with Enquiry Form” (this option often requires installing a contact form plugin like Contact Form 7)
#### 2. Hiding “Add to Cart” Buttons with CSS (Basic)
If you just want a quick and dirty way to remove the “Add to Cart” button, you can use CSS. This is a less robust solution than a plugin, as it simply *hides* the button, but it can be a good starting point.
1. Identify the CSS Class: Use your browser’s developer tools (right-click on the “Add to Cart” button and select “Inspect”) to find the CSS class associated with the button. It’s commonly something like `.add_to_cart_button` or `.single_add_to_cart_button`.
2. Add CSS: Go to `Appearance > Customize > Additional CSS` in your WordPress dashboard.
3. Add the following CSS code, replacing `.add_to_cart_button` with the actual class:
.add_to_cart_button {
display: none !important; /* !important ensures it overrides other styles */
}
This will hide *all* “Add to Cart” buttons on your site. For more targeted hiding, you might need to use more specific CSS selectors.
4. Publish: Click “Publish” to save your changes.
Important Notes about CSS:
* Specificity: CSS is hierarchical. The more specific your selector, the more likely it is to override other styles.
* Theme Updates: Theme updates can sometimes break CSS customizations. Monitor your site after theme updates to ensure your CSS is still working correctly.
* Accessibility: Hiding elements with CSS *doesn’t* remove them from the HTML. It’s generally better to actually remove the button if possible, for accessibility reasons.
#### 3. Code Snippets (Advanced)
For more control and flexibility, you can use code snippets to modify your WooCommerce theme’s functionality directly. This method is best for developers or those comfortable working with PHP code. Always back up your site before modifying theme files.
Example: Removing Add to Cart buttons using PHP:
You can add the following code snippet to your `functions.php` file (usually located in your theme’s directory) or use a code snippet plugin like “Code Snippets” (recommended).
<?php // Remove Add to Cart button on product pages remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 ); remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
// Remove the cart page link
add_filter( ‘woocommerce_is_purchasable’, ‘__return_false’);
//Hide the cart icon
add_filter( ‘woocommerce_add_to_cart_fragments’, ‘remove_cart_button_fragment’ );
function remove_cart_button_fragment( $fragments ) {
$fragments[‘.cart-contents’] = ”;
return $fragments;
}
?>
Explanation:
* `remove_action()`: This function removes actions from WooCommerce hooks. We’re removing the `woocommerce_template_loop_add_to_cart` action from the `woocommerce_after_shop_loop_item` hook (which displays the button on product category pages) and `woocommerce_template_single_add_to_cart` from `woocommerce_single_product_summary`(which displays the button on single product pages).
* `add_filter( ‘woocommerce_is_purchasable’, ‘__return_false’);`: This filter tells WooCommerce that products are not purchasable, disabling the “Add to Cart” button.
* `remove_cart_button_fragment()`: Hides the cart icon. You may need to adjust the CSS selector `.cart-contents` to match your theme’s cart icon element.
Important Considerations for Code Snippets:
* Backup: *Always* back up your site before editing theme files. A single typo can break your site.
* Child Theme: It’s best practice to use a child theme when making modifications to your theme. This prevents your changes from being overwritten when you update your theme.
* Code Snippet Plugins: Using a code snippet plugin like “Code Snippets” is generally safer and more manageable than directly editing your `functions.php` file.
Optimizing Your Showroom for Conversions (Even Without Sales)
Even though you’re not selling products directly online, you still want to guide visitors toward conversion goals. Here’s how:
* Clear Call-to-Actions: Replace “Add to Cart” buttons with “Request a Quote,” “Contact Us,” “Learn More,” or “Visit Our Store” buttons that link to your contact form, phone number, or store locator.
* High-Quality Images and Descriptions: Showcase your products with stunning images and compelling descriptions. Focus on the benefits and features.
* Customer Testimonials: Build trust by displaying customer testimonials or reviews on your product pages.
* Live Chat: Offer live chat support to answer questions and guide visitors.
* Prominent Contact Information: Make it easy for visitors to contact you with prominent phone numbers, email addresses, and contact forms.
* Location Information: Clearly display your store location(s) and operating hours.
Example:
Instead of an “Add to Cart” button, imagine a sleek button that reads “Get a Custom Quote” linking to a contact form pre-populated with the product’s details.
Conclusion
Turning your WooCommerce store into a showroom is a powerful way to present your products and services online without the complexities of direct e-commerce. By choosing the right method (plugin, CSS, or code snippets) and optimizing your site for conversions, you can create a compelling online experience that drives leads, generates interest, and ultimately boosts your business. Remember to always test your changes and adapt your strategy based on your specific needs and goals.
