Mensajes y notificaciones de errores de WooCommerce se muestran en la página de producto único, página del carrito, página de pago, página de mi cuenta y puede mostrar en la página de carga o en una acción de usuario específica.
El problema potencial es que, igual que el backend de WordPress, los mensajes de WooCommerce pueden usar mucho espacio vertical, por lo tanto, pueden empujar contenido útil más abajo en la página y posiblemente perturbar la navegación, especialmente en la página de pago.
Una solución genial puede ser colocar un botón «X» descartar en los avisos de WooCommerce, para que los clientes puedan cerrarlos rápidamente y recuperar algo de espacio.
Usaremos una mezcla de PHP, JS y CSS en el fragmento a continuación para lograr nuestro objetivo final. ¡Disfrutar!
Php + JS Fnippet: Agregue un botón de descarga @ WooCommerce Mensaje de pago y notificaciones de error
/** n*@snippet Close Button @ WooCommerce Checkout Notifications n*@how-to https://tdestudiodesign.com/tutoriales n*@author Tomás Lucas D´Amario, TD Estudio Design n*@compatible WooCommerce 7 n*@community https://tdestudiodesign.com/club */add_action( 'wp_loaded', 'tddesign_dismiss_woocommerce_message' );function tddesign_dismiss_woocommerce_message() {if ( is_admin() ) return;wc_enqueue_js( "$(document).on('updated_checkout checkout_error',function(){$('.woocommerce-message,.woocommerce-info,.woocommerce-NoticeGroup-checkout').each(function(){if (!$(this).find('.dizmiz').length) $(this).append('<span class='dizmiz' title='Dismiss'>x</span>').css('position','relative');});});$(document).on('click','.dizmiz',function(){$(this).parent().hide(600);});" );}
Fragmento de CSS: estilo el botón de despedida
.dizmiz { right: 1em; top: 1em; position: absolute; background: black; border-radius: 50%; height: 23px; width: 23px; line-height: 23px; font-size: 17px; text-align: center; color: white; font-weight: 900; cursor: pointer;}
¿Dónde agregar código personalizado?
Debes colocar PHP personalizado en funciones.php y CSS personalizado en style.css del tema de su hijo: ¿Dónde colocar la personalización de WooCommerce?
Este código todavía funciona, a menos que informe lo contrario. Para excluir los conflictos, cambie temporalmente al tema de la tienda, deshabilite todos los complementos, excepto WooCommerce, y pruebe el fragmento nuevamente: Solución de problemas de WooCommerce 101
Contenido relacionado
Tomás Lucas D´Amario
Programador y Desarrollador
Experto en WooCommerce y WordPress. Trabajando como un profesional independiente de WooCommerce desde 2016. Su objetivo es ayudar a los empresarios y desarrolladores a superar sus pesadillas de WooCommerce. Sigueme o contactame por Linkedin
