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”.

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

June 4, 2016

Wordpress

Amit Ramani

Tags:

Contact Form 7, ecommerce, woocommerce

Comments

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

Shaiful
April 18, 2017
Great tutorial! Save my day!
Reply
Rank My Hub
May 23, 2017
You saved me a lot of time, thanks for the code snippet.. Keep up the good work.. Thanks a lot.
Reply
Dennis Johansen
September 7, 2017
This is brilliant – thank you very much!
Is it possible to either reverse the checked option or by default have it checked?
Thanks
Reply
1. Amit Ramani
  September 7, 2017
  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!
  Reply
  1. Dennis Johansen
    September 12, 2017
    Brilliant will try it out – thank you very much 8)
    Reply
Rashid
October 7, 2017
Im really new to php so where do i place the give codes?? before or after the ones that are already there?
Reply
1. Amit Ramani
  November 2, 2017
  You can add all this code to your theme’s ‘functions.php’ file. HTH
  Reply
Jeff
November 7, 2017
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?
Reply
1. Amit Ramani
  November 8, 2017
  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.
  Reply
Garry
January 11, 2018
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?
Reply
1. Amit Ramani
  January 11, 2018
  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?
  Reply
  1. Garry
    January 12, 2018
    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.
    Reply
    1. Amit Ramani
      April 15, 2018
      Hi Garry
      Sorry it took me so long to check on this. I just tried your link, but it leads to a 404.
      Reply
Themepi
January 24, 2018
Thank you very much for the code. It works perfectly with the latest version of woocommerce 3.2.6 on my site.
Reply
Katey Leedham
November 2, 2018
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?
Reply
1. Amit Ramani
  November 11, 2018
  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
  Reply
Hamada
June 18, 2021
Fantastic!! Brilliant piece of code. Thanks <3
Reply