Como exibir uma mensagem enquanto o WooCommerce processa um pedido

				
					/**
 * Exibe uma mensagem enquanto o WooCommerce processa o pedido.
 *
 * A mensagem aparece somente quando o formulário é válido.
 *
 * Compatível com:
 * - Checkout em blocos do WooCommerce
 * - Checkout clássico do WooCommerce
 */

add_action( 'wp_footer', function () {

	// Carregar somente na página de checkout.
	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>
				<!-- Você pode alterar este título -->
				Aguarde enquanto processamos seu pedido
			</h3>

			<p>
				<!-- Você pode alterar esta mensagem -->
				Não recarregue nem feche esta página.
			</p>

		</div>
	</div>

	<style>

		/* Camada que cobre toda a tela */
		#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;
		}

		/* Caixa da mensagem */
		.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 carregamento */
		.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;

		/**
		 * Verifica se o WooCommerce encontrou algum erro.
		 */
		function checkoutHasErrors() {

			return Boolean(
				document.querySelector(
					/*
					 * Campos HTML obrigatórios ou inválidos.
					 * Inclui a caixa de seleção dos termos.
					 */
					'.wc-block-checkout :invalid,' +
					'form.checkout :invalid,' +

					/*
					 * Campos marcados como inválidos
					 * por meio de atributos de acessibilidade.
					 */
					'.wc-block-checkout [aria-invalid="true"],' +
					'form.checkout [aria-invalid="true"],' +

					/*
					 * Erros do checkout em blocos.
					 */
					'.wc-block-components-validation-error,' +
					'.wc-block-components-notice-banner.is-error,' +
					'.wc-block-store-notice.is-error,' +

					/*
					 * Erros do checkout clássico.
					 */
					'.woocommerce-error'
				)
			);
		}

		/**
		 * Exibir o aviso.
		 */
		function showProcessingMessage() {

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

			/*
			 * Medida de segurança:
			 * se o WooCommerce não responder, o aviso será fechado
			 * automaticamente após 60 segundos.
			 */
			clearTimeout(safetyTimer);

			safetyTimer = setTimeout(
				hideProcessingMessage,
				60000
			);
		}

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

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

			clearTimeout(safetyTimer);
		}

		/**
		 * Detectar o botão de fazer o 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;
				}

				/*
				 * Aguardar o WooCommerce validar os campos.
				 *
				 * Se os termos não forem aceitos ou algum campo
				 * for inválido, o WooCommerce mostrará o erro
				 * durante esse intervalo.
				 */
				setTimeout(function () {

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

					showProcessingMessage();

				}, 400);

			},
			true
		);

		/**
		 * Se o WooCommerce mostrar um erro posteriormente,
		 * ocultar o aviso imediatamente.
		 */
		const observer = new MutationObserver(function () {

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

		});

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

		/**
		 * Ocultar o aviso ao retornar usando o botão
		 * Voltar do navegador.
		 */
		window.addEventListener(
			'pageshow',
			hideProcessingMessage
		);

	})();
	</script>

	<?php
}, 100 );