Adding add-to-cart Ajax after replacing loop

Hi everyone,

Firstly, link to my website build: https://hillfarmfinest.com/products/

I’ve been having a bit of an issue with my latest project. I used the free theme ‘Hestia‘ as a base for a website that I’m building.

I am using hooks to overwrite a starter theme’s ‘add-to-cart’ button on a custom page showing products. The weird thing is that when I loop through the add-to-cart button to add quantity options on my products, the original Ajax function disappears. I then implemented another function to add it back in (and cause my custom ‘view cart’ button’s items-in-cart number to update) but although it works in the cart, it doesn’t seem to be working for my custom shop page.

I am using this snippet in my header to handle the cart contents:

<?php if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {

$count = WC()->cart->cart_contents_count;
?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php 
if ( $count > 0 ) {
    ?>
    <span class="cart-contents-count"><?php echo esc_html( $count ); ?></span>
    <?php
}
    ?></a>

And here are my two functions in my child-theme functions.php:

/**
 * Ensure cart contents update when products are added to the cart via AJAX
*/

function my_header_add_to_cart_fragment( $fragments ) {

ob_start();
$count = WC()->cart->cart_contents_count;
?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php
if ( $count > 0 ) {
    ?>
    <span class="cart-contents-count"><?php echo esc_html( $count ); ?></span>
    <?php            
}
    ?></a><?php

$fragments['a.cart-contents'] = ob_get_clean();

return $fragments;
}

add_filter( 'woocommerce_add_to_cart_fragments', 'my_header_add_to_cart_fragment' );

/**
 * Add quantity to products in Products Page
 */
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );

function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
    $html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
    $html .= woocommerce_quantity_input( array(), $product, false );
    $html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
    $html .= '</form>';
}
return $html;
}

I think that my second function adding a new add-to-cart button is overwriting the initial Ajax functionality, but everything I try to do to add this functionality back in is not working. I have tried removing the theme’s hook that generates its own add-to-cart button in my functions.php but it doesn’t seem to be having any effect. I’m not the best at JS/jQuery so it’s probably that I’m not implementing my code properly.

Any help with this would be much appreciated.

Woocommerce System Status Report:

### WordPress Environment ###

Home URL: https://hillfarmfinest.com
Site URL: https://hillfarmfinest.com
WC Version: 2.6.14
Log Directory Writable: ✔
WP Version: 4.7.2
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: –
WP Cron: ✔
Language: en_US

### Server Environment ###

Server Info: Apache
PHP Version: 5.6.30
PHP Post Max Size: 8 MB
PHP Time Limit: 30
PHP Max Input Vars: 1000
cURL Version: 7.29.0
NSS/3.21 Basic ECC

SUHOSIN Installed: –
MySQL Version: 5.6.35
Max Upload Size: 2 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ❌ Your server does not have the SoapClient class enabled - some gateway plugins which use SOAP may not work as expected.
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

### Database ###

WC Database Version: 2.6.14
: 
woocommerce_sessions: ✔
woocommerce_api_keys: ✔
woocommerce_attribute_taxonomies: ✔
woocommerce_downloadable_product_permissions: ✔
woocommerce_order_items: ✔
woocommerce_order_itemmeta: ✔
woocommerce_tax_rates: ✔
woocommerce_tax_rate_locations: ✔
woocommerce_shipping_zones: ✔
woocommerce_shipping_zone_locations: ✔
woocommerce_shipping_zone_methods: ✔
woocommerce_payment_tokens: ✔
woocommerce_payment_tokenmeta: ✔
MaxMind GeoIP Database: ✔

### Active Plugins (16) ###

Ajax Search Lite: by Ernest Marcinko – 4.7.1
Contact Form 7: by Takayuki Miyoshi – 4.6.1
Multiple Themes: by David Gewirtz – 7.1.1
Loft Maintenance: by Loft Ocean – 1.0.0
Loginizer: by Raj Kothari – 1.3.2
Smart Slider 3 Pro: by Nextend – 3.1.6
One Click Order Re-Order: by CedCommerce – 1.0.9
Really Simple SSL: by Rogier Lankhorst – 2.5.2
Page Builder by SiteOrigin: by SiteOrigin – 2.4.24
SO Page Builder Animate: by Dunhakdis – 0.5
SiteOrigin Widgets Bundle: by SiteOrigin – 1.8.1
Woo Preview Emails: by Digamber Pradhan – 1.2.5
WooCommerce Stripe Gateway: by WooCommerce – 3.0.7
WooCommerce: by WooThemes – 2.6.14
WordPress Navigation Menu Links: by Agbonghama Collins – 1.0.3
WP Super Cache: by Automattic – 1.4.9

### Settings ###

Force SSL: ✔
Currency: GBP (£)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2

### API ###

API Enabled: ✔

### WC Pages ###

Shop Base: #156 - /shop/
Cart: #157 - /cart/
Checkout: #158 - /checkout/
My Account: #159 - /my-account/

### Taxonomies ###

Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

### Theme ###

Name: Hill Farm Finest
Version: 1.0
Author URL: 
Child Theme: ✔
Parent Theme Name: Hestia
Parent Theme Version: 1.1.4
Parent Theme Author URL: https://themeisle.com
WooCommerce Support: ✔

### Templates ###

Overrides: –