验证在单个产品页面中添加到“添加到购物车”上方的自定义字段

编程问答 2022-05-30

问题描述

我在 WooCommerce 的单个产品页面中的添加到购物车按钮上方添加了表单，我想验证该表单，就像不填写表单用户应该无法点击 Add To Cart 按钮一样。

>

我在 functions.PHP 中添加的代码：

function add_name_on_tshirt_field() {
    echo '<div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled"><table class="variations" cellspacing="0" width="100px">

        <tbody><tr>
          <td class="label" style="width:100px"><label for="color">Agent Name</label></td>
          <td class="value">
              <input type="text" name="name-on-tshirt" value="" required/>                      
          </td>
          </tr>
          <tr>
          <td class="label"><label for="color">Title</label></td>
          <td class="value">
              <input type="text" name="name-on-tshirt" value="" required/>                      
          </td>
          </tr>
          <tr>
          <td class="label"><label for="color">Phone No</label></td>
          <td class="value">
              <input type="text" name="name-on-tshirt" value="" required/>                      
          </td>
      </tr>
      </tbody>
      </table>
      </br>
 ';
}
add_action( 'woocommerce_before_add_to_cart_form','add_name_on_tshirt_field' );

enter image description here

使用上面的代码，已经添加了表单，但是如何在点击添加到购物车按钮之前验证表单。

非常感谢任何帮助。

解决方法

您的字段需要在添加到购物车表单中，因此使用 woocommerce_before_add_to_cart_button 操作挂钩而不是 woocommerce_before_add_to_cart_form...

您的代码中存在错误，因为所有字段都具有相同的属性“名称”值。

替换为：

add_action( 'woocommerce_before_add_to_cart_button','add_name_on_tshirt_field' );
function add_name_on_tshirt_field() {
    echo '<div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled">
        <table class="variations" cellspacing="0" width="100px">
            <tbody><tr>
                <td class="label" style="width:100px"><label for="color">' . __("Agent Name","woocommerce") . '</label></td>
                <td class="value">
                    <input type="text" name="tshirt_name" value="" required/>
                </td>
            </tr>
            <tr>
                <td class="label"><label for="color">' . __("Title","woocommerce") . '</label></td>
                <td class="value">
                    <input type="text" name="tshirt_title" value="" required/>
                </td>
            </tr>
            <tr>
                <td class="label"><label for="color">' . __("Phone No","woocommerce") . '</label></td>
                <td class="value">
                    <input type="text" name="tshirt_phone" value="" required/>
                </td>
            </tr>
        </tbody>
    </table>
    </br>';
}

然后您就可以使用 woocommerce_add_to_cart_validation 钩子进行字段验证

// Field validation
add_action( 'woocommerce_add_to_cart_validation','validate_name_on_tshirt_field' );
function validate_name_on_tshirt_field( $passed ) {
    $error_notice = array(); // Initializing
    
    if ( isset($_POST['tshirt_name']) && empty($_POST['tshirt_name']) ) {
        $passed = false;
        $error_notice[] = __('"Agent Name" is a required field','woocommerce');
    }
    
    if ( isset($_POST['tshirt_title']) && empty($_POST['tshirt_title']) ) {
        $passed = false;
        $error_notice[] = __('"Title" is a required field','woocommerce');
    }
    
    if ( isset($_POST['tshirt_phone']) && empty($_POST['tshirt_phone']) ) {
        $passed = false;
        $error_notice[] = __('"Phone No" is a required field','woocommerce');
    }
    
    // Display errors notices
    if ( ! empty($error_notice) ) {
        wc_add_notice( implode('<br>',$error_notice),'error' );
    }
    
    return $passed;
}

现在您需要将字段数据保存为自定义购物车项目数据并在购物车和结帐页面中显示它们：

// Save as custom cart item data
add_filter( 'woocommerce_add_cart_item_data','add_cart_item_custom_data',10,2 );
function add_cart_item_custom_data( $cart_item_data,$product_id ) {
    if ( isset($_POST['tshirt_name']) && ! empty($_POST['tshirt_name']) ) {
        $cart_item_data['tshirt_name'] = sanitize_text_field($_POST['tshirt_name']);
    }
    
    if ( isset($_POST['tshirt_title']) && ! empty($_POST['tshirt_title']) ) {
        $cart_item_data['tshirt_title'] = sanitize_text_field($_POST['tshirt_title']);
    }
    
    if ( isset($_POST['tshirt_phone']) && ! empty($_POST['tshirt_phone']) ) {
        $cart_item_data['tshirt_phone'] = sanitize_text_field($_POST['tshirt_phone']);
    }
    
    return $cart_item_data;
}

// Display in cart and checkout
add_filter( 'woocommerce_get_item_data','display_on_cart_and_checkout',2 );
function display_on_cart_and_checkout( $cart_data,$cart_item ) {
    if ( isset($cart_item['tshirt_name']) ) {
        $cart_data[] = array( "name" => __("Agent name","woocommerce"),"value" => $cart_item['tshirt_name'] );
    }

    if ( isset($cart_item['tshirt_title']) ) {
        $cart_data[] = array( "name" => __("Title","value" => $cart_item['tshirt_title'] );
    }

    if ( isset($cart_item['tshirt_phone']) ) {
        $cart_data[] = array( "name" => __("Phone No","value" => $cart_item['tshirt_phone'] );
    }
    
    return $cart_data;
}

要完成，您需要将字段数据保存为自定义订单商品数据并在订单和电子邮件中显示：

// Display on orders and email notifications (save as custom order item meta data)
add_action( 'woocommerce_checkout_create_order_line_item','display_on_orders_and_emails',4 );
function display_on_orders_and_emails( $item,$cart_item_key,$values,$order ) {
    if ( isset($values['tshirt_name']) ) {
        $item->add_meta_data( __("Agent name",$values['tshirt_name'] );
    }

    if ( isset($values['tshirt_title']) ) {
        $item->add_meta_data( __("Title",$values['tshirt_title'] );
    }

    if ( isset($values['tshirt_phone']) ) {
        $item->add_meta_data( __("Phone No",$values['tshirt_phone'] );
    }
}

代码位于活动子主题（或活动主题）的functions.php 文件中。经测试有效。

custom-fieldsvalidationwordpresswordpress