Enable ajax on custom add-to-cart buttons in Woocommerce

Question

In WooCommerce, I would like to enable Ajax on my custom add to card buttons. You can check it on my website here. Any help is appreciated.

Here is my code that create product links from a product category with a shortcode:

function woo_category_design_caa1( $atts ) {
    $category_id = $atts['category'];

    if(class_exists('WooCommerce')){
        $args = array(
            'post_type'             => 'product',
            'post_status'           => 'publish',
            'posts_per_page'        => -1,
            'tax_query'             => array(
                array(
                    'taxonomy'      => 'product_cat',
                    'field'         => 'term_id', //This is optional, as it defaults to 'term_id'
                    'terms'         => $category_id,
                    'operator'      => 'IN' // Possible values are 'IN', 'NOT IN', 'AND'.
                )
            )
        );

        if( $term = get_term_by('id', $category_id, 'product_cat')){
            $cat_name =  $term->name;
        }

        $products_list = new WP_Query($args);
        if($products_list->have_posts()){
            $tableHtml = '';
            $tableHtml .= '<div class="menu1">';
            $tableHtml .= "<div class='heading-menu' id='a" . $category_id . "'>".$cat_name."</div>";
            $tableHtml .= '<ul>';
            while($products_list->have_posts()){
                $products_list->the_post();
                $_product = wc_get_product(get_the_ID());
                if($_product->is_type( 'variable' )){
                    $args = array(
                        'post_type'     => 'product_variation',
                        'post_status'   => array( 'private', 'publish' ),
                        'numberposts'   => -1,
                        'orderby'       => 'menu_order',
                        'order'         => 'asc',
                        'post_parent'   => get_the_ID() // $post->ID
                        );
                        $variations = get_posts( $args );
                        $price ='';
                        $var_title = '';
                        $link_1 = '';
                        foreach($variations as $variation){
                            $var_title = $var_title . "/" . $variation->post_title;
                            //$price = $price . "/" . get_post_meta($variation->ID, '_regular_price', true);
                            $price = $price . '<a class="btn-link-atc" href="/order-online/?add-to-cart='.get_the_ID().'&variation_id='.$variation->ID.'"> ' . $variation->post_title .' &#x20b9; '. get_post_meta($variation->ID, '_regular_price', true) . ' </a>';
                        }
                }else{
                    $price = '<a class="btn-link-atc" href="/order-online/?add-to-cart='.get_the_ID().'">Add To Cart &#x20b9; '.get_post_meta(get_the_ID(), '_regular_price', true).'</a>';
                    //$price = get_post_meta(get_the_ID(), '_regular_price', true);
                }
                $tableHtml .= '<li>
                <div class="title">'.get_the_title().'</div><span>'.$price.'</span></li>';
            }
            $tableHtml .=  '</ul>';
            $tableHtml .=  '</div>';

            return $tableHtml;
            //return ' ';
        }
        else {
            return "Nothing Found.";
        }
    }
    else {
        return "Problem fetching data !";
    }


}
add_shortcode('woo_products_from_category_type1', 'woo_category_design_caa1');

Answer 1

Updated… Your code has a lot of little mistakes and I have completely revisited it to enable Ajax add to cart functionality even on product variations (which is not so simple).

I have renamed your Shortcode from [woo_category_design_caa1] to [products_from_cat]… Your function name stays unchanged.

Here is the correct functional code with Ajax add to cart enabled:

if( ! function_exists('woo_category_design_caa1') && class_exists('WooCommerce') ) {
    function woo_category_design_caa1( $atts ) {
        // Shortcode attributes
        $atts = shortcode_atts( array(
            'category' => '', // <= Set the default product category ID
        ), $atts, 'products_from_cat' );

        $products = new WP_Query( array(
            'post_type'      => 'product',
            'post_status'    => 'publish',
            'posts_per_page' => -1,
            'tax_query'      => array( array(
                'taxonomy' => 'product_cat',
                'field'    => 'term_id',
                'terms'    => $atts['category'],
                'operator' => 'IN',
            ) )
        ) );

        if($products->have_posts()):
            $term_name = get_term( $atts['category'], 'product_cat')->name; // The product category Name

            $output = '<div class="menu1">
            <div class="heading-menu" id="a' . $atts["category"] . '">'.$term_name.'</div>
            <ul>';
            while( $products->have_posts() ): $products->the_post();
                $product = wc_get_product($products->post->ID); // The WC_Product object (instance)
                $type = $product->get_type();

                if( $product->is_type( 'variable' ) && $product->is_in_stock() ){
                    $variations_ids = $product->get_visible_children(); // Get the variations IDs
                    $class = 'btn-link-atc';
                    $buttons = array();

                    foreach( $variations_ids as $variation_id ){
                        $variation = wc_get_product($variation_id); // The WC_Product_Variation object (instance)
                        // Get the variation attributes
                        $variation_attributes = $variation->get_attributes();
                        $attributes = array();
                        foreach( $variation_attributes as $taxonomy => $term_slug ){
                            $attributes[] = get_term_by( 'slug', $term_slug, $taxonomy )->name;
                        }
                        $attributes = ' - ' . implode( ' - ', $attributes );
                        // Get the correct button classes
                        $class = implode( ' ', array_filter( array(
                            'btn-link-atc',
                            'button',
                            'product_type_' . $variation->get_type(),
                            $product->is_purchasable() && $variation->is_in_stock() ? 'add_to_cart_button' : '',
                            $variation->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
                        ) ) );
                        $price = $variation->get_price();
                        if($variation->is_in_stock()){
                            $buttons[] = sprintf( '<a rel="nofollow" href="%s" data-quantity="1" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
                                esc_url( $variation->add_to_cart_url() ),
                                esc_attr( $variation->get_id() ),
                                esc_attr( empty( $variation->get_sku() ) ? $product->get_sku() : $variation->get_sku() ),
                                esc_attr( isset( $class ) ? $class : 'btn-link-atc button' ),
                                esc_html( $variation->add_to_cart_text() ) . $attributes . ' - ' . wc_price($price)
                            );
                        }
                    }
                    $add_to_cart = implode(' <br />', $buttons);
                } elseif( ! $product->is_type( 'variable' ) && $product->is_in_stock() ){
                    $class = implode( ' ', array_filter( array(
                        'btn-link-atc',
                        'button',
                        'product_type_' . $product->get_type(),
                        $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
                        $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
                    ) ) );
                    $price = $product->get_price();
                    $add_to_cart = sprintf( '<a rel="nofollow" href="%s" data-quantity="1" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
                        esc_url( $product->add_to_cart_url() ),
                        esc_attr( $product->get_id() ),
                        esc_attr( $product->get_sku() ),
                        esc_attr( isset( $class ) ? $class : 'btn-link-atc button' ),
                        esc_html( $product->add_to_cart_text() ) . ' - ' . wc_price($price)
                    );
                }
                $output .= '<li><div class="title">'.$product->get_title().'</div><span>'.$add_to_cart.'</span></li>';
            endwhile;
            $output .=  '</ul>
            </div>';

            wp_reset_postdata();
            wp_reset_query();

            return $output;
        else:
            return "Nothing Found.";
        endif;
    }
    add_shortcode('products_from_cat', 'woo_category_design_caa1');
}

This code goes on function.php file of your active child theme (or theme). Tested and works.

---

---

Each time a product will be added to cart, it will make appear a "view cart" button… You can hide it with the following CSS rule:

a.added_to_cart.wc-forward {
    display:none;
}