Problème de validation de l’image principale dans WooCommerce

[Gregoryen]

Salut tout le monde,

Je travaille avec WordPress et WooCommerce, et j’ai mis en place un script dans functions.php qui oblige à remplir certains champs avant de pouvoir publier un produit (nom, prix, description, image, etc.). Tout fonctionne bien, sauf pour l’image principale dans un cas spécifique.

Si je commence par ajouter l’image et que je remplis ensuite les autres champs, tout fonctionne parfaitement : le bouton “Publier” est activé une fois tous les champs remplis.

Par contre, si j’ajoute l’image en dernier, le script ne semble pas la prendre en compte. Il continue d’afficher un message demandant d’ajouter une image et bloque le bouton “Publier”. Pourtant, l’image est bien présente. Pour contourner le problème, je dois modifier un autre champ (comme le titre ou le prix) pour forcer une actualisation et que l’image soit enfin reconnue.

Voici mon script :

function ajouter_verification_champs_woocommerce() {
    if (get_post_type() !== 'product') return;

    ?>
    <script>
        jQuery(document).ready(function ($) {
            // Créer un conteneur pour le message d'erreur
            $('.editor-post-publish-button__button, #publish').after('<div id="champs-obligatoires-erreur" style="color: #d63638; margin-top: 5px;"></div>');
            
            function verifierChamps() {
                let erreurs = [];
                let champsManquants = [];

                // Nom du produit
                if ($('#title').val().trim() === "") {
                    erreurs.push("Ajoutez un nom au produit");
                    champsManquants.push("Nom du produit");
                }

                // Catégorie
                if ($('#product_catchecklist input:checked').length === 0) {
                    erreurs.push("Ajoutez au moins une catégorie");
                    champsManquants.push("Catégorie");
                }

                // Étiquettes
                let tagsSelected = $('#product_tagchecklist .selectit input:checked').length;
                let tagsAdded = $('#product_tag .tagchecklist span').length;
                if (tagsSelected === 0 && tagsAdded === 0) {
                    erreurs.push("Ajoutez au moins une étiquette");
                    champsManquants.push("Étiquette");
                }

                // Marque
                if ($('#product_brandchecklist input:checked').length === 0) {
                    erreurs.push("Ajoutez une marque");
                    champsManquants.push("Marque");
                }

                // Description
                if ($('#content').val().trim() === "") {
                    erreurs.push("Ajoutez une description");
                    champsManquants.push("Description");
                }

                // Image principale
                if (!$('#set-post-thumbnail img').length) {
                    erreurs.push("Ajoutez une image principale");
                    champsManquants.push("Image principale");
                }

                // Prix : Remplacer la virgule par un point pour la validation
                let prix = $('#_regular_price').val().trim();
                let prixFloat = prix.replace(',', '.');
                if (prix === "" || isNaN(prixFloat) || parseFloat(prixFloat) <= 0) {
                    erreurs.push("Ajoutez un prix valide");
                    champsManquants.push("Prix");
                }

                // Gestion du bouton et du message
                let boutonPublier = $('.editor-post-publish-button, #publish');
                let messageErreur = $('#champs-obligatoires-erreur');

                if (erreurs.length > 0) {
                    boutonPublier.attr('disabled', true);
                    messageErreur.html('<p style="color:rgb(255, 0, 0); font-size: 17px; background-color:rgb(0, 0, 0); border: 5px solid rgb(255, 0, 0); padding: 10px; text-align: center;"><strong><u>⚠️ Vous devez remplir les champs suivants avant de publier :</u></strong><br><span style="color:rgb(255, 170, 0); font-size:15px; background-color: #000000;"><strong>' + champsManquants.map(function(champ) {
                        return '[ ' + champ + ' ]';
                    }).join(", ") + '</strong></span></p>');
                } else {
                    boutonPublier.attr('disabled', false);
                    messageErreur.text("");
                }
            }

            // Vérification en temps réel sur différents événements
            $('#title, #content, #_regular_price').on('input', verifierChamps);
            $('#product_catchecklist, #product_brandchecklist').on('change', verifierChamps);
            $('#product_tag .tagchecklist').on('DOMSubtreeModified', verifierChamps);

            // Surveiller les changements dans la zone de l'image avec MutationObserver
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.type === 'childList') {
                        verifierChamps();
                    }
                });
            });

            // Configurer l'observateur pour surveiller #set-post-thumbnail
            const config = { childList: true, subtree: true };
            observer.observe(document.getElementById('set-post-thumbnail'), config);

            // Vérification initiale
            verifierChamps();
        });
    </script>
    <?php
}
add_action('admin_footer', 'ajouter_verification_champs_woocommerce');

Je pense que mon script ne détecte pas correctement l’ajout de l’image si c’est la dernière action avant de publier. Avez-vous une idée de comment forcer la détection de l’image en temps réel, sans avoir à modifier un autre champ ?

Merci d’avance pour votre aide !