WooCommerce is a popular and powerful e-commerce platform that allows you to create and customize your own online store. WooCommerce is built on WordPress, which means you can benefit from its flexibility, security, and ease of use. WooCommerce also offers a wide range of extensions and themes to enhance your store’s functionality and appearance.
One of the features that WooCommerce supports is catalog mode, which lets you display your products without the option to buy them. Catalog mode can be useful for various purposes, such as showcasing your products, creating a portfolio, or preparing for a launch. Catalog mode can also help you save resources, improve performance, and avoid unwanted orders.
Setting up catalog mode in WooCommerce is not difficult, and you don’t need to install any additional plugins. In this blog, we will show you how to enable catalog mode in WooCommerce using some simple code snippets. You will learn how to hide the add to cart button, the cart page, and the checkout page, as well as how to display a custom message instead of the price.
The main steps to enable catalog mode are:
- Hide the prices and add to cart buttons on your product pages
- Membership or Restricted access
- Add a contact form or a request a quote button to your product pages
By following these steps, you will be able to turn your WooCommerce store into a catalog mode, and showcase your products without allowing purchases. You can also customize the catalog mode according to your needs and preferences.
Here’s a quick summary on what Catalog Mode is
Catalog mode is a feature that allows you to display your products on your online store without enabling the purchase functionality. In other words, your customers can browse your products, but they cannot add them to the cart or proceed to checkout. Catalog mode is supported by WooCommerce, the most popular e-commerce platform for WordPress.
There are various reasons why a business might choose to implement catalog mode on their WooCommerce store. For example, you might want to showcase your products without selling them immediately, such as when you are launching a new product line, running a pre-order campaign, or creating a portfolio. Alternatively, you might want to use catalog mode for B2B purposes, such as when you want to generate inquiries, negotiate prices, or offer custom quotes. Catalog mode can also help you reduce the maintenance and security costs of your store, as well as improve its performance and user experience.
What are the benefits of using WooCommerce catalog mode?
- Boosting your SEO– Each product becomes a page full of relevant keywords and descriptions for search engines to index.
- Building buzz around your brand– New products and offerings are given their own page that’s perfect for social sharing and sending to your top clients.
- Highlighting must-have solutions– Share fixes to customers’ problems and invite them to reach out for a quote.
- Providing analytics– Learn which product pages are the most popular with customers and use this data to guide future product development.
- Increase users– Increasing the number of registered users, which can be helpful for email and newsletter marketing.
Related Blogs from SaffireTech
Preparation Before Switching to Catalog Mode
Before you switch your WooCommerce store to catalog mode, it is important to take some precautionary steps to avoid any potential issues or data loss. The first and most essential step is to backup your WooCommerce site, including your database, files, and media. You can use a plugin like UpdraftPlus or BackupBuddy to create a complete backup of your site. This way, you can easily restore your site in case something goes wrong. We recommend you consult a professional WooCommerce website developer for this matter.
Lets begin with the implementation steps!
We will be defining 3 use cases and understand the code for the catalog options.
– Hide the prices and remove add to cart:
Use Case:
You aim to provide users with detailed product information while withholding pricing details and preventing them from adding items to the cart directly. This approach is suitable for businesses offering bespoke or customizable products with variable pricing, where pricing may depend on specific customer requirements or customization options.
Implementation:
1. Hide Product Prices:
- On both shop/category pages and individual product pages, conceal the prices of your products. This can be achieved by removing price display elements or replacing them with placeholders such as “Contact for Pricing” or “Price Upon Request”.
- Ensure that the product listings clearly convey the value proposition and unique features of each product to capture users’ interest despite the absence of pricing information.
- Consider providing a brief explanation or disclaimer near the hidden prices, indicating that prices are available upon inquiry or customization.
2. Remove “Add to Cart” Button:
- Eliminate the “Add to Cart” button from both shop/category pages and individual product pages to prevent users from adding items directly to their cart.
- Instead of the traditional purchasing flow, encourage users to engage in alternative actions such as contacting your sales team for inquiries, requesting a quote, or initiating a consultation process.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php // Hook to run the function on WordPress initialization add_action( 'init', 'sft_remove_add_to_cart_buttons' ); // Function to remove add to cart buttons function sft_remove_add_to_cart_buttons() { // Disable add to cart functionality on single product pages remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); } // Function to hide product prices function sft_hide_product_price( $price, $product ) { // Check if the current page is a single product page if ( is_product() ) { // Return an empty string to hide the product price return ''; } // If not a single product page, return the original price return $price; } // Hook to apply the product price hiding filter add_filter( 'woocommerce_get_price_html', 'sft_hide_product_price', 10, 2 ); ?> |
– Membership or Restricted access:
Use Case:
Your business offers products or services that are exclusive to registered members, and you aim to incentivize users to create accounts before making a purchase. This approach is beneficial for businesses seeking to build a loyal customer base, gather customer data for personalized marketing efforts, and offer special privileges or discounts to registered members.
Implementation:
Restrict Access to “Add to Cart” Functionality:
- Modify your website’s functionality to limit access to the “Add to Cart” button or checkout process to registered users only.
- For non-registered users, display a message or prompt encouraging them to sign up for an account to access exclusive products and complete their purchase.
- Once users have successfully registered or logged in, grant them access to the full shopping experience, including the ability to add items to their cart and proceed to checkout.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php // Function to hide Add to Cart button for non-logged-in users. function hide_add_to_cart_for_non_logged_in() { // Check if the user is not logged in. if ( ! is_user_logged_in() ) { // Remove the Add to Cart button on product archive pages. remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart' ); // Remove the Add to Cart button on single product pages. remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); } } // Hook to run the function on WordPress initialization. add_action( 'init', 'hide_add_to_cart_for_non_logged_in' ); ?> |
Looking for a tailor-made catalog plugin for your site?
Reach out to us now!– Add a contact form or a request a quote button to your product pages:
Use Case:
Your business operates through multiple sales channels, including both online and offline avenues. You aim to encourage customers to visit your physical store or directly contact your sales team for inquiries or purchases. This approach is beneficial for businesses that prefer direct interaction with customers to provide personalized service or to showcase products that are best experienced in person.
Implementation:
Redirect Users to a Contact Page:
- Include clear calls-to-action (CTAs) on your website that prompt users to contact your sales team or visit your physical store.
- For online visitors interested in making purchases offline, provide a prominent link or button that leads them to a dedicated contact page.
- On the contact page, offer various communication channels such as phone numbers, email addresses, and possibly a contact form where customers can leave their details and inquiries.
- Ensure the contact page provides clear instructions on how customers can reach your sales team or visit your store, including operating hours and location details.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php // Function to redirect the user to the contact page function redirect_to_contact_page() { // Check if the current page is a product page if ( is_product() ) { // Remove the default "Add to Cart" action remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); // Add a custom action to display the "Contact Us" button add_action( 'woocommerce_single_product_summary', 'custom_contact_button', 30 ); } } // Function to display a custom "Contact Us" button function custom_contact_button() { ?> <form class="cart" action="<?php echo esc_url( home_url( '/contact/' ) ); ?>" method="post"> <button type="submit" class="button alt">Contact Us</button> </form> <?php } // Hook to execute the redirect function on template redirection add_action( 'template_redirect', 'redirect_to_contact_page' ); ?> |
Wrapping Up!
WooCommerce catalog mode is a feature that allows you to display your products without the option to buy them online. It is useful for creating a product showcase, a digital catalog, or a request-a-quote system. In this article, we have shown you how to create a WooCommerce catalog mode without a plugin, using custom code snippets. You can copy and paste the code into your theme’s functions.php file or a code snippet plugin.
The code will remove the add to cart button and the product prices from all pages, and add a contact us for pricing button instead. This way, you can create a simple and elegant catalog mode for your WooCommerce store, without installing any extra plugins. We hope you found this article helpful and learned something new today. Thank you for reading!
