Question

客户要求在“单一产品”页面上显示“产品查询”按钮，该按钮将在单击时显示带有自动填充主题的联系表。如何在没有任何WooCommerce插件的情况下做到这一点？

这就是我的做法。（当然必须安装联系表格7插件）

 * @snippet       Show Product Inquiry CF7 on Single Product Page - WooCommerce
 * @compatible    WC 3.5
 */

// --------------------------
// 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('[CF7 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

}```

The ouput was just awesome. please try to use this snippet for your client and avoid unnecessary use of the addons for small stuff  like this.

如何在Woocommerce的单个产品页面上显示产品查询表单？

0 个答案: