Woocommerce add to cart help WordPress

Rempty answers:

Hello cdwm
If you customized a bit, i think you know how to edit the template files.
I am using the free version of the plugin https://github.com/wp-plugins/twi-woocommerce-gridslidercarousel-lite/


Open the template you are using(inside plugin folder/template/) grid.php, slider.php,etc
Now you must replace
<a href="<?php echo $product->add_to_cart_url(); ?>"><?php echo $product->add_to_cart_text(); ?></a>
with this code

<?php
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" data-quantity="%s" class="button %s product_type_%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
esc_attr( $product->product_type ),
esc_html( $product->add_to_cart_text() )
),
$product );
?>


And add this css

.twi-cart a.button{
display:block;
position: relative;
}
.twi-cart a.button.loading {
padding-right:2.618em
}

.twi-cart a.button.loading:after {
font-family:WooCommerce;
content: " \e01c ";
vertical-align:top;
-webkit-font-smoothing:antialiased;
font-weight:400;
position:absolute;
top:.618em;
right:1em;
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation:spin 2s linear infinite
}

.twi-cart .added_to_cart{
display:none !important;
}
.twi-cart a.button.added{
background-color:#777;
}
.twi-cart a.button.added:after{
font-family:WooCommerce;
content: " \e017 ";
margin-left:.53em;
vertical-align:bottom
}

With this the page will not refresh, add a loading icon , change color to gray and add a check icon.

---