Cómo mostrar un mensaje mientras WooCommerce procesa un pedido

				
					/**
 * Muestra un mensaje mientras WooCommerce procesa el pedido.
 *
 * El mensaje solo aparece cuando el formulario es válido.
 *
 * Compatible con:
 * - Checkout por bloques de WooCommerce
 * - Checkout clásico de WooCommerce
 */

add_action( 'wp_footer', function () {

	// Cargar únicamente en la página de finalizar compra.
	if (
		! function_exists( 'is_checkout' ) ||
		! is_checkout() ||
		is_order_received_page()
	) {
		return;
	}
	?>

	<div
		id="order-processing-message"
		aria-hidden="true"
	>
		<div class="order-processing-box">

			<div class="order-processing-spinner"></div>

			<h3>
				<!-- Puedes modificar este título -->
				Espera mientras procesamos tu pedido
			</h3>

			<p>
				<!-- Puedes modificar este mensaje -->
				No recargues ni cierres esta página.
			</p>

		</div>
	</div>

	<style>

		/* Capa que cubre toda la pantalla */
		#order-processing-message {
			position: fixed;
			inset: 0;
			z-index: 999999;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20px;
			background: rgba(0, 0, 0, 0.45);
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transition:
				opacity 0.2s ease,
				visibility 0.2s ease;
		}

		#order-processing-message.show {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}

		/* Caja del mensaje */
		.order-processing-box {
			width: 100%;
			max-width: 440px;
			padding: 32px 24px;
			border-radius: 10px;
			background: #ffffff;
			color: #222222;
			text-align: center;
			box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
		}

		.order-processing-box h3 {
			margin: 0 0 10px;
			font-size: 20px;
			font-weight: 600;
			line-height: 1.4;
		}

		.order-processing-box p {
			margin: 0;
			color: #666666;
			font-size: 15px;
			line-height: 1.5;
		}

		/* Indicador de carga */
		.order-processing-spinner {
			width: 36px;
			height: 36px;
			margin: 0 auto 20px;
			border: 4px solid #dddddd;
			border-top-color: #555555;
			border-radius: 50%;
			animation: order-processing-spin 0.8s linear infinite;
		}

		@keyframes order-processing-spin {
			to {
				transform: rotate(360deg);
			}
		}

	</style>

	<script>
	(function () {

		const overlay = document.getElementById(
			'order-processing-message'
		);

		if (!overlay) {
			return;
		}

		let safetyTimer;

		/**
		 * Comprueba si WooCommerce ha encontrado algún error.
		 */
		function checkoutHasErrors() {

			return Boolean(
				document.querySelector(
					/*
					 * Campos HTML obligatorios o incorrectos.
					 * Incluye el checkbox de términos.
					 */
					'.wc-block-checkout :invalid,' +
					'form.checkout :invalid,' +

					/*
					 * Campos marcados como incorrectos
					 * mediante accesibilidad.
					 */
					'.wc-block-checkout [aria-invalid="true"],' +
					'form.checkout [aria-invalid="true"],' +

					/*
					 * Errores del checkout por bloques.
					 */
					'.wc-block-components-validation-error,' +
					'.wc-block-components-notice-banner.is-error,' +
					'.wc-block-store-notice.is-error,' +

					/*
					 * Errores del checkout clásico.
					 */
					'.woocommerce-error'
				)
			);
		}

		/**
		 * Mostrar el aviso.
		 */
		function showProcessingMessage() {

			overlay.classList.add('show');
			overlay.setAttribute('aria-hidden', 'false');

			/*
			 * Medida de seguridad:
			 * si WooCommerce no responde, el aviso se cerrará
			 * automáticamente después de 60 segundos.
			 */
			clearTimeout(safetyTimer);

			safetyTimer = setTimeout(
				hideProcessingMessage,
				60000
			);
		}

		/**
		 * Ocultar el aviso.
		 */
		function hideProcessingMessage() {

			overlay.classList.remove('show');
			overlay.setAttribute('aria-hidden', 'true');

			clearTimeout(safetyTimer);
		}

		/**
		 * Detectar el botón de realizar el pedido.
		 */
		document.addEventListener(
			'click',
			function (event) {

				const button = event.target.closest(
					'.wc-block-components-checkout-place-order-button, #place_order'
				);

				if (!button || button.disabled) {
					return;
				}

				/*
				 * Esperamos a que WooCommerce valide los campos.
				 *
				 * Si faltan los términos o hay algún campo
				 * incorrecto, WooCommerce mostrará el error
				 * durante este intervalo.
				 */
				setTimeout(function () {

					if (checkoutHasErrors()) {
						hideProcessingMessage();
						return;
					}

					showProcessingMessage();

				}, 400);

			},
			true
		);

		/**
		 * Si WooCommerce muestra posteriormente un error,
		 * ocultamos inmediatamente el aviso.
		 */
		const observer = new MutationObserver(function () {

			if (checkoutHasErrors()) {
				hideProcessingMessage();
			}

		});

		observer.observe(
			document.body,
			{
				childList: true,
				subtree: true,
				attributes: true,
				attributeFilter: [
					'aria-invalid',
					'class'
				]
			}
		);

		/**
		 * Ocultar el aviso al regresar mediante el botón
		 * Atrás del navegador.
		 */
		window.addEventListener(
			'pageshow',
			hideProcessingMessage
		);

	})();
	</script>

	<?php
}, 100 );