Enable WooCommerce Catalog Mode Without Plugin

WooCommerce is a go-to eCommerce solution for over 6.6 million online sellers. However, some shop owners prefer a different approach, opting to remove prices and add-to-cart buttons. This is where WooCommerce’s catalog mode comes into play.

In this article, we’ll explore how to enable WooCommerce catalog mode without using a plugin. Want to know more? Let’s get started!

What is WooCommerce Catalog Mode?

WooCommerce provides ample room for modification. Besides a traditional website with prices, purchase functionality, the add-to-cart button, and product variations, you can create a website with only a catalog of products or services.

This catalog website is a regular website without a purchase functionality, where you can find a list of products with their descriptions, images, and other technical information.

Key Features of WooCommerce Catalog Mode

There are multiple features of catalog mode that makes it an attractive option for online retails, let’s go through some of them –

No Online Purchase

The primary feature of WooCommerce Catalog Mode is the disablement of online purchase functionality. This means the “Add to Cart” button and other ecommerce elements are removed or hidden from the product pages.

This mode is ideal for businesses that want to showcase their products without allowing customers to make immediate purchases. It can be beneficial for businesses that operate on a quotation basis, require customer inquiries for pricing, or simply want to display their product offerings without the immediate pressure of online transactions.

Display Product Information

Even without the ability to purchase online, WooCommerce catalog mode allows you to display comprehensive product information. This includes product descriptions, specifications, images, and any other relevant details.

By providing detailed information, customers can thoroughly understand the product’s features, benefits, and usage. This ensures that potential buyers have all the necessary information to make informed decisions, even if they can’t purchase directly from the website.

Wholesale or B2B Sales

For businesses involved in wholesale or B2B sales, WooCommerce Catalog Mode is particularly beneficial. It allows these businesses to showcase their product range to other businesses without the need for immediate transactions.

Instead, buyers can view the products and reach out to bulk purchase inquiries or customized pricing. This setup is perfect for industries where negotiations, volume-based pricing, and custom orders are standard practice.

Website Maintenance

WooCommerce Catalog Mode can be advantageous during website maintenance or updates. When undergoing significant changes or updates to the ecommerce functionalities, businesses can switch to catalog mode.

This will ensure that customers can still view products and information without encountering purchase-related errors or issues. This helps in maintaining a seamless user experience while technical adjustments are being made in the background.

Lead Collection

Although, direct purchases are disabled, WooCommerce Catalog Mode can still be used effectively for lead generation. You can integrate contact forms, inquiry buttons, or request-for-quote features to capture potential customer information.

This allows interested buyers to reach out, ask questions, or request more details about specific products. By collecting leads, businesses can follow up with personalized communication, nurture relationships, and convert these leads into future sales.

How to Enable WooCommerce Catalog Mode Without Plugin

Enabling WooCommerce Catalog Mode is a complex and time-consuming task. You need to write custom code and paste it to the appropriate section. That means you must be very careful with each step.

Before you start the process, make sure you have a backup of your store, and it’s better if you create a child theme and start the customization process. Let’s dive into the steps –

Step 1: Edit Theme’s Function.php

From your site dashboard, go to Appearance > Theme File Editor. Locate and select the functions.php from the right-hand side. You have to add custom code here to enable WooCommerce catalog mode.

Step 2: Remove Add to Cart

You need to remove the Add-to-Cart button to function in the WooCommerce catalog mode properly. There are two ways you can remove the Add-to-Cart button –

Using a Hook

Add the following code to your child theme’s function.php file.

// Remove the Add to Cart button on the shop page and product category pages

remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);

// Remove the Add to Cart button on the single product page

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);

Using CSS

Open your theme’s style.css file and add the following code.

/* Hide the Add to Cart button on the shop page */

.woocommerce .product a.button {
display: none;
}

/* Hide the Add to Cart button on the single product page */

.single-product .product .single_add_to_cart_button {
display: none;
}

Step 3: Hide Your Products Prices

Hiding prices is another way to enable the WooCommerce catalog mode.

Using Hooks

This method completely removes the price display in your online store. Add the following code to your functions.php file.

// Hide product prices on all pages 

add_filter('woocommerce_get_price_html','hide_product_price', 10, 2); function hide_product_price( $price, $product ) { return ''; }

Using CSS

Open your theme’s style.css file and add the following CSS code.

/* Hide prices on the shop page and single product page */

.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
display: none;
}

Step 4: Implement Request Price Button

First, remove the default Add-to-Cart button using a hook in your child theme’s functions.php file. Add Request Price button for shop and category pages. Here is the code to add the Request Price button on your WooCommerce shop and category page –

// Add Request Price button on the shop page and category pages

add_action('woocommerce_after_shop_loop_item', 'add_request_price_button', 10);

function add_request_price_button() {
global $product;
echo 'Request Price';
}

For the Single Product Page

// Add Request Price button on the single product page

add_action('woocommerce_single_product_summary', 'add_request_price_button_single', 30);

function add_request_price_button_single() {
global $product;
echo 'Request Price';
}

Step 5: Add a Contact Form to Reach Out

Create the Contact Form

Start by creating the contact form and add it to a WordPress page. Add HTML to the page content to create a simple contact form. You need to choose the custom HTML block from WordPress Editor and paste your code there –

<form id="custom-contact-form" method="post">
	<p>
    	<label for="contact-name">Your Name (required)</label><br />
    	<input type="text" id="contact-name" name="contact-name" required />
	</p>
	<p>
    	<label for="contact-email">Your Email (required)</label><br />
    	<input type="email" id="contact-email" name="contact-email" required />
	</p>
	<p>
    	<label for="contact-subject">Subject</label><br />
    	<input type="text" id="contact-subject" name="contact-subject" />
	</p>
	<p>
    	<label for="contact-message">Your Message</label><br />
    	<textarea id="contact-message" name="contact-message" 
        required></textarea>
	</p>
	<p>
    	<input type="submit" name="contact-submit" value="Send" />
	</p>
</form>

Handle Contact Form Submission

Next, add the PHP code to handle form submissions. You can do this by adding a custom function to your theme’s functions.php file. Add the following code to handle the form submission.

function handle_custom_contact_form() {
    if (isset($_POST['contact-submit'])) {

        // Sanitize form values
        $name = sanitize_text_field($_POST['contact-name']);
        $email = sanitize_email($_POST['contact-email']);
        $subject = sanitize_text_field($_POST['contact-subject']);
        $message = sanitize_textarea_field($_POST['contact-message']);        
       
       // Validate email
        if (!is_email($email)) {
            echo '<p style="color: red;">Invalid email address.</p>';
            return;
        }        
       
       // Prepare email content
        $to = get_option('admin_email');
        $headers = array('Content-Type: text/html; charset=UTF-8');
        $body = "Name: $name<br>Email:$email<br>Subject: 
        $subject<br>Message:<br>$message";        
      
       // Send email
        wp_mail($to, 'Contact Form Submission: ' . $subject, $body, $headers);        
      
      // Display success message
        echo '<p style="color: green;">Thank you for your message. 
        We will get back to you soon.</p>';
    }
}
       add_action('init', 'handle_custom_contact_form');

Step 6: Customize WooCommerce Catalog Appearance

To further improve the look of your WooCommerce catalog, you can add custom CSS to your theme by following the steps below –

• Navigate to Appearance > Customize and click on Additional CSS.
• Add your custom CSS style to the catalog as per your preferences.
• When you’re finished, click on the Publish button to save your changes.

Finally, visit your WooCommerce store to ensure that the catalog mode is working properly. Remember, you’ll be working with the code. So, you must be careful about writing the codes to avoid any errors.

Wrapping Up

WooCommerce catalog mode is a cost-effective and powerful way to customize your WooCommerce store. By making a few simple adjustments to your WooCommerce functionality, you can easily transform your eCommerce site into a stunning product catalog.

Use these strategies described in this blog to enable WooCommerce catalog mode and ensure your business remains agile and adaptable in the ever-evolving digital marketplace.

Frequently Asked Questions (FAQs)

Q1. Can I enable WooCommerce Catalog mode?

Yes. For this, you need to add some codes to your theme’s functions.php file.

Q2. How do I use WooCommerce as a catalog only?

To use WooCommerce as a catalog, you have to switch your WooCommerce store into catalog mode. To enable catalog mode you have to add custom codes in your theme’s functions.php file to make the below changes:

• Hide the WooCommerce Add to Cart button and Price.
• Replace Add to Cart with Request a Quote button.
• Hide the Payment Methods and Place Order button.
• Verify the changes you made to your WooCommerce store.

Q3. How do I enable WooCommerce Catalog mode in WooCommerce?

Follow the below steps to enable WooCommerce catalog mode:

• Open your theme’s functions.php file.
• Remove Add to Cart from the WooCommerce shop.
• Hide your product prices.
• Implement the Request Price button.
• Add a contact form for reaching out.
• Customize the WooCommerce appearance.