WooCommerce 教程：显示单一产品页面查询表（Contact Form 7 ）

我喜欢与自由职业者合作，并与世界各地分享我的片段！

这次，客户要求在单一产品页面上显示 “产品查询” 按钮，该按钮将显示一个具有自动填充主题的联系表单（当然是联系表格 7）。这是我如何做到的！

PHP 片段：将 CF7 添加到单个产品页面 – WooCommerce

/**
 * @snippet       Show Product Inquiry CF7 @ Single Product Pg - WooCommerce

 * @sourcecode    https://businessbloomer.com/?p=21605
 * @author        Rodolfo Melogli
 * @compatible    WC 2.6.14, WP 4.7.2, PHP 5.5.9
 */

// --------------------------
// 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
	  
}