Nouveau style de bouton de panier lorsque l'article est dans le panier dans WooCommerce

Question

J'utilise un code qui modifie le texte du bouton «Ajouter au panier» pour un produit si l'article est déjà dans le panier.

/* for single product */
add_filter( 'woocommerce_product_single_add_to_cart_text', 'single_product_button_text' );
 
function single_product_button_text( $text ) { if( WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( get_the_ID() ) ) ) { $text = 'Product in cart';
    }
 
    return $text; } /* for archive/category pages */ add_filter( 'woocommerce_product_add_to_cart_text', 'products_button_text', 20, 2 ); function products_button_text( $text, $product ) { if( $product->is_type( 'simple' )
       && $product->is_purchasable() && $product->is_in_stock()
       && WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( $product->get_id() ) ) ) { $text = 'Product in cart';
 
    }
 
    return $text;
 
}

Dites-moi comment vous pouvez changer le style du bouton "Ajouter au panier" pour un produit si le produit a déjà été ajouté au panier?

J'ai essayé d'ajouter du code au fichier /loop/add-to-cart.php comme indiqué ici Changer le style du bouton Ajouter au panier lorsque le produit est dans le panier dans Woocommerce mais cela ne fonctionne pas pour moi.

Existe-t-il d'autres options de code qui pourraient aider à résoudre ma question?

Je serai heureux de votre aide!

Answer 1

Une façon est de vérifier jQuerysi un certain élément (votre bouton d'ajout au panier) contient un certain texte, si tel est le cas, nous ajouterons une classe supplémentaire que vous pourrez styliser via CSS.

: contains () Selector - Sélectionnez tous les éléments contenant le texte spécifié.

Donc, vous obtenez:

function action_wp_footer() {
    ?>
    <script>
        jQuery(document).ready(function($) { var selector = '.add_to_cart_text:contains("Product in cart")'; // Selector contains specific text if ( $( selector ).length > 0 ) {
                $( selector ).addClass( 'product-is-added' ); } else { $( selector ).removeClass( 'product-is-added' );            
            }
            
        });
    </script>
    <?php
}
add_action( 'wp_footer', 'action_wp_footer' );

---

Remarque: le sélecteur (classe) peut être nommé différemment selon le thème que vous utilisez