Comment afficher un message pendant que WooCommerce traite une commande

				
					/**
 * Affiche un message pendant que WooCommerce traite la commande.
 *
 * Le message apparaît uniquement lorsque le formulaire est valide.
 *
 * Compatible avec :
 * - Paiement par blocs de WooCommerce
 * - Paiement classique de WooCommerce
 */

add_action( 'wp_footer', function () {

	// Charger uniquement sur la page de paiement.
	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>
				<!-- Vous pouvez modifier ce titre -->
				Veuillez patienter pendant le traitement de votre commande
			</h3>

			<p>
				<!-- Vous pouvez modifier ce message -->
				Ne rechargez pas et ne fermez pas cette page.
			</p>

		</div>
	</div>

	<style>

		/* Calque couvrant tout l’écran */
		#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;
		}

		/* Fenêtre du message */
		.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;
		}

		/* Indicateur de chargement */
		.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;

		/**
		 * Vérifie si WooCommerce a détecté une erreur.
		 */
		function checkoutHasErrors() {

			return Boolean(
				document.querySelector(
					/*
					 * Champs HTML obligatoires ou incorrects.
					 * Inclut la case des conditions.
					 */
					'.wc-block-checkout :invalid,' +
					'form.checkout :invalid,' +

					/*
					 * Champs signalés comme incorrects
					 * par les attributs d’accessibilité.
					 */
					'.wc-block-checkout [aria-invalid="true"],' +
					'form.checkout [aria-invalid="true"],' +

					/*
					 * Erreurs du paiement par blocs.
					 */
					'.wc-block-components-validation-error,' +
					'.wc-block-components-notice-banner.is-error,' +
					'.wc-block-store-notice.is-error,' +

					/*
					 * Erreurs du paiement classique.
					 */
					'.woocommerce-error'
				)
			);
		}

		/**
		 * Afficher le message.
		 */
		function showProcessingMessage() {

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

			/*
			 * Mesure de sécurité :
			 * si WooCommerce ne répond pas, le message se fermera
			 * automatiquement après 60 secondes.
			 */
			clearTimeout(safetyTimer);

			safetyTimer = setTimeout(
				hideProcessingMessage,
				60000
			);
		}

		/**
		 * Masquer le message.
		 */
		function hideProcessingMessage() {

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

			clearTimeout(safetyTimer);
		}

		/**
		 * Détecter le bouton de commande.
		 */
		document.addEventListener(
			'click',
			function (event) {

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

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

				/*
				 * Attendre que WooCommerce valide les champs.
				 *
				 * Si les conditions manquent ou si un champ est
				 * incorrect, WooCommerce affichera l’erreur
				 * pendant cet intervalle.
				 */
				setTimeout(function () {

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

					showProcessingMessage();

				}, 400);

			},
			true
		);

		/**
		 * Si WooCommerce affiche ensuite une erreur,
		 * masquer immédiatement le message.
		 */
		const observer = new MutationObserver(function () {

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

		});

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

		/**
		 * Masquer le message lors du retour avec le bouton
		 * Précédent du navigateur.
		 */
		window.addEventListener(
			'pageshow',
			hideProcessingMessage
		);

	})();
	</script>

	<?php
}, 100 );