Nuevo estilo de botón de carrito cuando el artículo está en el carrito en WooCommerce

Question

Utilizo un código que cambia el texto del botón "Agregar al carrito" de un producto si el artículo ya está en el carrito.

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

Dígame cómo puede cambiar el estilo del botón "Agregar al carrito" de un producto si el producto ya se ha agregado al carrito.

Intenté agregar código al archivo /loop/add-to-cart.php como se muestra aquí. Cambiar el estilo del botón Agregar al carrito cuando el producto está en el carrito en Woocommerce, pero no me funciona.

¿Hay otras opciones de código que ayudarían a resolver mi pregunta?

¡Estaré encantado de recibir tu ayuda!

Answer 1

Una forma es verificar jQuerysi un elemento determinado (el botón de agregar al carrito) contiene un texto determinado; si este es el caso, agregaremos una clase adicional a la que puede aplicar estilo CSS.

: contiene () Selector : seleccione todos los elementos que contienen el texto especificado.

Entonces obtienes:

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

---

Nota: El selector (clase) se puede nombrar de manera diferente según el tema que esté utilizando