自定义Woocommerce购物车页面中2列上的结帐字段 [英] Customizing checkout fields on 2 columns in Woocommerce cart page

问题描述

在新的WooCommerce更新结帐字段之后，列的行为异常。那是我的结帐字段自定义项：

After the new WooCommerce update checkout fields columns are acting strangely. That are my checkout fields customizations:

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

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

I have set that checkout fields in a custom cart page visible here.

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

My question: With php or with CSS styling, is there a way to have:

• 第2列中的名字和姓氏字段彼此相邻；


• 地址1字段的全宽度为100％（我未设置地址2字段） ;


• 状态字段全角为100％；


• 邮政编码和城市字段位于相邻的两列中；


• 电话和电子邮件字段在彼此相邻的2列中。

• firstname and lastname fields in 2 columns next to each other;
• Address 1 field full width at 100% (I have unset address 2 field);
• State field full width at 100%;
• zip code and city fields in 2 columns next to each other;
• phone and email fields in 2 columns next to each other.

我尝试了此CSS，但它仅使100 ％的一切。

I tried this CSS, but it just makes 100% for everything. How do I target just these above?

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

推荐答案

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

First the correct php code where you rename your label fields and where you set the classes that are involved in the width styling.

有关Woocommerce结帐字段中类的说明：

Explanations about classes in Woocommerce checkout fields:

• array（'form-row-first'）-字段将显示在第一列（宽度为50％）。


• array（'form-row-last'）-字段将显示在第二列（因此宽度为50％）。


• array（'form-row-wide'）-字段将同时显示在两列中（因此宽度为100％）。

• array('form-row-first') - Field will be displayed in 1st column (so at 50% of width).
• array('form-row-last') - Field will be displayed in 2nd column (so at 50% of width).
• array('form-row-wide') - Field will be displayed in both columns (so at 100% of width).

代码：

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 以查看是否确实必要）

Now the related CSS code should be (by default) something like this:
(Try to remove !important to see if it's really necessary)

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

这篇关于自定义Woocommerce购物车页面中2列上的结帐字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！