Neuer Stil der Warenkorbschaltfläche, wenn sich der Artikel in WooCommerce im Warenkorb befindet

Question

Ich verwende einen Code, der den Text der Schaltfläche "In den Warenkorb" für ein Produkt ändert, wenn sich der Artikel bereits im Warenkorb befindet.

/* 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;
 
}

Sagen Sie mir, wie Sie den Stil der Schaltfläche "In den Warenkorb" für ein Produkt ändern können, wenn das Produkt bereits in den Warenkorb gelegt wurde.

Ich habe versucht, der Datei /loop/add-to-cart.php Code hinzuzufügen, wie hier gezeigt. Ändern Sie den Stil der Schaltfläche zum Hinzufügen zum Warenkorb, wenn sich das Produkt in Woocommerce im Warenkorb befindet, aber es funktioniert bei mir nicht.

Gibt es andere Codeoptionen, die zur Lösung meiner Frage beitragen könnten?

Ich freue mich über Ihre Hilfe!

Answer 1

Eine Möglichkeit besteht darin, zu überprüfen, jQueryob ein bestimmtes Element (Ihre Schaltfläche zum Hinzufügen zum Warenkorb) einen bestimmten Text enthält. In diesem Fall fügen wir eine zusätzliche Klasse hinzu, über die Sie einen Stil erstellen können CSS.

: enthält () Selektor - Wählen Sie alle Elemente aus, die den angegebenen Text enthalten.

So bekommen Sie:

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' );

---

Hinweis: Der Selektor (Klasse) kann je nach verwendetem Thema unterschiedlich benannt werden