WooCommerce: Add Product Inquiry Form on Single Product Page

Total
1
Shares
WooCommerce Add Product Inquiry Form on Single Product Page

In this tutorial, I’ll show you how you can add an inquiry form on a single product page. We’ll use Contact Form 7 plugin to create the inquiry form.

Step 1: Create Inquiry Form

Install CF7 and create your inquiry form

Step 2: Add code

Now, you have to add this code by creating a site-specific plugin or by editing child themes functions.php file. Now replace with your contact form 7 shortcode in [paste_your_contact_form_7_shortcode_here] this line.

/* Product Inquiry Form */

add_action( 'woocommerce_single_product_summary', 'emuslearner_woocommerce_cf7_single_product', 30 );
  
function emuslearner_woocommerce_cf7_single_product() {
$title = get_the_title();
   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('$title');
            $('#trigger_cf').html('Close');
         } else {
            $('#product_inq').hide();
            $('#trigger_cf').html('Product Inquiry');
         }
      });
   " );
}

/* Product Inquiry Form */

add some css style to hide the Subject field

Leave a Reply

Sign Up for Our Newsletters

Get notified of the best deals on our WordPress themes.

You May Also Like