WooCommerce : Personalizar los campos de la pagina checkout

Crear copia en tu thema de la pagina checkout

Para crear una plantilla de tema personalizada para la página de pago, primero deberás crear una carpeta «woocommerce/checkout» dentro de la carpeta del tema.

A continuación, copia la plantilla de la página de pago de WooCommerce, que puedes encontrar
en:

→ wp-content\plugins\woocommerce\templates\checkout\form-checkout.php

Plugin checkout field editor (checkout manager) for woocommerce - ThemeHigh

Hay un plugin que nos facilita modificar los campos de la pagina del checkout de carrito de compras.

• Página del plugin en WordPress.org »
• Página principal del plugin »

 → Una vez instalado lo podemos encontrar en Administrador de WordPress > WooCommerce  > Formulario de Pago

Clase que utilizan los campos del plugin Plugin checkout field editor 

Nombre  	  			form-row-first
Apellido				form-row-last
telefono				form-row-wide
Correo					form-row-wide
País / Región			form-row-wide,address-field,update_totals_on_change
Region / Provincia		form-row-wide,address-field
Direccion				form-row-wide,address-field

Explicacion de las clases : 

.form-row-first    	Izquierda
.form-row-last		Derecha
.form-row-wide		ancho completo

Si asignamos al campo nombre la clase .form-row-first y al campo apellido la clase .form-row-last , ambos se pondran en un misma linea uno a la izquierda y el otro a la derecha.

Si asignamos al campo direccion la clase .form-row-wide ,  el campo ocupara todo el ancho de la linea.

Utilidades del plugin checkout field editor 

• Con el plugin podemos agregar o quitar campos 
• Personalizar los campos de error (cuando se configura el campo y se marca que es Obligatorio) , el mensaje de error en la pagina del checkout se personaliza y nos muestra que campo falta completar
  
  
• Actualizar total del checkout en WooCommerce cuando cambiamos de provincia 
  referencia : https://www.youtube.com/watch?v=U79KfukGmWM

CSS para modificar apariencia de la pagina checkout

//alex no poner form como display flex porque el mensaje de error aparece como una columna mas
//form{ display: flex; } 

// Lado izquierdo - Aqui se muestra los datos (nombre,correo,direccion,etc)
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {width:100%}

//Lado izquierdo - Aqui se muestra informacion adicional
//.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {}

/*******IZQUIERDA*******/

/*Contenedor*/
.woocommerce-checkout .woocommerce .col2-set, .woocommerce-checkout .woocommerce-page .col2-set {
    background: white;
    padding: 3em;
    border-radius: 1em;
    width: 55%;
    float: left;
}

/*Títulos*/
label, input, button, select, textarea {
    //font-size: 12px;
    font-size:.9rem;
    line-height: 1.7;
   // text-transform: uppercase !important;
    font-weight: 700;
    color: #4a4a4a;
    margin-bottom: 0.5em;
}

/*Cada formulario*/
input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea {
    border: 2px solid #d9d9d9;
    background-color: white;
    height: 3em;
    //line-height: 3em;
}

.woocommerce-account form .form-row, .woocommerce-checkout form .form-row {
    margin-bottom: 1em;
}

/*Estilos Dropdowns*/

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 2px solid #d9d9d9;
    border-radius: 5px;
    height: 2.5em;
}
.select2-selection__arrow{ top: 3px!important; }

/*Estilo en Modo Enfoque*/
textarea:focus, input[type=text]:focus, input[type=password]:focus, 
input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=date]:focus,
input[type=month]:focus, input[type=time]:focus, input[type=week]:focus, 
input[type=number]:focus, input[type=email]:focus, input[type=url]:focus,
input[type=search]:focus, input[type=tel]:focus, input[type=color]:focus, .uneditable-input:focus 
{
    border-color: #F09262; 
    /*Change this to a color that best suits your design*/
    box-shadow: none;
    outline: 0;
}


/*******DERECHA*******/

/*Remover título*/
//Titulo "Tu pedido" - Listado de Productos carrito lado derecho

h3#order_review_heading { display: none; }


//Inicio Color fondo Pasarela de Pago

.woocommerce-checkout #payment {background: #ffffff;}
.woocommerce-checkout #payment div.payment_box::before {border: none!important; }
.woocommerce-checkout #payment div.payment_box{ background: #ffffff;}

//Fin Color fondo Pasarela de Pago


/*Estilos*/
div#order_review {
    
    padding: 0 2em;
    border-width: 0 2px 2px;
    border-style: solid;
    border-color: #dddddd;
    width: 40%;
    float: right;
}

/*Sacar mensaje*/
div.woocommerce-info {display:none;}

/*Sticky*/
// Listado de Productos carrito lado derecho
#order_review {
    position: -webkit-sticky;
    position: sticky;
    top: 150px;
    z-index:99;
}
body {   overflow-x:visible;}

/*****¿Tienes un cupón?  Cupón y Alerta*****/

.woocommerce-info, .woocommerce-message {
    background-color: #f7f8fa;
    color: #474747;
    border: none;   // quita la linea horizontal  debajo de Finalizar compra
}


/*--- Alerta de Error ----*/
//cuando ocurre un error por ejemplo falta rellenar el campo nombre nos muestra un mensaje al lado izquierdo

.woocommerce-error {background-color: #ff7e7e;  border: none; color: #761f1f;}


form.checkout_coupon.woocommerce-form-coupon {
    padding: 3em;
    background: white;
    border-radius: 1em;
    margin-top: 0em;
    margin-bottom: 2em;
}

.woocommerce-error, .woocommerce-info, .woocommerce-message {
    text-shadow: none;
}

/*******Remover información adicional*******/

.woocommerce-additional-fields {
    display: none;
}

/******Espacio debajo de Términos y condiciones******/
.woocommerce-page.woocommerce-checkout form .form-row:last-child,
.woocommerce.woocommerce-checkout form .form-row:last-child {
	margin-bottom: 10px;
}


/******Ancho del borde******/
// Listado de Productos carrito lado derecho
form #order_review:not(.elementor-widget-woocommerce-checkout-page #order_review) {
	border-width: 2px 2px 2px;
}


// -----------  FIN  _WooCommerce_Checkout.scss --------- 

Vea tambien

→ Tutorial de youtube para modificar los campos de la pagina del checkout Así se EDITA el CHECKOUT de Woocommerce (con y sin Plugins)