wordpress建站教程：WooCommerce集成Contact form 7和WPforms表单

继续分享wordpress建站教程。做wordpress外贸建站项目时，如果是配合woocommerce制作B2B产品展示型网站，那么一般是需要隐藏购物功能，添加询盘功能，这个可以使用插件来实现，方法有很多。今天再给大家分享一种，使用代码直接在产品页面集成Contact form 7和WPforms表单，效果如上图所示。

//WooCommerce集成Contact form 7和WPforms表单
 
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('此处填写表单短代码');
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
      
}

上面的代码原配是写给Contact form 7表单插件的，但实测同样支持WPforms表单插件，把你的表单短代码填写进去，然后把整段代码添加到当前wordpress建站所用主题的functions.php文件中，或者是添加到Code Snippets插件中，效果一样。