结帐字段在 Woocommerce 购物车页面中有 2 列

Question

我在 woocommerce 结帐页面上找到了使以下字段相互对齐的解决方案 - 此处为原始问题：Customizing checkout fields on 2 columns in Woocommerce cart page

包含此代码的大多数字段变为内联字段，但以下字段没有影响：

• 电话
• 电子邮件
• 地址线2

我认为这是代码中计费部分的错误。这是完整的代码：

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

if( is_cart()){ // <== On cart page only
    // Change placeholder
    $fields['billing_phone']['placeholder']     = __( 'Phone', $domain );
    $fields['billing_email']['placeholder']     = __( 'Email', $domain );
    $fields['billing_address_2']['placeholder'] = __( 'Address line 2', $domain );

    // Change class
    $fields['billing_phone']['class']     = array('form-row-last'); //  50%
    $fields['billing_email']['class']     = array('form-row-first');  //  50%
    $fields['billing_address_2']['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'] = __( 'First name', $domain );
    $address_fields['last_name']['placeholder']  = __( 'Last name', $domain );
    $address_fields['address_1']['placeholder']  = __( 'Address line 1', $domain );
    $address_fields['state']['placeholder']      = __( 'County', $domain );
    $address_fields['postcode']['placeholder']   = __( 'Post Code', $domain );
    $address_fields['city']['placeholder']       = __( 'Town/City', $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-last');  // 50%
    $address_fields['postcode']['class']   = array('form-row-first'); //  50%
    $address_fields['city']['class']       = array('form-row-first');  //  50%
}
return $address_fields;
}

这里是css代码：

.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 1

您的代码中有一些错误，我相信您从中获取这些代码的答案是针对类似的解决方案，而不是针对您的情况。

因此，如果您想内联显示结帐文件，您只需要以下内容：

 add_filter('woocommerce_checkout_fields', 'custom_checkout_billing_fields', 20, 1);
 function custom_checkout_billing_fields($fields)
 {
$domain = 'woocommerce';
// Remove billing address 2
unset($fields['billing']['billing_address_2']);

// 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_address_1']['class'] = array('form-row-first'); //  50%
$fields['billing']['billing_postcode']['class'] = array('form-row-last'); //  50%
$fields['billing']['billing_company']['class'] = array('form-row-wide'); // 100%

// Change placeholder this below is just if you wanto to change the place holder  you can remove theme if you don't want to change that
$fields['billing']['billing_phone']['placeholder'] = __('Telefon', $domain);
$fields['billing']['billing_email']['placeholder'] = __('Email', $domain);
$fields['billing']['billing_company']['placeholder'] = __('Firmanavn', $domain);

return $fields;
}

在上面的代码中只有五个文件我们已经更改了类，如果您想其余的请告诉我，或者您可以通过查找每个文件名自行添加它们并以您想要的方式更改类

请记住，此函数中有代码块可以更改占位符，如果您不想要它们，您可以简单地删除它们