WooCommerce Displaying a custom Inquiry Form under product

Making your website convenient for users to interact, plays a critical role in the usage of the website. One quick way to make users experience better is by adding selected products name to contact form.

Suppose a user wants to write a review or wants to inquire about a specific product, adding the codes below will display the name of the product by default, making it quicker and easier for the customer.

Adding the code is as simple as that! Firstly, you need to add the following code to functions.php. Go to Appearance > Theme Editor > Theme Functions(functions.php).

Then simply paste the following code at the end of the existing code:

 

add_filter( 'woocommerce_product_tabs', 'product_enquiry_tab' );
 
function product_enquiry_tab( $tabs ) {
 
    $tabs['test_tab'] = array(
 
        'title'     => __( 'Enquire about Product', 'woocommerce' ),
 
        'priority'  => 50,
 
        'callback'  => 'product_enquiry_tab_form'
 
    );
 
    return $tabs;
 
}
 
function product_enquiry_tab_form() {
 
    global $product;
 
    //If you want to have product ID also
 
    //$product_id = $product->id;
 
    $subject    =   "Enquire about ".$product->post->post_title;
 
    echo "<h3>".$subject."</h3>";
 
    echo do_shortcode('[contact-form-7 id="19" title="Contact form 1_copy"]'); //add your contact form shortcode here ..
 
    ?>
 
    <script>
 
    (function($){
 
        $(".product_name").val("<?php echo $subject; ?>");
 
    })(jQuery);
 
    </script>  
 
    <?php  
 
}
 
?>

You would be required to change the following line in the above code with your contact form ID.

echo do_shortcode('[contact-form-7 id="19" title="Contact form 1_copy"]'); //add your contact form shortcode here ..

 

Setting Up Contact Form

Create a contact form or change your existing one with the following codes

<p>Your Name (required)<br />
        [text* your-name] </p>
 
    <p>Your Email (required)<br />
        [email* your-email] </p>
 
    <p class="product_subject">Subject<br />
        [text your-subject class:product_name] </p>
 
    <p>Your Message<br />
        [textarea your-message] </p>
 
    <p>[submit "Send"]</p>

 

Once done go Back to the theme functions and change the contact form ID with the ID of this form.

Once done your output would be like shown below.

 

Leave a Reply