Añadir campo personalizado al checkout

Personalizar el CheckOut de WooCommerce

Gracias a los ganchos, acciones y filtros (hooks actions and filters) de WordPress podemos customizar a nuestro gusto casi cualquier cosa de nuestra web. Hoy quiero hablaros de como personalizar el CheckOut de WooCommerce, añadiendo nuevas funcionalidades a la página de pago, recientemente, en un proyecto que estamos desarrollando necesitábamos añadir un checkbox en donde se añadía un coste extra que se sumaba al total de productos del carrito si ese checkbox se deja marcado.

Añadir un coste extra en el CheckOut

Para ello primero necesitamos un campo personalizado dentro de nuestros pedidos de WooCommerce, que sea de tipo checkbox, a través de add_action le estamos diciendo que después de las notas del pedido añada mi campo personalizado( le he llamado checky al campo personalizado :P), este código va en el archivo functions.php del tema hijo:

//**AÑADO UN CAMPO PERSONALIZADO DE TIPO CHECKBOX */
add_action( 'woocommerce_after_order_notes', 'agrega_mi_campo_personalizado' );

function agrega_mi_campo_personalizado( $checkout ) {

woocommerce_form_field( 'checky', array(
'type' => 'checkbox',
'class' => array('my-field-class form-row-wide'),
'label' => __('Texto de la etiqueta del CheckBox'),
), $checkout->get_value( 'checky' ));

}

Siguiente paso, tenemos que actualizar la información del pedido con el nuevo campo que hemos creado, yo a modod de ejemplo voy a configurar el checkout para añadir el servicio de instalación del SO:

/**
* ACTUALIZAR LA INFORMACIÓN DEL PEDIDO CON EL NUEVO CAMPO
*/
add_action( 'woocommerce_checkout_update_order_meta', 'actualizar_info_pedido_con_nuevo_campo' );

function actualizar_info_pedido_con_nuevo_campo( $order_id ) {

if ( ! empty( $_POST['checky'] ) ) {
update_post_meta( $order_id, 'CHECKY', sanitize_text_field( $_POST['checky'] ) );
}
}

Para saber en un pedido realizado, si han marcado esa casilla, es necesario añadirlo en la página de pedidos, lo vamos añadir juesto debajo de los detalles de facturación:

 

/**
* MUESTRA EL VALOR DEL CHECKOUT EN LA PÁGINA DEL PEDIDO
*/
add_action( 'woocommerce_admin_order_data_after_billing_address', 'mostrar_campo_personalizado_en_admin_pedido', 10, 1 );

function mostrar_campo_personalizado_en_admin_pedido($order){
echo '

<strong>'.__('INSTALACIÓN DEL SO').':</strong> ' . get_post_meta( $order->id, 'CHECKY', true ) . '

';
}
Debajo de los datos de facturación, podemos ver el valor del chechout, 1 si es true, 0 si es false

Hasta aquí todo bien, tenemos ya nuestro checkbox configurado, pero aún no hace nada, necesitamos que cuando se quede checkeado el coste total del pedido se recalcule (por lo que habrá que usar JavaScript) sumando el importe extra que añadamos y que cuando se descarque se quite ese precio extra. Lo primero, con JS, vamos a recoger el evento click del CheckOut, para que cuando se le de click, recalcule el pedido, usando el trigger update_checkout.

Usamos JavaScript para recoger el evento click sobre el checkout que hemos creado

add_action( 'wp_footer', 'woocommerce_add_custom_extra', 357 );
function woocommerce_add_custom_extra() {
    if (is_checkout()) {
    ?>
	<script type="text/javascript">
		var $j = jQuery.noConflict();
		$j(function(){
			$j( document ).ready(function( $ ) {
				$j('#checky').click(function(){
					$j('body').trigger('update_checkout');
			});
		});
		});
    </script>
    
    <?php
    }
}

Por último, lo que nos falta es establecer que coste extra queremosañadir, para ponerlo junto al pedido y que se sume todo, para ello usamos el action woo_add_custom_extra

add_action( 'woocommerce_cart_calculate_fees', 'woo_add_custom_extra', 43, 1);
function woo_add_custom_extra( $cart ){
        if ( ! $_POST || ( is_admin() && ! is_ajax() ) ) {
        return;
    }

    if ( isset( $_POST['post_data'] ) ) {
        parse_str( $_POST['post_data'], $post_data );
    } else {
        $post_data = $_POST;
    }

    if (isset($post_data['checky'])) {
        $extracost = $mynum;
        WC()->cart->add_fee( 'Instalación del SO','20' );
    }

}

Con el CheckBox marcado
Sin el CheckBox marcado

 

He puesto el ejemplo de si estamos vendiendo un ordenador, sin SO instalado, en el checkout tenemos la opción de añadir el servicio de instalar el SO o no.

Con esto hemos personalizado el CheckOut de WooCommerce añadiendo una nueva funcionalidad muy útil.

2 comentarios en “Personalizar el CheckOut de WooCommerce

  1. Hola, tengo una web en woocommerce y quería saber si se puede poner la casilla del TOTAL en verde, luego de que calculo el total (producto + envío + cupones (si hubiese). No soy programadora, y el ingeniero que se ocupa de mi web esta de viaje.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información sobre protección de datos

  • Responsable: Laura Díaz
  • Fin del tratamiento: Controlar el spam, gestión de comentarios
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  • Derechos: Acceso, rectificación, portabilidad, olvido.
  • Contacto: laura.bobysuh@gmail.com.
  • Información adicional: Más información en nuestra política de privacidad.