'Woocommerce add class to label for button change text AJAX
Good Day I have the following code that I have added to my website to change add to cart text if the product is in the cart and add quantity. it works, well almost.
I'm Using the following. Wordpress Version 5.9.2
Woocommece Version 6.3.1
WooCommerce Product Table Version 2.6.4
//Rename the button on the Product page
add_filter( 'woocommerce_product_single_add_to_cart_text', 'ts_product_add_cart_button' );
function ts_product_add_cart_button( $label ) {
foreach( WC()->cart->get_cart() as $cart_item_key => $values ) {
$product = $values['data'];
$qty = $values['quantity'];
if( get_the_ID() == $product->get_id() ) {
$label = __('('. $qty . ') Added.', 'woocommerce');
//$label = __('Add', 'woocommerce');
}
}
return $label;
}
//Rename the button on the Shop page
add_filter( 'woocommerce_product_add_to_cart_text', 'ts_shop_add_cart_button', 99, 2 );
function ts_shop_add_cart_button( $label, $product ) {
if ( $product->get_type() == 'simple' && $product->is_purchasable() && $product->is_in_stock() )
{
foreach( WC()->cart->get_cart() as $cart_item_key => $values ) {
$_product = $values['data'];
$qty = $values['quantity'];
if( get_the_ID() == $_product->get_id() ) {
$label = __('('. $qty . ') Added.', 'woocommerce');
//$label = __('Added. Add another?', 'woocommerce');
}
}
}
return $label;
}
Now this works perfectly when you add the product to the cart it comes back (1) Added or (3) Added, the problem is I have to refresh the page to make it show.
The Page has ajax added for the cart but I cannot get the style to change to the class of the ajax. Now before you click Add to basket the class of the button is as follows
class="single_add_to_cart_button button alt" the full code here <button type="submit" name="add-to-cart" value="39045" class="single_add_to_cart_button button alt">Add to basket</button> then when you click on add to cart / buy it changes to class="single_add_to_cart_button button alt added" full code here <button type="submit" name="add-to-cart" value="33667" class="single_add_to_cart_button button alt added">Add to basket</button> now the ajax adds a ::after also
When I refresh the page and the text change it shows class="single_add_to_cart_button button alt" full code here <button type="submit" name="add-to-cart" value="33667" class="single_add_to_cart_button button alt">(1) Added.</button> how can I add this to the ajax or add a the class to the label so that I do not have to refresh the page to make the text change
I have tried a couple of options on stackoverflow.com but it did not work for me at all what I have tried
Relabel "add to cart" button after add to cart in WooCommerce
Change custom Ajax Add to Cart button text after add to cart in WooCommerce
I have notice that @LoicTheAztec and @7uc1f3r are the once closeses
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
