WooCommerce: Replace “Add To Cart” with “Ask” Form for Custom Products

When you Google the phrase “replace Add to Cart WooCommerce” (or any variants thereof), there are a lot of SERP’s suggesting the same way of hiding/not displaying the Add To Cart button. The idea is to remove the “woocommerce_template_single_add_to_cart” action.

Replace “Add to Cart” for Custom Products

However, in my case, I wanted to do this for only certain specific products. I have products that are marked as “Custom”, i.e. not stocked products. These are products that can be customized as per the customer/client. They usually take 6-8 weeks from order to delivery. The idea for the landing pages for these “Custom” products is not for them to make the purchase outright, but get them to contact the store owner. This way, the process of designing the custom product can be taken offline.

How to Designate a Product as “Custom”

The first step is to identify the products as “Custom” in WooCommerce. Following this guide by Remy Corson, I added a Checkbox under the General tab in the Product Edit Screen. When this Checkbox is checked, it means that the Product is “Custom”.

"Custom" product
“Custom” product

As you can see in the image above, this product is defined as “Custom”.

Next up, we have to hook into the correct action for marking all “Custom” products as not being allowed for Purchase. We will use the is_purchaseable() hook for that purpose.

Alternative CTA for “Custom” Products

I wanted a form to take the place of the “Add To Cart” button. In my case, I use Contact Form 7 for my forms. I just added a small form specifically for the purpose of this CTA. The visitors will see this form in place of the Add to Cart button. The store owner receives an email containing the lead.

We are simply checking if the Product is “Custom”. If it is “Custom”, we will set it as being non-purchaseable. This will hide the “Add To Cart” button for such “Custom” products.

Full Code Listing

Here is the full code. Notice that 2 other custom fields were added. You do not need those, so you can easily delete the relevant lines of code.

https://gist.github.com/amitramani/794f51b7a56bd4e4d884283dc98cce0e

Questions/Comments? Type away in the comments below.


Posted

in

by

Comments

17 responses to “WooCommerce: Replace “Add To Cart” with “Ask” Form for Custom Products”

  1. Shaiful Avatar

    Great tutorial! Save my day!

  2. Rank My Hub Avatar

    You saved me a lot of time, thanks for the code snippet.. Keep up the good work.. Thanks a lot.

  3. Dennis Johansen Avatar
    Dennis Johansen

    This is brilliant – thank you very much!

    Is it possible to either reverse the checked option or by default have it checked?

    Thanks

    1. Amit Ramani Avatar

      Hi Dennis
      The parameter to send to the “woocommerce_wp_checkbox( $field )” function is “$field[‘value’]”.

      Here is the full code for keeping the Checkbox checked by default. To uncheck the checkbox, simply set the ‘value’ parameter to ‘no’ or just omit the ‘value’ parameter.

      woocommerce_wp_checkbox(
      array(
      ‘id’ => ‘_custom_product’,
      ‘wrapper_class’ => ”,
      ‘label’ => __(‘Custom Order Product’, ‘woocommerce’ ),
      ‘value’ => ‘yes’,
      ‘description’ => __( ‘Product can be customized’, ‘woocommerce’ )
      )
      );

      Hope that helps!

      1. Dennis Johansen Avatar
        Dennis Johansen

        Brilliant will try it out – thank you very much 8)

  4. Rashid Avatar
    Rashid

    Im really new to php so where do i place the give codes?? before or after the ones that are already there?

    1. Amit Ramani Avatar

      You can add all this code to your theme’s ‘functions.php’ file. HTH

  5. Jeff Avatar
    Jeff

    I want to change the text in the “add to cart” button to “Request Price” (this is for a jewlery site), and have the contact form pop up after the button is clicked. Is this possible?

    1. Amit Ramani Avatar

      Hi Jeff
      Yes, it is possible, but requires custom programming beyond the scope of this blog post. It will require JS code depending on how/where you want the Contact Form to pop up. Changing the text to “Request Price” is very easy.

  6. Garry Avatar
    Garry

    This is fantastic, just what I have been looking for. Clean and functional, thanks a lot! Although I’m struggling to hide the add to cart on a variable product page (it still shows with the custom checkbox checked) Any tips?

    1. Amit Ramani Avatar

      Hi Garry
      I am not sure I am following your issue. The code applies at the product level, so it covers all variations of a product.
      Am I not understanding your question? Have a link to share?

      1. Garry Avatar
        Garry

        No problem Amit, I have set up a test site to demonstrate, clean WP and WooCommerce with Storefront theme : http://www.fltest.co.za/woo-test

        I have set up a simple product and a variable product which has various drop-down sizes. I have added your code the the child theme functions.php and enabled the Custom checkbox on both products. Notice how it does not hide the cart on the Variable product, only the Simple product.

        1. Amit Ramani Avatar

          Hi Garry
          Sorry it took me so long to check on this. I just tried your link, but it leads to a 404.

  7. Themepi Avatar

    Thank you very much for the code. It works perfectly with the latest version of woocommerce 3.2.6 on my site.

  8. Katey Leedham Avatar
    Katey Leedham

    The link to Remy Carsons guide on adding a checkbox under the General tab in the Product Edit Screen is missing. What code do I need to add that custom checkbox?

    1. Amit Ramani Avatar

      Not sure why you did not find the code to add the checkbox, but here is the gist.
      https://gist.github.com/corsonr/7020313#file-gistfile1-php

  9. Hamada Avatar

    Fantastic!! Brilliant piece of code. Thanks <3

Leave a Reply

Your email address will not be published. Required fields are marked *