Volver a Proyectos Listado de Artículos

WooCommerce: cómo personalizar el bloque ‘Notas del pedido’

Luis Ruiz

Escrito por Luis Ruiz Actualizado el

Explicamos cómo personalizar en WooCommerce el bloque de ‘Notas del pedido’ de la página de finalización de compra o checkout

En algunas ocasiones necesitamos modificar partes de la página de finalizar compra (checkout) de WooCommerce. Vamos a aprender a personalizar el bloque de notas del pedido mediante el filtro “woocommerce_checkout_fields” que trae este plugin de comercio electrónico.

Para empezar, modificaremos los siguientes puntos del bloque de las notas de pedido:

  • Título
  • descripción
Bloque de notas del pedido WooCommerce
Bloque de notas del pedido WooCommerce

Para hacerlo, tendremos que ir al fichero ‘functions.php’ y añadir el siguiente código:

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
     $fields['order']['order_comments']['label'] = ’Texto que aparecerá en el título';
     $fields['order']['order_comments']['placeholder'] = 'Texto que aparecerá en la descripción';
     return $fields;
}

Ahí sustituiremos “Texto que aparecerá en el título” y “Texto que aparecerá en la descripción” por los textos que necesitemos.

Los cambios se verán reflejados en la página de “Finalizar pago» o “Checkout”, según tengas configurado WooCommerce, con el siguiente resultado.

Resultado del bloque de notas de WooCommerce
Resultado del bloque de notas de WooCommerce

Eliminar Bloque de Notas de pedido en WooCommerce

Si lo que necesitas es eliminar el bloque de Notas del pedido, en el mismo fichero ‘functions.php’, añadiremos este código:

add_filter( 'woocommerce_checkout_fields' , ‘hidden_woocommerce_checkout_fields' );
function hidden_woocommerce_checkout_fields( $fields ) {
     unset($fields['order']['order_comments']);
     return $fields;
}

Otra forma más sencilla es añadir al bloque por CSS la regla “display:none”, así evitaríamos ejecutar el filtro, aunque el código seguiría existiendo.

Personalización a través de plugin

Si no te sientes cómodo o no te atreves con el código, puedes utilizar plugins como WooCommerce Checkout Manager (gratuito) o  Checkout Field Editor (pago)

Plugin Checkout field editor
Plugin Checkout field editor

Conclusiones

En Bubuku pensamos que usar WooCommerce es una buena opción para crear tu primer e-commerce, ya que permite un alto grado de personalización sin un gran coste. Y puesto que tienes instalado WordPress, puedes aprovechar para crear un blog para mejorar el posicionamiento y darte a conocer con una imagen más personal.