How to Use WooCommerce to Display Products Without Selling: A Newbie-Friendly Guide
WooCommerce is a powerhouse for online stores, but did you know you can leverage its robust product management features even if you’re *not* looking to sell directly through your website? That’s right! You can use WooCommerce to showcase your products, essentially turning it into an online catalog.
Why would you want to do this? There are several compelling reasons:
* Lead Generation: Imagine you’re a custom furniture maker. You display your past projects as “products” but instead of a “Buy” button, you have a “Request a Quote” button linking to a contact form. This helps you attract potential clients interested in custom work.
* Showcasing Your Portfolio: Photographers, artists, and designers can beautifully present their work as WooCommerce products, providing detailed descriptions and high-quality images. No need for a separate portfolio plugin!
* Product Previews: Teasing upcoming product releases? Display them with limited details and a “Coming Soon” message. This builds anticipation and gathers interest before the actual launch.
* Offline Sales: You might have a physical store and want to showcase your inventory online without online ordering. Customers can browse online and then visit your brick-and-mortar location.
* Wholesale Catalogs: Present a detailed product catalog only accessible to logged-in wholesale clients with specific pricing (though we won’t cover that in this article, it’s a common use case).
Let’s dive into how you can set up WooCommerce to achieve this.
Step 1: Installing and Setting Up WooCommerce
If you haven’t already, you’ll need to install and activate the WooCommerce plugin from the WordPress plugin directory. The setup wizard will guide you through the basic settings like currency and store location. Don’t worry about setting up payment gateways during the initial setup; we won’t be needing them.
Step 2: Adding Your Products
This part is identical to setting up products for a regular WooCommerce store. Go to Products > Add New.
* Product Name: Give your product a descriptive name.
* Product Description: Provide detailed information about the product. Think about the key features, materials, dimensions, and anything else relevant to your audience.
* Product Image: Upload high-quality images. Good visuals are crucial for showcasing your products effectively.
* Product Categories and Tags: Organize your products into categories and tags to make them easily searchable. This improves user experience and helps with SEO.
Example: Let’s say you’re a bespoke cake baker showcasing your previous creations. You might name a product “Three-Tier Chocolate Raspberry Wedding Cake” and describe the ingredients, size, and decorations in detail. You could categorize it under “Wedding Cakes” and tag it with “Chocolate,” “Raspberry,” and “Elegant.”
Step 3: Removing the “Add to Cart” Button
This is the crucial step that prevents online sales. We have several options to achieve this.
Option 1: Using a Code Snippet (Recommended for Flexibility)
This method involves adding a small piece of code to your website. It’s generally the most flexible because you can easily modify it or revert it if needed.
1. Install a Code Snippets Plugin: We recommend using a plugin like “Code Snippets.” It’s a safe and organized way to add code to your website without directly editing your theme files.
2. Add a New Snippet: Go to Snippets > Add New.
3. Enter the Following Code:
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 );
4. Name the Snippet: Give it a descriptive name like “Remove Add to Cart Buttons.”
5. Set the Snippet to “Run Everywhere.”
6. Save and Activate the Snippet.
Explanation:
* `remove_action()`: This function removes a specific action that WooCommerce performs.
* `woocommerce_after_shop_loop_item`: This action hook is used to display the “Add to Cart” button on the shop and category pages.
* `woocommerce_template_loop_add_to_cart`: This is the function responsible for displaying the “Add to Cart” button on the shop and category pages.
* `woocommerce_single_product_summary`: This action hook is used to display elements within the product page like the “Add to cart” button.
* `woocommerce_template_single_add_to_cart`: This is the function responsible for displaying the “Add to Cart” button on the single product page.
* `10` and `30`: These numbers represent the priority of the action. We’re removing the action that runs at priority 10 on shop pages and priority 30 on single product pages.
Option 2: Using CSS (Simpler but Less Flexible)
This method uses CSS to hide the “Add to Cart” button. It’s simpler but can be less reliable if WooCommerce updates its HTML structure.
1. Go to Appearance > Customize > Additional CSS.
2. Add the Following CSS:
.woocommerce a.button.add_to_cart_button,
.woocommerce button.single_add_to_cart_button {
display: none !important;
}
3. Publish the Changes.
Explanation:
* `.woocommerce a.button.add_to_cart_button`: This targets the “Add to Cart” button on the shop and category pages.
* `.woocommerce button.single_add_to_cart_button`: This targets the “Add to Cart” button on the single product page.
* `display: none !important;`: This hides the element. `!important` ensures the style overrides any other conflicting styles.
Option 3: Editing Theme Files (Advanced – Not Recommended for Beginners)
This method involves directly editing your theme’s files. It’s the least recommended option because it’s prone to errors and can be overwritten during theme updates. Avoid this unless you’re very comfortable with PHP and WordPress theme development.
Step 4: Adding a “Request a Quote” or “Contact Us” Button
Now that we’ve removed the “Add to Cart” button, let’s replace it with something more appropriate, like a “Request a Quote” or “Contact Us” button. We’ll use a code snippet for this too!
1. Add a New Snippet (using the Code Snippets plugin as described above).
2. Enter the Following Code:
function custom_woocommerce_after_add_to_cart_button() {
global $product;
$contact_page_url = get_permalink( get_page_by_title( 'Contact Us' ) ); // Replace 'Contact Us' with the title of your contact page.
if ( $contact_page_url ) {
echo ‘Request a Quote‘;
} else {
echo ‘
Please create a page titled “Contact Us”.
‘;
}
}
add_action( ‘woocommerce_single_product_summary’, ‘custom_woocommerce_after_add_to_cart_button’, 31 ); // runs after the original add to cart at 30.
function custom_woocommerce_shop_loop_after_title() {
global $product;
$contact_page_url = get_permalink( get_page_by_title( ‘Contact Us’ ) ); // Replace ‘Contact Us’ with the title of your contact page.
if ( $contact_page_url ) {
echo ‘View Details‘;
} else {
echo ‘
Please create a page titled “Contact Us”.
‘;
}
}
add_action(‘woocommerce_after_shop_loop_item_title’, ‘custom_woocommerce_shop_loop_after_title’);
3. Name the Snippet: Give it a descriptive name like “Add Request a Quote Button.”
4. Set the Snippet to “Run Everywhere.”
5. Save and Activate the Snippet.
Explanation:
* `custom_woocommerce_after_add_to_cart_button()`: This function creates the “Request a Quote” button.
* `get_permalink( get_page_by_title( ‘Contact Us’ ) )`: This retrieves the URL of your “Contact Us” page. Make sure you replace `’Contact Us’` with the exact title of your contact page.
* `esc_url()`: This sanitizes the URL to prevent security vulnerabilities.
* `…`: This creates a link to your contact page.
* `class=”button alt”`: This adds a WooCommerce-style button class to the link.
* `add_action(‘woocommerce_single_product_summary’, ‘custom_woocommerce_after_add_to_cart_button’, 31 )`: This adds the function to the `woocommerce_single_product_summary` hook, displaying the button after the product summary (but after the original add to cart button was meant to be), which is why we run it at priority `31` instead of `30`.
* `custom_woocommerce_shop_loop_after_title()`: This function creates the “View Details” button for the catalog/shop pages.
* `add_action(‘woocommerce_after_shop_loop_item_title’, ‘custom_woocommerce_shop_loop_after_title’)`: adds the “view details” button to shop loop (archive) pages.
Important:
* Create a “Contact Us” Page: Make sure you have a page titled “Contact Us” (or whatever title you use in the code snippet) with a contact form. You can use a plugin like Contact Form 7 or WPForms to create a form.
* Customize the Button Text: You can easily change the text “Request a Quote” to something else, like “Learn More” or “Get in Touch,” by modifying the code snippet.
* Adjust CSS: Feel free to adjust the CSS to style the button to match your website’s design.
Step 5: Testing and Refining
* Check the Product Pages: Visit your product pages to ensure the “Add to Cart” button is gone and the “Request a Quote” button is displaying correctly.
* Test the Link: Click the “Request a Quote” button to make sure it leads to your contact page.
* Mobile Responsiveness: Ensure your product displays and buttons look good on different screen sizes.
Conclusion
By following these steps, you can effectively use WooCommerce to display products without selling them directly online. This is a powerful strategy for lead generation, portfolio showcasing, and product previews. Remember to adapt the code snippets to your specific needs and website design for the best results. Good luck!
