[Tutorials] Create request form in woocommerce

Tạo form yêu cầu báo giá trong woocommerce

[Tutorials] Create request form in woocommerce

In many cases such as you selling items in bulk or products of great value, intangible value but you are not convenient to publicize the price, you want to create a quotation request form for customers to easily contact. exchange system.

Today, flatsomea-z will show you how to create a quote request form on the product detail page very simply.

Create request form in woocommerce
Create request form in woocommerce

Step 1: Create a sample form using CF7

You create a request form with the fields you want, set up an email to receive notifications, … then save

Step 2: Display the button on the product detail page

Show 1 request button behind add to cart button. Copy and paste the following code into the functions.php file

//Display request button

add_action( 'woocommerce_single_product_summary', 'mx_request_form_single_product', 30 );

function mx_request_form_single_product() {
echo '<button type="submit" id="trigger_cf" class="single_add_to_cart_button button alt">Request</button>';
echo '<div id="product_inq" style="display:none">';
echo do_shortcode('[paste_your_contact_form_7_shortcode_here]');
echo '</div>';
}

Explain:

  • This code hooks into woocommerce_single_product_summary location of woocommerce
  • The button is displayed as “Request”
  • Call the CF7 shortcode, remember to replace [paste_your_contact_form_7_shortcode_here] with the CF7 shortcode you created in step 1!

Step 3: Add JS to hide/show form

Copy and paste the following code into the functions.php file

// Display javascript
// a) Click the button to display the form CF7
// b) Displayed with the title as the product name
// c) Change the "ask for a quote" button to a "Close" button
add_action( 'woocommerce_single_product_summary', 'onclick_show_form_cf7', 40 );

function onclick_show_form_cf7() {

?>
<script type="text/javascript">
jQuery('#trigger_cf').on('click', function(){
if ( jQuery(this).text() == 'Báo giá' ) {
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

It is done. Good luck to you ^^

Trả lời

Email của bạn sẽ không được hiển thị công khai.