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;
}

我已将自定义购物车页面中的结帐字段设置为here。

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

彼此相邻的2列中的firstname和lastname字段;
地址1字段全宽100％（我有未设置的地址2字段）;
州字段全宽为100％;
邮政编码和城市字段彼此相邻的两列;
电话和电子邮件字段分为两列。

我试过这个CSS，但它只是100％的一切。我如何针对上述目标？

p.form-row-first, p.form-row-last {
    width: 100%;
    float: left;
}

Answer 1

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

关于Woocommerce结帐字段中的课程的说明：

array('form-row-first') - 字段将显示在第1列（因此宽度的50％）。
array('form-row-last') - 字段将显示在第二列（因此宽度的50％）。
array('form-row-first') - 字段将显示在两列中（因此宽度的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，看看它是否真的需要）

.form-row-wide,
.form-row-first,
.form-row-last {
    clear: both !important;
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
}

@media (min-width: 768px){
    .form-row-first {
        width: 47% !important;
        float: left !important;
        margin-right: 5.8% !important;
        clear: both !important;
    }
    .form-row-last {
        width: 47% !important;
        float: right !important;
        margin-right: 0 !important;
        clear: none !important;
    }
}

Answer 2

我不明白你的CSS代码。我会给文本输入字段宽度一般为100％，如下所示：

＆＃13;

input[type=text] {
  width: 100%;
}
input[type=text].half {
  float: left;
  width: 50%;
}

＆＃13;

那些应该是一半大小的那些将在表格的HTML代码中有一个类。

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

2 个答案: