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

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

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

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

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

先看一下演示效果:

/** * @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文件的底部。

/** * @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文件的底部。