Woocommerce checkout fields width

  • Hello,
    I am working with a Japanese website. I arranged the order of the checkout fields with something I found one of the posts:

    add_filter(‘woocommerce_checkout_fields’,’reorder_woo_fields’);

    function reorder_woo_fields($fields) {
    //move these around in the order you’d like

    $fields2[‘billing’][‘billing_last_name’] = $fields[‘billing’][‘billing_last_name’];
    $fields2[‘billing’][‘billing_first_name’] = $fields[‘billing’][‘billing_first_name’];
    $fields2[‘billing’][‘billing_company’] = $fields[‘billing’][‘billing_company’];
    $fields2[‘billing’][‘billing_address_1’] = $fields[‘billing’][billing_address_1”];
    $fields2[‘billing’][‘billing_address_2’] = $fields[‘billing’][‘billing_address_2’];
    $fields2[‘billing’][‘billing_city’] = $fields[‘billing’][‘billing_city’];
    $fields2[‘billing’][‘billing_postcode’] = $fields[‘billing’][‘billing_postcode’];
    $fields2[‘billing’][‘billing_country’] = $fields[‘billing’][‘billing_country’];
    $fields2[‘billing’][‘billing_state’] = $fields[‘billing’][‘billing_state’];
    $fields2[‘billing’][‘billing_email’] = $fields[‘billing’][‘billing_email’];
    $fields2[‘billing’][‘billing_phone’] = $fields[‘billing’][‘billing_phone’];

    //just copying these (keeps the standard order)
    $fields2[‘shipping’] = $fields[‘shipping’];
    $fields2[‘account’] = $fields[‘account’];
    $fields2[‘order’] = $fields[‘order’];

    return $fields2;
    }

    The Japanese method follows a reversed order, so I changed above to:

    add_filter(‘woocommerce_checkout_fields’,’reorder_woo_fields’);

    function reorder_woo_fields($fields) {
    //move these around in the order you’d like

    $fields2[‘billing’][‘billing_last_name’] = $fields[‘billing’][‘billing_last_name’];

    $fields2[‘billing’][‘billing_first_name’] = $fields[‘billing’][‘billing_first_name’];

    $fields2[‘billing’][‘billing_postcode’] = $fields[‘billing’][‘billing_postcode’];

    $fields2[‘billing’][‘billing_state’] = $fields[‘billing’][‘billing_state’];

    $fields2[‘billing’][‘billing_city’] = $fields[‘billing’][‘billing_city’];

    $fields2[‘billing’][‘billing_address_1’] = $fields[‘billing’][‘billing_address_1’];

    $fields2[‘billing’][‘billing_address_2’] = $fields[‘billing’][‘billing_address_2’];

    $fields2[‘billing’][‘billing_email’] = $fields[‘billing’][‘billing_email’];

    $fields2[‘billing’][‘billing_phone’] = $fields[‘billing’][‘billing_phone’];

    //just copying these (keeps the standard order)
    $fields2[‘shipping’] = $fields[‘shipping’];
    $fields2[‘account’] = $fields[‘account’];
    $fields2[‘order’] = $fields[‘order’];

    return $fields2;
    }

    I was able to rearrange but some fields overlapped, and the fields are not aligned to its ideal position.

    The rows now per line show as:
    last name
    first name, postal code
    town/city, state
    (Address field overlapping or postal code field)
    Address 2,
    Email, Phone

    Thank you in advance for any help.

    https://www.ads-software.com/extend/plugins/woocommerce/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor James Koster

    (@jameskoster)

    Hey,

    I need to see a link really. It’s possible your theme is causing issues.

    Generally you should be able to set the width of checkout inputs with

    .checkout .form-row input.input-text {
width:100%;
}
    Thread Starter oriye

    (@oriye)

    Hi! This is my link.
    https://oriye-impressions.com/checkout/
    My site is not yet open.

    I don’t know any php or codes. Do I paste the above code in the functions.php file?

    This is my function file:

    <?php
/**
 * @package WordPress
 * @subpackage YIW Themes
 *
 * Here the first hentry of theme, when all theme will be loaded.
 * On new update of theme, you can not replace this file.
 * You will write here all your custom functions, they remain after upgrade.
 */                                                                               

// include all framework
require_once dirname(__FILE__) . '/core/core.php';

// include the library for the layers slider
require_once dirname(__FILE__) . '/inc/LayerSlider/layerslider.php';

// include the library for the wishlist
require_once dirname(__FILE__) . '/inc/yith_wishlist/init.php';

/*-----------------------------------------------------------------------------------*/
/* End Theme Load Functions - You can add custom functions below */
/*-----------------------------------------------------------------------------------*/

add_filter('woocommerce_checkout_fields','reorder_woo_fields');

function reorder_woo_fields($fields) {
	//move these around in the order you'd like

    $fields2['billing']['billing_last_name'] = $fields['billing']['billing_last_name'];

    $fields2['billing']['billing_first_name'] = $fields['billing']['billing_first_name'];

	$fields2['billing']['billing_postcode'] = $fields['billing']['billing_postcode'];

	$fields2['billing']['billing_state'] = $fields['billing']['billing_state'];

	$fields2['billing']['billing_city'] = $fields['billing']['billing_city'];

	$fields2['billing']['billing_address_1'] = $fields['billing']['billing_address_1'];

	$fields2['billing']['billing_address_2'] = $fields['billing']['billing_address_2'];

	$fields2['billing']['billing_email'] = $fields['billing']['billing_email'];

	$fields2['billing']['billing_phone'] = $fields['billing']['billing_phone'];

	//just copying these (keeps the standard order)
	$fields2['shipping'] = $fields['shipping'];
	$fields2['account'] = $fields['account'];
	$fields2['order'] = $fields['order'];

	return $fields2;
}

    yep @oriye you paste it in your functions.php

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Woocommerce checkout fields width’ is closed to new replies.