WooCommerce发布简单的B2B产品,需要询盘功能,wordpress提供很多插件,本站也分享过一些插件代替询盘按钮,也分享过修改代码把购物车替换成询盘按钮,也有添加tab标签添加Contact form 7表单,方式有很多,总有一种适合你。

这次分享一个更简单好用的方式。

在单个产品页面利用Contact form 7制作产品咨询表单。

当然在所有产品中也能生效。

首先当然必须安装Contact Form 7插件。

先看一下演示效果:

有两种效果,一种是能关闭CF7,一种不能关闭,一直打开CF7表单

效果一代码:关闭打开CF7按钮

PHP代码:将CF7添加到单个产品页面 – WooCommerce

/**
 * @snippet       Show Product Inquiry CF7 @ Single Product Page - WooCommerce
 */
 
// --------------------------
// 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
      
}

在哪里添加此代码?

将PHP代码放在主题或子主题functions.php文件的底部。

[paste_your_contact_form_7_shortcode_here]修改成你Contact Form 7表单短代码,其实可根据你实际要求修改对应文字。

表单能自动填充产品标题,代码位置:

jQuery(‘input[name=”your-subject”]’).val(‘<?php the_title(); ?>’);

如果你自定义的表单,可能短码不一样

可以修改[name=”your-subject”]改成你需要的表单短码

效果二代码:一直打开CF7按钮

/**
 * @snippet       Show CF7 @ Single Product Page - WooCommerce
 */
  
add_action( 'woocommerce_single_product_summary', 'bbloomer_woocommerce_cf7_single_product', 30 );
  
function bbloomer_woocommerce_cf7_single_product() {
echo do_shortcode('[paste_your_contact_form_7_shortcode_here]');
}

在哪里添加此代码?

将PHP代码放在主题或子主题functions.php文件的底部。

[paste_your_contact_form_7_shortcode_here]修改成你Contact Form 7表单短代码。

更多相关:

发表我的评论

请输入你的评论!
请在这里输入你的名字

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据