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!

Display Product Enquiry Form on the WooCommerce Single Product Page

PHP Snippet: Add CF7 to the Single Product Page – WooCommerce


/**
 * @snippet       Show Product Inquiry CF7 @ Single Product Page - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=21605
 * @author        Rodolfo Melogli
 * @compatible    WC 3.5
 */

// --------------------------
// 1. Display Button and Echo CF7

add_action( 'woocommerce_single_product_summary', '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>';
}

// --------------------------
// 2. Echo Javascript: 
// a) on click, display CF7
// b) and populate CF7 subject with Product Name
// c) and change CF7 button to "Close"

add_action( 'woocommerce_single_product_summary', 'bbloomer_on_click_show_cf7_and_populate', 40 );

function bbloomer_on_click_show_cf7_and_populate() {
  
  ?>
    <script type="text/javascript">
        jQuery('#trigger_cf').on('click', function(){
		if ( jQuery(this).text() == 'Product Inquiry' ) {
                	jQuery('#product_inq').css("display","block");
                	jQuery('input[name="your-subject"]').val('<?php the_title(); ?>');
			jQuery("#trigger_cf").html('Close'); 
		} else {
			jQuery('#product_inq').hide();
			jQuery("#trigger_cf").html('Product Inquiry'); 
		}
        });
    </script>
	<?php
	  
}

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 🙂

Share:

Leave a Reply