Hoy te traigo diferentes personalizaciones que puedes hacer en los campos del checkout de tu WooCommerce. Todo ello con código para que sea lo más óptimo posible.
Recuerda que deberías añadir el código que necesites en tu propio plugin de funcionalidades. También puede añadirlo en tu archivo function.php de tu tema de WordPress, preferiblemente tu tema hijo, pero si cambias de tema perderás esta configuración.
Índice de contenidos
Añadir campos personalizados en el checkout de Woocommerce
A continuación veremos diferentes ejemplos de cómo agregar más campos personalizados a la página de pago de WooCommerce.
Revisa el código y adáptalo a tus necesidades.
Nuevo campo en el registro
Podemos añadir nuevos campos al formulario de registro, pero ten en cuenta que cuantos más campos añadas, más fricción creas en el proceso de venta, por lo que puedes perder conversiones.
En nuestro caso vamos a crear un campo de valoración del proceso de compra mediante campos de tipo radio.
add_action('woocommerce_before_order_notes', 'campo_selector_radio');
function campo_selector_radio($checkout3){
woocommerce_form_field( 'feed', array(
'type' => 'radio', //indica el tipo de campo que estamos creando
'required' => true, //cambiar de true (obligatorio) a false para hacerlo opcional
'class' => array('custom-field form-row-wide'),
'label' => ' Valora tu experiencia de compra.', //aqui puedes modificar el texto entrecomillado para preguntar lo que quieras
'options' => array(
'5' => '5',//puedes duplicar cada línea para añadir más respuestas
'4' => '4',
'3' => '3',
'2' => '2',
'1' => '1'
)
));
}Campo para newsletter
Es frecuente que incluyamos a nuestros clientes en una newsletter tras realizar la compra. Esto debe hacerse según la ley de protección de datos, y para ello es necesario recabar el consentimiento explícito. Mediante el siguiente código añadimos una casilla de verificación donde el cliente acepta ser añadido a la lista de correo.
add_action( 'woocommerce_after_order_notes', 'acepta_recibir_newsletter' );
function acepta_recibir_newsletter( $checkout ) {
woocommerce_form_field( 'subscriber', array(
'type' => 'checkbox',
//'required' => true,
'class' => array('custom-field form-row-wide'),
'label' => ' Apúntate a la newsletter.'
), $checkout->get_value( 'subscriber' ) );
}Este código puedes adaptarlo para que acepte aquella información que consideres.
Y esto me lleva al siguiente código.
Campo de aceptación de políticas de privacidad
Para adaptar nuestro WooCommerce a la ley de protección de datos, es obligatorio que en el proceso de compra el cliente acepte la política de privacidad, y sin ello no se pueda realizar la compra.
Este código es algo más complejo, crea un nuevo elemento en formulario de obligado cumplimiento.
Revisa el código para añadir tu URL de política de privacidad.
add_action( 'woocommerce_review_order_before_submit', 'acepta_politica_privacidad', 9 );
function acepta_politica_privacidad() {
woocommerce_form_field( 'privacy_policy', array(
'type' => 'checkbox',
'class' => array('form-row privacy'),
'label_class' => array('woocommerce-form__label woocommerce-form__label-for-checkbox checkbox'),
'input_class' => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox'),
'required' => true,
'label' => 'He leído y acepto la <a href="https://aqui-tu-dominio.com/politica-privacidad">Política de privacidad</a>'
));
}
add_action( 'woocommerce_checkout_process', 'validar_acepta_politica_privacidad' );
function validar_acepta_politica_privacidad() {
if ( ! (int) isset( $_POST['privacy_policy'] ) ) {
wc_add_notice( __( 'Debe aceptar la política de privacidad para continuar con el pedido' ), 'error' );
}
}Modificar campos de WooCommerce
Los campos del proceso de compra, también pueden modificarse, además de crearse. Ya tienes un post donde hablaba sobre cómo hacer un campo obligatorio u opcional en el checkout de Woocommerce.
En cualquier caso te dejo el código base para uno de los campos:
add_filter( 'woocommerce_billing_fields', 'campo_obligatorio_opcional_wc');
function campo_obligatorio_opcional_wc( $fields ) {
$fields['billing_first_name']['required'] = false; //false indica que el campo es opcional y true obligatorio. En este caso indica que el nombre es opcional
return $fields;
}Registrar campos en la base de datos
Ya hemos creado los campos, ahora debemos registrarlos en la base de datos cuando el cliente pulse sobre realizar comprar.
Para registrar la aceptación de suscripción a la newsletter el código sería el mostrado a continuación. El código verifica si se ha aceptado o no la suscripción.
add_action( 'woocommerce_checkout_update_order_meta','almacenar_en_base_de_datos' );
function almacenar_en_base_de_datos( $order_id ){
if ( ! empty( $_POST['subscriber'] ) ) {
update_post_meta( $order_id, 'subscriber', sanitize_text_field( $_POST['subscriber'] ) );
}
if ( ! empty( $_POST['feed'] ) ) {
update_post_meta( $order_id, 'feed',sanitize_text_field( $_POST['feed'] ) );
}Añadir elementos en el Checkout de WooCommerce
Añadir una imagen al checkout de WooCommerce
Es frecuente que tengamos que añadir durante el proceso de compra algún tipo de contenido, el más habitual es un texto informativo, logos sobre las políticas de contratación o los métodos de pago, entre otros.
add_action('woocommerce_review_order_before_submit','agregar_imagen_checkout');
function agregar_imagen_checkout(){
//En la siguiente linea sustituye la URL por la de la imagen que quieras agregar
echo '<img src="https://www.tu-dominio.com/wp-content/uploads/2022/04/nombre-imagen.png" />;
}Para mejorar la estética de la web, te recomiendo que utilices una imagen con fondo transparente, eso lo puedes conseguir con imágenes en formato png.
Añadir texto al checkout de WooCommerce
Es menos frecuente, pero también posible añadir un texto. Para ello puedes utilizar el siguiente código
add_action('woocommerce_review_order_before_submit','agregar_texto_checkout');
function agregar_texto_checkout(){
//En la siguiente linea sustituye la "Aqui tu texto" por la información que quieras mostrar, cuidado de no borrar las etiquetas p de html
echo '<p>Aqui tu texto</p>;
}Si necesitas añadir un título tan solo tienes que modificar las etiquetas p por aquel nivel de encabezado que quieras, de mayor a menor importancia: h1, h2. h3, h4, h5, h6.
Añadir mensajes en el checkout
Esto es frecuente cuando queremos recordar una cualidad o característica importante. Por ejemplo el envío o las devoluciones.
add_action('woocommerce_after_order_notes', 'mostrar_mensaje_wc');
function mostrar_mensaje_wc() {
echo 'Devoluciones gratuitas en pedidos superiores a 100€';
}Editar la estética de WooCommerce con CSS personalizado
En WordPress podemos añadir CSS personalizado de diferentes maneras. Una de ellas es mediante código, te mostramos el código, ten en cuenta que esto sirve para toda la instalación de WordPress, no solo para WooCommerce por lo que debes tener cuidado para que no interfiera con otros elementos de tu instalación.
En el siguiente ejemplo añade el código dentro de la propia página; añade un fondo rojo a la web.
add_action('wp_head','agrega_css_personalizado');
function agrega_css_personalizado(){
if(is_checkout()==true){
echo '<style> body{background:red!important;}<style>';
}
}También y como opción recomendada, lo ideal es vincular una hoja de estilos y así tener todo el css personalizado en ella. Para esto lo que tienes que hacer es crear la hoja de estilos CSS y añadir el siguiente código indicando la ruta donde está el archivo CSS.
add_action( 'wp_enqueue_scripts', 'agrega_hoja_css_personalizado' );
function agrega_hoja_css_personalizado(){
wp_enqueue_style( 'checkout_style',
get_stylesheet_directory_uri() . '/checkout-estilos.css'
);
}Estos temas pueden parecer arduos pero con la mente clara y paciencia se pueden lograr sin mayor complicación. Si tienes dudas puedes ponerte en contacto y vemos cómo puedo echarte una mano.