在 Woocommerce 购物车页面中的 2 列上自定义结帐字段

Question

在新的 WooCommerce 更新结帐字段后，列的行为很奇怪。这是我的结帐字段自定义：

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {
unset($fields['billing']['billing_address_2']);
    return $fields;
}

// Checkout placeholder
add_filter( 'woocommerce_checkout_fields' , 'override_billing_checkout_fields', 20, 1 );
function override_billing_checkout_fields( $fields ) {
    $fields['billing']['billing_phone']['placeholder'] = 'Telefon';
    $fields['billing']['billing_email']['placeholder'] = 'Email';
    $fields['billing']['billing_company']['placeholder'] = 'Firmanavn';
    return $fields;
}

add_filter('woocommerce_default_address_fields', 'override_default_address_checkout_fields', 20, 1);
function override_default_address_checkout_fields( $address_fields ) {
    $address_fields['first_name']['placeholder'] = 'Fornavn';
    $address_fields['last_name']['placeholder'] = 'Efternavn';
    $address_fields['address_1']['placeholder'] = 'Adresse';
    $address_fields['state']['placeholder'] = 'Stat';
    $address_fields['postcode']['placeholder'] = 'Postnummer';
    $address_fields['city']['placeholder'] = 'By';
    return $address_fields;
}

我已在此处可见的自定义购物车页面中设置了结帐字段。

---

我的问题：使用 php 或 CSS 样式，有没有办法：

• 彼此相邻的 2 列中的名字和姓氏字段；
• 地址 1 字段全宽为 100% （我未设置地址 2 字段）；
• 状态字段全宽为 100%；
• 邮政编码和城市字段在 2 列中彼此相邻；
• 电话和电子邮件字段在 2 列中彼此相邻。

我试过这个 CSS，但它只是 100% 的一切。我如何定位以上这些？

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {
unset($fields['billing']['billing_address_2']);
    return $fields;
}

// Checkout placeholder
add_filter( 'woocommerce_checkout_fields' , 'override_billing_checkout_fields', 20, 1 );
function override_billing_checkout_fields( $fields ) {
    $fields['billing']['billing_phone']['placeholder'] = 'Telefon';
    $fields['billing']['billing_email']['placeholder'] = 'Email';
    $fields['billing']['billing_company']['placeholder'] = 'Firmanavn';
    return $fields;
}

add_filter('woocommerce_default_address_fields', 'override_default_address_checkout_fields', 20, 1);
function override_default_address_checkout_fields( $address_fields ) {
    $address_fields['first_name']['placeholder'] = 'Fornavn';
    $address_fields['last_name']['placeholder'] = 'Efternavn';
    $address_fields['address_1']['placeholder'] = 'Adresse';
    $address_fields['state']['placeholder'] = 'Stat';
    $address_fields['postcode']['placeholder'] = 'Postnummer';
    $address_fields['city']['placeholder'] = 'By';
    return $address_fields;
}

Answer 1

首先是正确的 php 代码，您可以在其中重命名标签字段以及设置宽度样式中涉及的类。

关于 Woocommerce 结账字段中的类的说明：

• array('form-row-first') - 字段将显示在第一列中（所以在宽度的 50%）。
• array('form-row-last') - 字段将显示在第二列中（因此在宽度的 50% 处）。
• array('form-row-wide') - 字段将显示在两列中（因此为 100% 的宽度）。

编码：

add_filter( 'woocommerce_checkout_fields' , 'custom_checkout_billing_fields', 20, 1 );
function custom_checkout_billing_fields( $fields ){

    // Remove billing address 2
    unset($fields['billing']['billing_address_2']);

    if( is_cart()){ // <== On cart page only
        // Change placeholder
        $fields['billing']['billing_phone']['placeholder']   = __( 'Telefon', $domain );
        $fields['billing']['billing_email']['placeholder']   = __( 'Email', $domain );
        $fields['billing']['billing_company']['placeholder'] = __( 'Firmanavn', $domain );
        
        // Change class
        $fields['billing']['billing_phone']['class']   = array('form-row-first'); //  50%
        $fields['billing']['billing_email']['class']   = array('form-row-last');  //  50%
        $fields['billing']['billing_company']['class'] = array('form-row-wide');  // 100%
    }
    return $fields;
}

add_filter('woocommerce_default_address_fields', 'custom_default_address_fields', 20, 1);
function custom_default_address_fields( $address_fields ){
    
    if( ! is_cart()){ // <== On cart page only
        // Change placeholder
        $address_fields['first_name']['placeholder'] = __( 'Fornavn', $domain );
        $address_fields['last_name']['placeholder']  = __( 'Efternavn', $domain );
        $address_fields['address_1']['placeholder']  = __( 'Adresse', $domain );
        $address_fields['state']['placeholder']      = __( 'Stat', $domain );
        $address_fields['postcode']['placeholder']   = __( 'Postnummer', $domain );
        $address_fields['city']['placeholder']       = __( 'By', $domain );

        // Change class
        $address_fields['first_name']['class'] = array('form-row-first'); //  50%
        $address_fields['last_name']['class']  = array('form-row-last');  //  50%
        $address_fields['address_1']['class']  = array('form-row-wide');  // 100%
        $address_fields['state']['class']      = array('form-row-wide');  // 100%
        $address_fields['postcode']['class']   = array('form-row-first'); //  50%
        $address_fields['city']['class']       = array('form-row-last');  //  50%
    }
    return $address_fields;
}

现在相关的 CSS 代码应该（默认情况下）是这样的：（
尝试删除 !important以查看是否真的有必要）

add_filter( 'woocommerce_checkout_fields' , 'custom_checkout_billing_fields', 20, 1 );
function custom_checkout_billing_fields( $fields ){

    // Remove billing address 2
    unset($fields['billing']['billing_address_2']);

    if( is_cart()){ // <== On cart page only
        // Change placeholder
        $fields['billing']['billing_phone']['placeholder']   = __( 'Telefon', $domain );
        $fields['billing']['billing_email']['placeholder']   = __( 'Email', $domain );
        $fields['billing']['billing_company']['placeholder'] = __( 'Firmanavn', $domain );
        
        // Change class
        $fields['billing']['billing_phone']['class']   = array('form-row-first'); //  50%
        $fields['billing']['billing_email']['class']   = array('form-row-last');  //  50%
        $fields['billing']['billing_company']['class'] = array('form-row-wide');  // 100%
    }
    return $fields;
}

add_filter('woocommerce_default_address_fields', 'custom_default_address_fields', 20, 1);
function custom_default_address_fields( $address_fields ){
    
    if( ! is_cart()){ // <== On cart page only
        // Change placeholder
        $address_fields['first_name']['placeholder'] = __( 'Fornavn', $domain );
        $address_fields['last_name']['placeholder']  = __( 'Efternavn', $domain );
        $address_fields['address_1']['placeholder']  = __( 'Adresse', $domain );
        $address_fields['state']['placeholder']      = __( 'Stat', $domain );
        $address_fields['postcode']['placeholder']   = __( 'Postnummer', $domain );
        $address_fields['city']['placeholder']       = __( 'By', $domain );

        // Change class
        $address_fields['first_name']['class'] = array('form-row-first'); //  50%
        $address_fields['last_name']['class']  = array('form-row-last');  //  50%
        $address_fields['address_1']['class']  = array('form-row-wide');  // 100%
        $address_fields['state']['class']      = array('form-row-wide');  // 100%
        $address_fields['postcode']['class']   = array('form-row-first'); //  50%
        $address_fields['city']['class']       = array('form-row-last');  //  50%
    }
    return $address_fields;
}