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

时间:2018-08-26 17:31:39

标签: php wordpress woocommerce

我发现该解决方案在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;
    }
}

1 个答案:

答案 0 :(得分:0)

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

因此,如果要显示内联的结帐字段,则仅需要以下内容:

ndarray

在上面的代码中,只有五个归档了,如果您想让其余的信息告诉我们,我们可以更改类,或者您可以通过查找每个归档的名称来自己添加它们,并以所需的方式更改该类

请记住,此函数中有一些代码块可以更改占位符,如果您不希望它们可以简单地删除它们