Campos condicionales en el formulario de checkout de Woocommerce

Campos condicionales en el formulario de checkout de Woocommerce

por Marcel Cabrera - 15 septiembre 2018 Categorías: Woocommerce

En este artículo continuamos con la personalización y edición del formulario de checkout de Woocommerce, en ocasiones queremos mostrar ciertos campos cuando la gente compra algún tipo de productos solamente deseamos mostrar unos campos y cuando es otro tipo de productos mostrar algunos diferentes. El caso más común es cuando tenemos una tienda que vende tanto productos físicos como productos virtuales.

Para simplificar el checkout en este caso lo que queremos hacer es solo mostrar los campos de dirección cuando en el carrito de compras del usuario haya al menos un producto físico que requiere envío y entonces definitivamente necesitamos que el usuario llene los campos de dirección. Sin embargo, cuando solo tiene productos virtuales en su carrito no hay ninguna necesidad de que el usuario tenga que llenar la información de dirección y al contrario esto puede incluso hacer que el usuario se moleste o frustre al tener que llenar algo que claramente no es necesario para su pedido y podemos perder una compra por esta mala experiencia, entonces definitivamente queremos solo mostrarle los campos de email, nombre y su información de tarjeta o pago.

Por default Woocommerce nos muestra todos los campos, no importando de que tipo de producto se esté comprando, entonces vamos a modificar el proceso de checkout para que funcione de la siguiente manera:

Si hay al menos un producto físico en el carrito: Mostrar todos los campos incluyendo los campos de dirección, email, nombre y método de pago.

Formulario de checkout de Woocommerce con todos los campos habilitados

 

Si solo hay productos virtuales en el carrito: Mostrar solo los campos de Nombre, correo electrónico y método de pago.

Formulario de checkout de Woocommerce específico para cuando solo hay productos virtuales en el carrito

 

Detectar si solamente hay productos virtuales en el pedido del checkout de Woocommerce

Lo primero que tenemos que haces es en nuestro checkout debemos revisar si todos los productos que se encuentran en el pedido son virtuales, es decir, que no exista ningún producto físico que requiera envío. Para esto primero creamos una función que simplemente nos retorne Verdadero en el caso que sea cierta la condición y que retorne Falso si hay al menos un producto que requiera envío físico, esto lo podemos lograr en nuestro archivo functions.php de nuestro tema (recuerda siempre usar un child theme si estás utilizando un theme comercial que puede ser actualizado para no perder tus cambios en dicha actualización). Esta función será el motor principal de nuestro formulario de checkout y la utilizaremos más adelante para determinar esos campos que queremos mostrar en ambos escenarios.

function claserama_cart_only_has_virtual_product() {
  //Primero declaramos algunas variables que ocuparemos
  $has_only_virtual=false; //Esta será la variable final que retornaremos y que nos dice si solo hay artículos virtuales en el pedido
  $virtual_products = 0; //Primero iniciamos el contador de productos virtuales a 0
  $total_products = 0; // Iniciamos el contador de todos los productos a cero

  // Vamos a checar cada uno de los elementos que se encuentran en el carrito, uno por uno por medio de la función WC()->cart->get_cart() que nos regresa un objeto con cada uno de los elementos
  foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {

    //Si el elemento del carrito es del tipo "virtual" entonces agregamos uno a nuestro variable $virtual_products que cuenta la cantidad de productos virtuales
    if($cart_item['data']->is_virtual()== true){
      $virtual_products+=1;
    }

    //Sumamos uno a nuestro total de productos, independientemente de si el producto es virtual o no
    $total_products+=1;
  }

  // Si al terminar el loop la cantidad de productos virtuales es igual a la cantidad de productos totales en el carrito, entonces quiere decir que solo hay productos virtuales por lo cual cambiamos a true el valor que retornaremos
  if($virtual_products == $total_products){
    $has_only_virtual = true;
  }

  //Si al terminar el loop la cantidad de productos virtuales no es igual a la cantidad de productos totales en el carrito, quiere decir que hay al menos un producto físico en nuestro carrito por lo cual el valor de nuestra variable $has_only_virtual seguirá en false

  //Finalmente retornamos el valor true o false alojado en nuestra variable $has_only_virtual
  return $has_only_virtual;
}

Editar los campos dependiendo de si solo hay productos virtuales

Ya tenemos una manera de detectar los tipos de productos que hay en nuestro carrito, ahora con esa función es momento de aplicarla a nuestros campos para lograr simplificar nuestro checkout, para esto utilizaremos el filtro wocommerce_checkout_fields, por medio del cual filtraremos los campos del checkout, este filtro recibe un argumento que es $fields que es un array con todos los campos del formulario de checkout, todos los posibles campos de este array están a continuación:

  • Billing
    • billing_first_name
    • billing_last_name
    • billing_company
    • billing_address_1
    • billing_address_2
    • billing_city
    • billing_postcode
    • billing_country
    • billing_state
    • billing_email
    • billing_phone
  • Shipping
    • shipping_first_name
    • shipping_last_name
    • shipping_company
    • shipping_address_1
    • shipping_address_2
    • shipping_city
    • shipping_postcode
    • shipping_country
    • shipping_state
  • Account
    • account_username
    • account_password
    • account_password-2
  • Order
    • order_comments

Teniendo conocimiento de esto, en nuestro archivo functions.php podemos realizar el procedimiento de filtrar estos campos y decidir cuales queremos mostrar basándonos en la condición que definimos anteriormente:

function claserama_unset_unneccesary_fields_checkout($fields){

//Verificar si en el carrito hay solamente productos virtuales mediante la función claserama_Cart_only_has_virtual_product() que creamos anteriormente
if( claserama_cart_only_has_virtual_product() == true ){
  // Si la función nos retorna verdadero

  //Creamos un array con los campos que queremos quitar de nuestro checkout si solo hay productos virtuales
  $billing_keys = array(
    'billing_phone', //campo de teléfono
    'billing_address_1', // campo de dirección
    'billing_city', // campo de ciudad
    'billing_postcode', // campo de código postal
    'billing_country', // campo de País
    'billing_state' // campo de Estado
  );

  //Por cada uno de esos campos del array que creamos, lo eliminamos de nuestro array de $fields o campos del checkout mediante la función unset()
  foreach($billing_keys as $key){
    unset($fields['billing'][$key]);
  }

}

//Eliminamos los campos innecesarios, esto es dependiendo de las necesidades de cada proyecto, en neustro caso nunca utilizamos estos campos por eso los quitamos indistintamente de si se requiere envío o no, por eso está fuera de nuestra condición anterior
unset($fields['billing']['billing_company']); // campo de la empresa
unset($fields['billing']['billing_address_2']); //Campo de dirección 2 opcional
unset($fields['shipping']['shipping_company']); // campo de empresa en envío
unset($fields['shipping']['shipping_address_2']); // campo de dirección 2 opcional en envío

//Finalente retornamos los campos de nuestro array $fields ya filtrados de acuerdo l tipo de productos que tenemos en el carrito
return $fields;
}
add_filter('woocommerce_checkout_fields','claserama_unset_unneccesary_fields_checkout');

Conclusiones

Como pueden ver es muy sencillo lograr un checkout simplificado para los usuarios que no necesitan llenar todos los campos de Woocommerce, estamos seguros que esto facilita mucho la compra del usuario y definitivamente ayudará a tener un abandono de checkout mucho menor. Podemos implementar otras condiciones por ejemplo cuando son productos descargables u otro tipo de productos pero con esto ya tenemos una base muy simple de seguir de como realizarlo.

Los dejamos con el código completo que hicimos en este artículo:

¿Tienes alguna otra manera de realizarlo? Nos encantaría saber de que manera lo resuelven ustedes, puedes darnos tus tips en los comentarios.

Deja un comentario

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

*
*
*