Khandaker Toihidul Islam
Front-end Developer
React Js | Javascript | HTML | CSS | Bootstrap | Wordpress | PHP | Mysql

How to add “add to cart” button in woocommerce

For example we are going to implement add to cart button in product loop

Step 1: At first we have to enable ajax in woocommerce dashboard then create add to cart button that executes ajax. Please add this html button in product loop


			<a rel="nofollow" href="/?add-to-cart=1" data-quantity="1" data-product_id="<?php echo get_the_ID();?>" data-product_sku="" class="add_to_cart_button ajax_add_to_cart"><?php echo __('Lägg Till')?></a>
			

Step 2: Refresh count of cart item by ajax

Suppose our cart item count html as like

<span class="cart-counterss"><?php echo WC()->cart->get_cart_contents_count(); ?></span>

Finally we have to add the bellow codes in function.php file

add_filter( 'woocommerce_add_to_cart_fragments', 'wc_refresh_mini_cart_count');
function wc_refresh_mini_cart_count($fragments){
    ob_start();
    ?>
	<span class="cart-counterss"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
    <?php
        $fragments['.cart-counterss'] = ob_get_clean();
    return $fragments;
}

Enjoy Woocommerce !

You may also like...