在 WooCommerce 3 中重新排序结帐字段 [英] Reordering checkout fields in WooCommerce 3

查看:27
本文介绍了在 WooCommerce 3 中重新排序结帐字段的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试重新排序在 woocommerce_checkout_init 过滤器的帮助下添加的 2 个自定义结帐字段,只是当我应用 woocommerce_checkout_fields 过滤器来重新排序字段时,它无法识别它们,它们是 null.
我认为这是因为过滤器 woocommerce_checkout_initwoocommerce_checkout_fields 之后.

I'm trying to re-order 2 custom checkout fields added with the help of woocommerce_checkout_init filter, just that when I apply woocommerce_checkout_fields filter to re-order fields, it doesn't recognize them and they are null.
I think it's because the filter woocommerce_checkout_init goes after woocommerce_checkout_fields.

我该如何解决这个问题?

How Can I solve this?

这是我的代码:

add_action( 'woocommerce_checkout_init', 'wc_add_confirm_email_checkout', 10, 2 );
function wc_add_confirm_email_checkout( $checkout ) {
    $checkout->checkout_fields['billing']['billing_email2'] = array(
        'type'              => 'text',
        'label'             => __( 'Confirm Email Address', 'woocommerce' ),
        'required'          => true,
        'placeholder'       => _x( 'Confirm Email Address', 'placeholder', 'woocommerce' )
    );
}
add_action( 'woocommerce_checkout_init', 'wc_add_confirm_password_checkout', 10, 2 );
function wc_add_confirm_password_checkout( $checkout ) {
    //var_dump($checkout->checkout_fields);
    if ( get_option( 'woocommerce_registration_generate_password' ) == 'no' ) {
        $checkout->checkout_fields['account']['account_password2'] = array(
            'type'              => 'password',
            'label'             => __( 'Confirm password', 'woocommerce' ),
            'required'          => true,
            'placeholder'       => _x( 'Confirm Password', 'placeholder', 'woocommerce' )
        );
    }
}

add_filter('woocommerce_checkout_fields','reorder_woo_fields');
function reorder_woo_fields($fields) {
    $fields2['billing']['billing_first_name'] = $fields['billing']['billing_first_name'];
    $fields2['billing']['billing_last_name'] = $fields['billing']['billing_last_name'];
    $fields2['billing']['billingooglg_email'] = $fields['billing']['billing_email'];
    $fields2['billing']['billing_email2'] = $fields['billing']['billing_email2'];
    $fields2['billing']['account_password'] = $fields['account']['account_password'];
    $fields2['billing']['account_password2'] = $fields['account']['account_password2'];
    $fields2['billing']['billing_address_1'] = $fields['billing']['billing_address_1'];
    $fields2['billing']['billing_postcode'] = $fields['billing']['billing_postcode'];
    var_dump($fields2);
    //return $fields2;
}

推荐答案

For WooCommerce 3+ (update):

由于 WooCommerce 3.0 结帐字段发生了一些变化,因此无法像以前一样对字段重新排序.

Since WooCommerce 3.0 checkout fields have changed a little bit so is not possible to reorder fields as before.

有一个新的 'priority' 参数处理字段顺序,用于结帐字段和我的帐户字段.

There is a new 'priority' argument that handle fields order, for checkout fields and my account fields as well.

这是 WooCommerce 3+ 的全功能示例:

Here is fully functional example for WooCommerce 3+:

// REORDERING CHECKOUT BILLING FIELDS (WOOCOMMERCE 3+)
add_filter( "woocommerce_checkout_fields", "reordering_checkout_fields", 15, 1 );
function reordering_checkout_fields( $fields ) {

    ## ---- 1. REORDERING BILLING FIELDS ---- ##

    // Set the order of the fields
    $billing_order = array(
        'billing_first_name',
        'billing_last_name',
        'billing_email',
        'billing_phone',
        'billing_company',
        'billing_address_1',
        'billing_address_2',
        'billing_postcode',
        'billing_city',
        'billing_state',
        'billing_country'
    );

    $count = 0;
    $priority = 10;

    // Updating the 'priority' argument
    foreach($billing_order as $field_name){
        $count++;
        $fields['billing'][$field_name]['priority'] = $count * $priority;
    }

    ## ---- 2. CHANGING SOME CLASSES FOR BILLING FIELDS ---- ##

    $fields['billing']['billing_email']['class'] = array('form-row-first');
    $fields['billing']['billing_phone']['class'] = array('form-row-last');

    $fields['billing']['billing_postcode']['class'] = array('form-row-first');
    $fields['billing']['billing_city']['class'] = array('form-row-last');
    
    ## ---- RETURN THE BILLING FIELDS CUSTOMIZED ---- ##

    return $fields;
}

代码位于活动子主题(或主题)的 function.php 文件或任何插件文件中.

WooCommerce 3 之前

我不完全确定,但有些事情是您无法做到的,例如将帐单字段与帐户字段合并.如果你想这样做会比你在这里尝试做的要复杂得多.在这种情况下,您将需要重写/创建一些结帐模板...

I am not completely sure, but you there are some things that you can't do like merging billing fields with account fields. If you want to do that is going to be much more complicated than what you are trying to do here. In that case you will need to rewrite/create some checkout templates…

另一件事是 billing_emailbilling_phone'class 共享同一条线路' =>'form-row-first''class' =>'表格行最后'.当这个类被定义'class' =>'form-row-wide'... 所以你也需要覆盖这些'class'.

Another thing is that billing_email and billing_phone are sharing the same line together with 'class' => 'form-row-first' and 'class' => 'form-row-last'. When not this class is define 'class' => 'form-row-wide'… So you are going to need overriding these 'class' too.

之后你就不需要使用 'woocommerce_checkout_init' 钩子...
您仍然可以使用 'woocommerce_checkout_fields'.
您也可以通过这种方式将所有这些合并到一个函数中:

After that you dont need to use 'woocommerce_checkout_init' hook…
You can still use 'woocommerce_checkout_fields'.
Also you can merge all of them in one function this way:

/*
 * Creating, overriding and reordering custom fields.
 */
add_filter( "woocommerce_checkout_fields", "custom_override_checkout_fields", 11, 1 );
function custom_override_checkout_fields( $fields ) {

    // Creating 'billing_email2' field
    $fields['billing']['billing_email2'] = array(
        'type'          => 'text',
        'label'         => __( 'Confirm Email Address', 'woocommerce' ),
        'placeholder'   => _x( 'Confirm Email Address', 'placeholder', 'woocommerce' ),
        'required'      => true,
        'class'         => array('form-row-last'),
        'clear'         => true
    );

    // =======> I don't really know if you need this one  <========
    // it already exist (see in first reference link at bottom).

    // Creating 'account_password2' field 
    if ( get_option( 'woocommerce_registration_generate_password' ) == 'no' ) {
        $fields['account']['account_password2'] = array(
            'type'          => 'password',
            'label'         => __( 'Confirm password', 'woocommerce' ),
            'placeholder'   => _x( 'Confirm Password', 'placeholder', 'woocommerce' ),
            'required'      => true,
            'class'         => array('form-row-wide') //,
            // 'clear'         => true
        );
    }

    // Overriding existing billing_phone field 'class' property 
    $fields['billing']['billing_phone']['class'] = array('form-row-wide');


    // Reordering billing fields
    $order = array(
        "billing_first_name",
        "billing_last_name",
        "billing_email",
        "billing_email2",
        "billing_phone",
        "billing_company",
        "billing_address_1",
        "billing_address_2",
        "billing_postcode",
        "billing_country"
    );

    foreach($order as $field)
    {
        $ordered_fields[$field] = $fields["billing"][$field];
    }

    $fields["billing"] = $ordered_fields;

    return $fields;
}

代码位于活动子主题(或主题)的 function.php 文件或任何插件文件中.

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

正如我之前所说,我认为您不能将帐单字段与帐户字段合并.
由于 'account_password2' 已经存在,如果你参考官方文档(见下面第一个参考链接),你可能不需要创建它.您必须对此进行测试并对其进行微调.但这就是方法.

As I have said before, I think that you can't merge billing fields with account fields.
As 'account_password2' already exist if you refer to official documentation (see below in first reference link), you may not need to create it. You will have to test this and to fine tune it. But this is the way to do it.

参考文献:

  • Official: Customizing checkout fields using actions and filters
  • How to reorder billing fields in WooCommerce Checkout template?

这篇关于在 WooCommerce 3 中重新排序结帐字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆