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

【问题标题】：Customizing checkout fields on 2 columns in Woocommerce cart page在 Woocommerce 购物车页面中的 2 列上自定义结帐字段
【发布时间】：2018-07-25 08:59:01
【问题描述】：

在新的 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 列中彼此相邻；
地址 1 字段全宽为 100%（我有未设置的地址 2 字段）;
状态字段全宽为 100%；
2 列中的邮政编码和城市字段彼此相邻；
电话和电子邮件字段在 2 列中并排。

我尝试了这个 CSS，但它只能 100% 满足所有需求。如何仅针对以上这些？

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

【问题讨论】：

Woocommerce 3.3.1 是最近的主要更新，但仍有一些错误。许多主题和插件仍然与它不兼容。此版本在 woocommerce 模板中进行了很多更改，并且现在在定制器中启用了很大一部分设计和样式......所以所有这些更改都会产生像您这样的问题。您应该回滚到稳定版本 3.2.6 并始终等待 2 或 3 个月，然后再将生产网站更新到主要的 woocommerce 版本。
非常感谢 Loic。总是在这里拯救一天。上面的 CSS 使所有字段的宽度为 100%。但是我如何让电话+电子邮件和城市+邮编和名字+姓氏并排在一起？我的商店中有 7 个字段：名字、姓氏、地址、邮编、城市、电话、电子邮件。我希望名字 + 姓氏彼此相邻，每个宽度为 50%，地址本身为 100% 宽度，邮政编码 + 城市彼此相邻，每个宽度为 50%，电话 + 电子邮件彼此相邻，宽度为 50%。我在 CSS 中找不到允许我这样做的唯一 ID。要么我有所有字段 50% 或 100%..
我已经回答了你的问题……你试过了吗？
您好，很抱歉我遇到了互联网问题，迟到的答复。我试过你的代码，一切正常，除了：它删除了电子邮件+电话和电子邮件+电话的占位符不是 50% 宽度？它还会从 company_address 中删除占位符。
我已将您问题的代码用作占位符……因此您可以根据您的工作代码对其进行调整……我的回答中已解释了一切，您应该能够使其正常工作。

标签： php css wordpress woocommerce checkout

【解决方案1】：

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

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

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

【讨论】：

并不能真正解决问题。我需要一个 PHP 或 CSS 代码来使地址字段 1 填满整个内容，因为我取消了地址字段 2。然后将电话 + 电子邮件放在彼此相邻的 n2 列中

【解决方案2】：

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

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

array('form-row-first') - 字段将显示在第一列（因此为宽度的 50%）。
array('form-row-last') - 字段将显示在第 2 列（宽度的 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 看看是否真的有必要）

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

【讨论】：