The Challenge
Implementing AJAX add-to-cart functionality on custom WooCommerce product pages can be a tricky task, especially when dealing with product variations. The default WooCommerce add-to-cart buttons work well, but you might want to create a more custom design or layout for your product pages.
The code you previously used had some issues, and we've completely revisited it to provide a functional solution that enables AJAX add-to-cart functionality, even for product variations.
The Solution
Here's the updated code that you can use to enable AJAX add-to-cart functionality on your custom WooCommerce product pages:
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 in the functions.php
file of your active child theme (or theme). It's been thoroughly tested and works as expected.
Let's break down the key aspects of this solution:
-
Shortcode Attributes: The code uses a shortcode called [products_from_cat]
to display products from a specific category. You can set the default category ID in the 'category'
parameter.
-
Product Loop: The code loops through the products in the specified category and checks if the product is a variable product or a simple product.
-
Variable Products: For variable products, the code generates a set of add-to-cart buttons, one for each variation. Each button includes the variation attributes and the variation price.
-
Simple Products: For simple products, the code generates a single add-to-cart button with the product price.
-
AJAX Functionality: The code ensures that the add-to-cart buttons have the necessary classes (add_to_cart_button
and ajax_add_to_cart
) to enable AJAX functionality, even for product variations.
After implementing this code, each time a product is added to the cart, a "View Cart" button will appear. If you want to hide this button, you can use the following CSS rule:
a.added_to_cart.wc-forward {
display:none;
}
Conclusion
Enabling AJAX add-to-cart functionality on custom WooCommerce product pages can be a challenging task, especially when dealing with product variations. However, with the updated code provided in this article, you can now easily implement this functionality and provide a seamless shopping experience for your customers.
Remember, if you have any further questions or need additional assistance, feel free to reach out to the Flowpoint.ai team. We're always here to help you optimize your website's performance and conversion rates.