{"id":27480,"date":"2024-08-28T14:37:48","date_gmt":"2024-08-28T08:37:48","guid":{"rendered":"https:\/\/codexpert.io\/?p=27480"},"modified":"2026-05-14T15:31:46","modified_gmt":"2026-05-14T09:31:46","slug":"woocommerce-catalog-mode-without-plugin","status":"publish","type":"post","link":"https:\/\/codexpert.io\/blog\/woocommerce-catalog-mode-without-plugin\/","title":{"rendered":"Enable WooCommerce Catalog Mode Without Plugin"},"content":{"rendered":"
<\/div>\n

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.<\/p>\n\n\n\n

In this article, we\u2019ll explore how to enable WooCommerce catalog mode without using a plugin. Want to know more? Let’s get started! <\/p>\n\n\n\n

What is WooCommerce Catalog Mode? <\/h2>\n\n\n\n

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. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Key Features of WooCommerce Catalog Mode<\/h2>\n\n\n\n

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

No Online Purchase<\/h3>\n\n\n\n

The primary feature of WooCommerce Catalog Mode is the disablement of online purchase functionality. This means the \u201cAdd to Cart<\/strong>\u201d button and other ecommerce elements are removed or hidden from the product pages. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Display Product Information<\/h3>\n\n\n\n

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. <\/p>\n\n\n\n

By providing detailed information, customers can thoroughly understand the product\u2019s features, benefits, and usage. This ensures that potential buyers have all the necessary information to make informed decisions, even if they can\u2019t purchase directly from the website.<\/p>\n\n\n\n

Wholesale or B2B Sales<\/h3>\n\n\n\n

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. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Website Maintenance<\/h3>\n\n\n\n

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. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Lead Collection<\/h3>\n\n\n\n

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. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

How to Enable WooCommerce Catalog Mode Without Plugin<\/h2>\n\n\n\n

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. <\/p>\n\n\n\n

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\u2019s dive into the steps –<\/p>\n\n\n\n

Step 1: Edit Theme\u2019s Function.php<\/h3>\n\n\n\n

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

Step 2: Remove Add to Cart<\/h3>\n\n\n\n

You need to remove the Add-to-Cart<\/strong> button to function in the WooCommerce catalog mode properly. There are two ways you can remove the Add-to-Cart<\/strong> button –<\/p>\n\n\n\n

Using a Hook<\/h4>\n\n\n\n

Add the following code to your child theme\u2019s function.php<\/strong> file.<\/p>\n\n\n\n

\/\/ Remove the Add to Cart button on the shop page and product category pages\n\nremove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);\n\n\/\/ Remove the Add to Cart button on the single product page\n\nremove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);<\/code><\/pre>\n\n\n\n
Using CSS<\/h4>\n\n\n\n
Open your theme\u2019s style.css<\/strong> file and add the following code.<\/p>\n\n\n\n
\/* Hide the Add to Cart button on the shop page *\/\n\n.woocommerce .product a.button {\ndisplay: none;\n}\n\n\/* Hide the Add to Cart button on the single product page *\/\n\n.single-product .product .single_add_to_cart_button {\ndisplay: none;\n}<\/code><\/pre>\n\n\n\n
Step 3: Hide Your Products Prices<\/h3>\n\n\n\n
Hiding prices is another way to enable the WooCommerce catalog mode.<\/p>\n\n\n\n
Using Hooks<\/h4>\n\n\n\n
This method completely removes the price display in your online store. Add the following code to your functions.php<\/strong> file.<\/p>\n\n\n\n
\/\/ Hide product prices on all pages \n\nadd_filter('woocommerce_get_price_html','hide_product_price', 10, 2); function hide_product_price( $price, $product ) { return ''; }<\/code><\/pre>\n\n\n\n
Using CSS<\/h4>\n\n\n\n
Open your theme\u2019s style.css<\/strong> file and add the following CSS code.<\/p>\n\n\n\n
\/* Hide prices on the shop page and single product page *\/\n\n.woocommerce .price,\n.woocommerce div.product p.price,\n.woocommerce div.product span.price {\ndisplay: none;\n}<\/code><\/pre>\n\n\n\n
Step 4: Implement Request Price Button<\/h3>\n\n\n\n
First, remove the default Add-to-Cart<\/strong> button using a hook in your child theme\u2019s functions.php<\/strong> file. Add Request Price<\/strong> button for shop and category pages. Here is the code to add the Request Price<\/strong> button on your WooCommerce shop and category page –<\/p>\n\n\n\n
\n\/\/ Add Request Price button on the shop page and category pages\n\nadd_action('woocommerce_after_shop_loop_item', 'add_request_price_button', 10);\n\nfunction add_request_price_button() {\nglobal $product;\necho 'Request Price';\n}\n<\/code><\/pre>\n\n\n\n
For the Single Product Page<\/h4>\n\n\n\n
\n\n\/\/ Add Request Price button on the single product page\n\nadd_action('woocommerce_single_product_summary', 'add_request_price_button_single', 30);\n\nfunction add_request_price_button_single() {\nglobal $product;\necho 'Request Price';\n}<\/code><\/pre>\n\n\n\n
Step 5: Add a Contact Form to Reach Out<\/h3>\n\n\n\n
Create the Contact Form<\/h4>\n\n\n\n
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 –<\/p>\n\n\n\n
<form id=\"custom-contact-form\" method=\"post\">\n\t<p>\n    \t<label for=\"contact-name\">Your Name (required)<\/label><br \/>\n    \t<input type=\"text\" id=\"contact-name\" name=\"contact-name\" required \/>\n\t<\/p>\n\t<p>\n    \t<label for=\"contact-email\">Your Email (required)<\/label><br \/>\n    \t<input type=\"email\" id=\"contact-email\" name=\"contact-email\" required \/>\n\t<\/p>\n\t<p>\n    \t<label for=\"contact-subject\">Subject<\/label><br \/>\n    \t<input type=\"text\" id=\"contact-subject\" name=\"contact-subject\" \/>\n\t<\/p>\n\t<p>\n    \t<label for=\"contact-message\">Your Message<\/label><br \/>\n    \t<textarea id=\"contact-message\" name=\"contact-message\" \n        required><\/textarea>\n\t<\/p>\n\t<p>\n    \t<input type=\"submit\" name=\"contact-submit\" value=\"Send\" \/>\n\t<\/p>\n<\/form>\n\n<\/code><\/pre>\n\n\n\n
Handle Contact Form Submission<\/h4>\n\n\n\n
Next, add the PHP code to handle form submissions. You can do this by adding a custom function to your theme\u2019s functions.php<\/strong> file. Add the following code to handle the form submission. <\/p>\n\n\n\n
function handle_custom_contact_form() {\n    if (isset($_POST['contact-submit'])) {\n\n        \/\/ Sanitize form values\n        $name = sanitize_text_field($_POST['contact-name']);\n        $email = sanitize_email($_POST['contact-email']);\n        $subject = sanitize_text_field($_POST['contact-subject']);\n        $message = sanitize_textarea_field($_POST['contact-message']);        \n       \n       \/\/ Validate email\n        if (!is_email($email)) {\n            echo '<p style=\"color: red;\">Invalid email address.<\/p>';\n            return;\n        }        \n       \n       \/\/ Prepare email content\n        $to = get_option('admin_email');\n        $headers = array('Content-Type: text\/html; charset=UTF-8');\n        $body = \"Name: $name<br>Email:$email<br>Subject: \n        $subject<br>Message:<br>$message\";        \n      \n       \/\/ Send email\n        wp_mail($to, 'Contact Form Submission: ' . $subject, $body, $headers);        \n      \n      \/\/ Display success message\n        echo '<p style=\"color: green;\">Thank you for your message. \n        We will get back to you soon.<\/p>';\n    }\n}\n       add_action('init', 'handle_custom_contact_form');<\/code><\/pre>\n\n\n\n
Step 6: Customize WooCommerce Catalog Appearance<\/h3>\n\n\n\n
To further improve the look of your WooCommerce catalog, you can add custom CSS to your theme by following the steps below – <\/p>\n\n\n\n
    \n
  • Navigate to Appearance > Customize<\/strong> and click on Additional CSS<\/strong>.<\/li>\n\n\n\n
  • Add your custom CSS style to the catalog as per your preferences.<\/li>\n\n\n\n
  • When you\u2019re finished, click on the Publish<\/strong> button to save your changes.<\/li>\n<\/ul>\n\n\n\n
    <\/div>\n\n\n\n
    Finally, visit your WooCommerce store to ensure that the catalog mode is working properly. Remember, you\u2019ll be working with the code. So, you must be careful about writing the codes to avoid any errors.<\/p>\n\n\n\n
    Wrapping Up<\/h2>\n\n\n\n
    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. <\/p>\n\n\n\n
    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.<\/p>\n\n\n\n
    Frequently Asked Questions (FAQs)<\/h2>\n\n\n\n
    Q1. Can I enable WooCommerce Catalog mode?<\/h3>\n\n\n\n
    Yes. For this, you need to add some codes to your theme\u2019s functions.php <\/strong>file.<\/p>\n\n\n\n
    Q2. How do I use WooCommerce as a catalog only?<\/h3>\n\n\n\n
    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\u2019s functions.php file to make the below changes:<\/p>\n\n\n\n
      \n
    • Hide the WooCommerce Add to Cart <\/strong>button and Price<\/strong>.<\/li>\n\n\n\n
    • Replace Add to Cart<\/strong> with Request a Quote<\/strong> button.<\/li>\n\n\n\n
    • Hide the Payment Methods<\/strong> and Place Order<\/strong> button.<\/li>\n\n\n\n
    • Verify the changes you made to your WooCommerce store.<\/li>\n<\/ul>\n\n\n\n
      <\/div>\n\n\n\n
      Q3. How do I enable WooCommerce Catalog mode in WooCommerce?<\/h3>\n\n\n\n
      Follow the below steps to enable WooCommerce catalog mode:<\/p>\n\n\n\n
        \n
      • Open your theme\u2019s functions.php<\/strong> file.<\/li>\n\n\n\n
      • Remove Add to Cart<\/strong> from the WooCommerce shop.<\/li>\n\n\n\n
      • Hide your product prices.<\/li>\n\n\n\n
      • Implement the Request Price<\/strong> button.<\/li>\n\n\n\n
      • Add a contact form for reaching out.<\/li>\n\n\n\n
      • Customize the WooCommerce appearance.<\/li>\n<\/ul>\n
        <\/div>","protected":false},"excerpt":{"rendered":"
        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\u2019ll explore how to enable WooCommerce catalog mode without using a plugin. Want to know more? […]<\/p>\n","protected":false},"author":6,"featured_media":27842,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[14],"tags":[26],"class_list":["post-27480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce","tag-woolementor"],"_links":{"self":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/27480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/comments?post=27480"}],"version-history":[{"count":1,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/27480\/revisions"}],"predecessor-version":[{"id":33238,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/27480\/revisions\/33238"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/media\/27842"}],"wp:attachment":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/media?parent=27480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/categories?post=27480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/tags?post=27480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}