A client asked to show a “Product Inquiry” button on the Single Product Page which would display, upon click, a Contact Form with an automatically populated subject (Contact Form 7 plugin must be installed of course). Here’s how I did it!
PHP Snippet: Add CF7 to the Single Product Page – WooCommerce
/**
* @snippet Show CF7 Form @ WooCommerce Single Product
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 5
* @community https://businessbloomer.com/club/
*/
add_action( 'woocommerce_after_add_to_cart_form', 'bbloomer_woocommerce_cf7_single_product', 30 );
function bbloomer_woocommerce_cf7_single_product() {
echo '<button type="submit" id="trigger_cf" class="single_add_to_cart_button button alt">Product Inquiry</button>';
echo '<div id="product_inq" style="display:none">';
echo do_shortcode('[paste_your_contact_form_7_shortcode_here]');
echo '</div>';
wc_enqueue_js( "
$('#trigger_cf').on('click', function(){
if ( $(this).text() == 'Product Inquiry' ) {
$('#product_inq').css('display','block');
$('input[name=\'your-subject\']').val('" . get_the_title() . "');
$('#trigger_cf').html('Close');
} else {
$('#product_inq').hide();
$('#trigger_cf').html('Product Inquiry');
}
});
" );
}
Is There a Plugin For That?
If you’d love to code but don’t feel 100% confident with PHP, I decided to look for a reliable plugin that achieves the same result.
Actually, in this case, I wrote a full tutorial – it covers many plugin alternatives and gives you screenshots and links. Here it is: https://businessbloomer.com/enable-woocommerce-customers-request-quote/
But in case you hate plugins and wish to code (or wish to try that), then keep reading 🙂
How do I hide the View cart text that shows up next to the button after the button is clicked?
Hello Ron! Can I have a screenshot please?
I was able to fix it by changing the 1st line to:
Cool
Thanks Rodolofo for your great articles.
Here is a customised version for anyone using Quform 2 or Gravity Forms, or any other form builder that provides a shortcode. I also added spacing to lower the form position nicely. The code below is a version is for Quform 2, for a form named “Product Question”.
After building your form, replace the shortcode below ‘[quform id=”1″ name=”Product Question”] with your own shortcode.
Also replace every instance in the code below of “Product Question” with the exact name of your form in your shortcode, so they all match.
/** * @snippet Show Quform 2 Product Question Form @ WooCommerce Single Product * add this to your child functions.php */ add_action( 'woocommerce_after_add_to_cart_form', 'cys_woocommerce_quform_single_product', 30 ); function cys_woocommerce_quform_single_product() { echo '<button type="submit" id="trigger_cf" class="single_add_to_cart_button button alt">Product Question</button>'; echo '<div id="product_question" style="display:none">'; echo do_shortcode('[quform id="1" name="Product Question"]'); echo '</div>'; wc_enqueue_js( " $('#trigger_cf').on('click', function(){ if ( $(this).text() == 'Product Question' ) { $('#product_question').css('display','block'); $('#product_question').css('margin-top','100px'); $('#trigger_cf').html('Close'); } else { $('#product_question').hide(); $('#trigger_cf').html('Product Question'); } }); " ); }To automatically add the Woocommerce Product Name into the form, simply populate the Default Value in your form builder with the Post Title variable.
For Quform 2
Use {post|post_title} for your Product field default value.
For Gravity Forms
{embed_post:post_title} for your Product field default value.
Thanks!
Thanks, this is a great snippet.
Is it possible to link these to a specific category?
Thank you Niek. I suggest you take a look at “conditional logic”: https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/. Enjoy 🙂
Doesn’t look like this still works with latest WP/Contact Form 7. The product title appears outside of the contact form, instead of filling the field.
Hey Damian, that’s weird as I go filling up the input that has a name = “your-subject”, so not sure why it goes outside in your case. Working fine here
I’m having the same issue as Damian. I’ve tried some fixes, such as giving the form field an ID attribute and then using that ID attribute to set the value instead of the name attribute but with no luck.
It’ll probably require custom troubleshooting, as it works fine on my end
Hi there
I am having the same problem.
the product title is outside the box, then the subject line is empty when clicked.
Amy
You’re right, bug fixed!
thank you for fixing it.
I worked around this and put a pop up contact form on the product page (although it doesn’t have the product title)
I may change over.
Amy
Cool
hello Rodolfo, last year someone asked you about changing different priorities other than “30” to position the form where needed. No reply followed and I was wondering if the form could be put inside a new tab (of the “description” ones) instead.
Try with this new version!
I believe the form works all right (I tested it). I just wish to position it elsewhere and I think the best would be in an extra description tab. Do you have some snippet that would help?
This could help https://www.businessbloomer.com/woocommerce-related-products-tab/
Hi Rudoflo, thank you so much for this contribution. After all these years still valuable. I used a plugin for this kind of functionality but it stopped working today and I couldn’t solve it (yet). So I stumbled upon your site. Create work.
I had to make a small change because I disabled the “Add To Cart”-Button. So I changed the action to “woocommerce_single_product_summary” in order to show the button in the summary of the product.
One thing I couldn’t get to work in this code was the [php]$(‘input[name=\”your-subject\”]’).val(”);[PHP]. This part literly showed the value between the single quotes in the value-funtion as the subject (so it showed ” as subject instead of the current product). I was able to solve this using the document.title value [php]$(‘input[name=\”product-name\”]’).val(document.title);[php]. This works, but I was wondering why the PHP code doesn’t work in my case, any ideas?
But still, it saved my day.
Thanks Stephan! That might be a bug, I’ve now changed the code to use single quotes, try again. Of course, your CF7 input field must have a “your-subject” name, otherwise you must change that to the correct name
Hi Rodolfo,
my WP is 5.7.1 and the subject field is being filled with
I tried the Stephan way’s but don’t works too.
Thanks
Use:
get_the_title($post->ID)
Hi Rodolfo
Thank you very much for all the tutorials you are publishing here. It’s really helpful.
I have also included this snippet in my website.
However, when the user clicks on “Product Inquiry” the form is shown but the product is added to the cart as well.
As this is not how it should work, I wonder what the reason is ?
Thank you in advance.
Good point. I’ve change the hook to “woocommerce_after_add_to_cart_form”, let me know if it works now
It works, thank you Rodolfo!
Cool!
Hi Rodolfo,
First of all, congrats on this website this is very useful for woocommerce developer. I want to ask a question that how can we calculate the no of inquiry for particular product.
Hey Sourabh, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
can we use
‘woocommerce_product_meta_start’ filter hooks ?
add_filter( ‘woocommerce_product_meta_start’, ‘woo_enquiry_form’ );
function woo_enquiry_form() {
echo ” . __( ‘Do you have a question?’, ‘woocommerce’ ) . ”;
echo ” . __( ‘Drop us a line by compiling the form below.
We will be more than happy to reply to any of your questions!’, ‘woocommerce’ ) . ”;
echo do_shortcode( ‘[your_form_shortcode_here]’ );
}
Yeah but need add_action() there
Love the code it’s perfect.
One question, can it be modified if you have a variable product the variations show in the subject heading
Thanks
Hi Nick, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hello, I have also modified a piece of code so that the form is displayed only if the product is out of stock.
But I can’t handle how to make the form disappear when the customer chooses a product variant that is not available.
Is not available I really lack the strength to look for a solution.
Greetings Kris
Hi Kris, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
This snippet is working partially as the price get disappeared when I add this code, but the “Product inquiry / Request a quote” button and form comes up. I guess there is nothing wrong with the code but it might be position? Since the area on product page where the prices is shown get smaller because of adding this “product inquiry form”.
As you wrote “You can use different priorities other than “30” to position the form where you need it”. What does this 30 means?
Now this code is working, I just cleared the cache.
But this is still hiding “regular prices” and only showing request for quote button.
This is showing both quote button and prices for “the sales items”.
Why would this snippet hide regular prices?
This does not hide prices. Please test with a different theme and see if it works ok
Hi Rodolfo,
This problem is only with one product. When I update products, then the request a code snippet is working.
Thank you alot for this snippet!! Stay blessed!
This platform is the best niche platform I came across for woocommerce codes.
Thank you!
unfortuanly the yith request code does not work with elementor. i wish it did. if its working for you please let me know
Ask YITH, because they’ve recently added Elementor compatibility to most of their plugins
Nice one!
Any ideas how to get the Contactform 7 form on a new page or in modal (pop-up) ?
Hey Chis, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Thank you for this ! Is it possible to add SKU in the subject line with another function before the_title?
Yavuz, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
The button installed. But when I click I get this: [paste_your_contact_form_7_shortcode_here]. I’ve used Contact Form 7 for years, but where does this go? What am I missing?
Also, another thing: I created a custom theme but need a link from an item’s page to the item’s parent gallery. Do you have any advice for that? Thanks so much. This site is wonderful!
Nevermind. I see it. I’m still interested if you have a tutorial on that gallery link. Thanks!
Great! I’m afraid that’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi
I have been searching and searching for something similar, where if a product requires a ‘REQUEST PRICE’ that replaces the WooCommerce price, an option to fill in a form relating to that product on a product by product basis.
I also need it to work with Ninja Forms or Gravity Forms, would this be possible?
Many thanks
Hi Dave, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hello! thanks for your lessons! very beautiful! I inserted the snippet. I see the button but the cf7 doesn’t open
Ciao Nicola, thanks so much for your comment! I just retested this on the latest version of WooCommerce and it still works. Unfortunately this looks like custom troubleshooting work and I cannot help here via the blog comments. Thanks a lot for your understanding! ~R
I made a tutorial based on Rodolfo’s above tutorial.
https://easywebdesigntutorials.com/woocommerce-out-of-stock-product-inquiry-form/
I added:
Conditional logic to only show the button on product pages that have products out of stock.
Stock labels.
Removed the button to show an open form.
Instead of Contact Form 7 I am using Caldera Forms (makes no difference).
Nice!
I want to add sku no with product automatically on each product what to do?
Hi Riddesh, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hello,
It works great! I am just having an issue with translating. I am using translatepress to translate my website to Portuguese(secondary language).
When the secondary language is active, the button doesn’t work because the code you’re using to show/hide the button is based on the button name:
if (jQuery(this).text() == ‘Budget Request’) {
On the translated page the Budget Request is translated, thus nothing happens. Correct?
How could I adapt this to also work with the translated button?
Thank you in advance,
Best Regards,
Daniel
Hi Daniel, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hello Rodolfo,
I’m not sure why but we’re getting a strange double button situation happening for the above code. Any chance you can take a look?
Thanks in advance,
brad
I take you fixed it 🙂
I want to add product inquiry for specific products not for all products, this snippet works for all the products, Kindly can you help me with that
Hi Bilal, I suggest you take a look at “conditional logic”: https://businessbloomer.com/conditional-logic-woocommerce-tutorial/ and https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/. Let me know 🙂
Awesome! Thank you so much!
You’re welcome!
Great snippet, exactly what I’m looking for 🙂
Could you help me with some customisation regarding the use in a shop with 2 languages?
Thanks a lot in advance!
Thank you Branka 🙂 Yes, this is possible – if you’d like to get a quote, feel free to contact me here.
Hello! thanks a lot for this snippet, It was really useful, however I’m having some trouble trying to make the page scroll to the whole contact form once I click the button, the thing is the form doesn’t appear in the viewport as the button is in the bottom section of my page, is there a way I can make the page scroll right to the form space?
thanks
Hey Samuel, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
Hello,
Thanks for such a nice code. It worked but I don’t want the product inquiry button which open’s the form, I want the form to open always, please let me know how can I do that.
Thanks in advance.
Hey Adil, thanks for your comment! This other article will help: https://businessbloomer.com/enable-woocommerce-customers-request-quote/ (see the first snippet)
amazing code!!! here is something that maybe you can help me:
The text on the button is Product Inquiry, but i changed it to Can’t find your size. Now when you click on it, it shows Product Inquiry and the you have to click again for the form to show. Can i remove that Product Inquiry and click on the button once?
Thanks!
Hey Cosmin, thanks for your comment! Not sure I understand fully, but make sure to change the jQuery part as well. Also make sure to escape the single quote inside “Can’t”. Hope this helps
Hi there,
This is great, and exactly what I need, but I can not get it to work. I’m not sure why, but it seems like the jQuery isnt working. If I take the display:none out then it displays the form. I can close the form by clicking the button, but it wont reappear when I click again. Also, it isn’t sending the Post title through on the form. Any idea what the issue could be? I’m using the Avada theme.
Hi Lizzy, thanks for your comment 🙂 It might be a jQuery conflict or there might be some other problem – sorry but I can’t help here with custom troubleshooting. Thanks for your understanding, R
Nice snippet. Works well.
But only for one language and specific button text.
Can You help me to make it work with WPML or with any button text.
Is it possable to triger vbutton by class or id – not by text?
I founded it:
// To show Contact Form 7 on Button Click event check: // https://businessbloomer.com/woocommerce-show-inquiry-form-single-product-page-cf7 add_action( 'woocommerce_single_product_summary', 'bbloomer_on_click_show_cf7_and_populate', 40); function bbloomer_on_click_show_cf7_and_populate() { $phpLabel = __('Product Inquiry'); $closeLabel = __('Close'); ?> <script type="text/javascript"> jQuery('#trigger_cf').on('click', function(){ if ( jQuery(this).text() == '<?php echo $phpLabel; ?>' ) { jQuery('#product_inq').css("display","block"); jQuery('input[name="your-subject"]').val('<?php the_title(); ?>'); jQuery("#trigger_cf").html('<?php echo $closeLabel; ?>'); } else { jQuery('#product_inq').hide(); jQuery("#trigger_cf").html('<?php echo $phpLabel; ?>'); } }); </script> <?php }🙂
Hi Rodolfo! Second code snippet I’ve gotten from you and it works like a charm! Thank you very much for this code and for keeping my number of plugins down 😉
One small thing though, I tried to use reCAPTCHA in my form, but it doesn’t seem to work. The reCAPTCHA confirmation button doesn’t appear when I expand the form and when I try to submit my form I get the CF7 error “There was an error trying to send your message. Please try again later.”. Do you have any idea of what the problem might be?
Thank you Fhilip, thanks so much for your comment! Unfortunately this looks like custom troubleshooting work and I cannot help here via the blog comments. Thanks a lot for your understanding! ~R
Tried the code you provided all is good however the contact form is not sending to my email, did i miss something? please help me
Feels like you have a CF7 error – check your CF7 form settings 🙂
Very useful – thank You!
🙂
Hey man, you ROCKS!!!! Thank you very much for your contribution!!!
Thank you Edson!
hello, does anyone know how to enable it only for registered users?
thank you
Thanks for your comment Mario! You can use the “is_user_logged_in()” WordPress function to check that 🙂
Hi, I want to ask that how you create that subject field in contact form 7?
Amruta, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
Hello there,
Quick question in order to change the background color of the button I am trying to add the following code but it just not change the color. Any tips?
.single_add_to_cart_button {
background-color: #4CAF50; /* Green */
}
Thanks a lot for your help! It’s pretty awesome!
Thanks for your comment Leonidas! This is custom to your theme so I cannot help here 🙂
Hello friend, yes it’s working but there is a small bug button
PRODUCT INQUIRY continues with the reading icon to rotate. Thank you
Hey Marco, thanks so much for your comment! Unfortunately this is custom troubleshooting work and I cannot help here via the blog comments – the snippet works on my website. Thanks a lot for your understanding! ~R
2 Days Took me to find the best place for WC snippets and know-how´s
Congratulations to all of you guys!
Thank you for your very useful information. Thanks for sharing your knowledge!
BusinessBloomer Rocks!
Ahah thanks Vale 🙂
Thanks Rodolfo! This is really useful. I have used this for a client website. I am not so new on wordpress but on woocommerce I am still a newbie. I can say I didn’t realize I can do this until I found your site. More power to you!
Cheers Bob 🙂
Hi
Does anyone have a snippet that will work with product enquiry form from woocommerce. I’ve only got a few products on my site but recently imported loads of affiliate products and the enquiry form is showing on those. Bulk editor does not allow for product enquiry, although it did for reviews which was a stroke of luck, my work around is to create a custom inquiry tab and only add that to the 3 products, but surely there is a conditional way. If I could program I would and I have looked but struggled. If anyone could help that would be great.
ps
I just can’t believe I’ve had that plugin for a year and it now, literally the day after it expires that I needed to customise it!
July 21st 2017
Renew for $79*
Typical!
regards
mark
Hey Mark, thanks for your comment! I would recommend to “unset” the Product Enquiry if the product type is external. Unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
Hi Rodolfo,
First of all, congrats on your website! You post great content and your mailing list is a must for people that, like me, just started to learn a little bit of code here and there in order to customize their websites.
Similar to what Mirko Gosch posted, I too needed some customization on this snippet. I needed the inquiry to come up only when a product has no price but I preferred the position of the button to be after the short description. This is how I did it in case someone else is looking for the same output.
Note that you only need to work on the first part of the snippet
add_filter( 'woocommerce_single_product_summary', 'bbloomer_woocommerce_cf7_single_product', 30 ); function bbloomer_woocommerce_cf7_single_product() { global $product, $price; if ( $product->get_price() == 0 || $product->get_price() == '' ) { echo '<button type="submit" id="trigger_cf" class="single_add_to_cart_button button alt">Product Inquiry</button>'; echo '<div id="product_inq" style="display:none">'; echo do_shortcode('[paste_your_contact_form_7_shortcode_here]'); echo '</div>'; }}Awesome, thanks Francisco!
This is incredibly useful. For the life of me, however, I can’t figure out how to use this to get the SKU (or multiple on variable products), in addition to the title, to populate in the form. Any ideas?
Jules, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R
Hey Rodolfo
Yet another great snippet which I tested out immediately. It works fine.
It took me some hours of research + trial & error to come up with a conditional logic that let´s me use and only show this kind of “inquiry tab” whenever a product is out of stock. I was just about to quit trying and ask you for help when I finally got it working.
Here´s my altered version of your snippet which hopefully helps some other members of our tribe 😉 :
add_action( 'woocommerce_single_product_summary', 'bbloomer_woocommerce_cf7_single_product', 30 ); function bbloomer_woocommerce_cf7_single_product() { global $product; if ( is_single() && ! $product->is_in_stock() ) { echo '<button type="submit" id="trigger_cf" class="single_add_to_cart_button button alt">Product Inquiry</button>'; echo '<div id="product_inq" style="display:none">'; echo do_shortcode('[paste_your_contact_form_7_shortcode_here]'); echo '</div>'; } else { return; } }Thank you so much Mirko!
Thank you. Your tips excellent. I appreciate all of the help you provide on your site.
Best of Wishes, Jay
Thank you Jay!
Hi Rodolfo! This was on my list of To-Dos – and then you wrote it up for me =) Thanks heaps!!
One thing though – my new button reloads the page – it shows the Form for a second and then hides it again when the page reloads. Any ideas? I’m using Genesis, if that’s any help… =)
Hey, thanks so much for your comment! Uhm, weird, maybe the JS conflicts with something within your theme 🙂 If you switch theme, does this work as expected?
If anyone has the same problem, I changed the button type from type=”submit” to type=”button” and this fixed it =)
Thanks Rodolfo,
Love this little feature! Works great with WP forms also.
Excellent! Thanks for your feedback Cathy 🙂
Rodolfo! Thank you kindly for your wealth of knowledge! I look forward to your emails now and have visited your website many times since I’ve discovered it. Thank you again!!! Tammy
Thanks a million Tammy!
Thanks great ….
You’re welcome Gianluca!