Offcanvas cart unable to refresh

[binvoyons]

Hello! Thank you for this great theme. I can't wait to test version 6!

In the meantime, I have a quick question about the AJAX refresh in the offcanvas cart. In a single product page, the default Add to cart button works fine (i.e. the offcanvas cart content refreshes as soon as the button is pressed), however, when I insert another Add to cart button, and click it, the offcanvas cart opens, but the content refresh doesn't happen. I have to refresh the page manually to see the product appear in the cart.

Here's my code for adding an add to cart button in a sticky bar at the bottom of the page, which is meant to appear in single product pages. This code is inserted in functions.php:

// Sticky bottom add to cart
function custom_add_to_cart_button() {
global $product;
// Check if it's a single product page
if (is_product()) {
? > 
<form action="<?php echo esc_url(wc_get_cart_url()); ?>" method="post" class="cart">
   <input type="hidden" name="add-to-cart" value="<?php echo esc_attr($product->get_id()); ?>" />
   <div id="bottomBar" class="invisible fixed-bottom py-3" style="transition: all 0.3s ease;">
      <div class="container container-small">
         <div class="sticky-bottom-add-to-cart">
            <div class="d-flex align-items-center">
               <div class="flex-fill" style="max-width:65px;">
                  <?php
                     // Display the product thumbnail
                     if ( has_post_thumbnail() ) {
                         $thumbnail_id = get_post_thumbnail_id();
                         $alt = get_the_title(); // Set alt to product title
                         echo get_the_post_thumbnail( get_the_ID(), 'thumbnail', ['alt' => $alt] );
                     } else {
                         // Display a default image or custom text if there's no thumbnail
                         echo '<img src="' . wc_placeholder_img_src() . '" alt="' . get_the_title() . '" class="woocommerce-placeholder" style="max-width: 50px; height: auto;" />';
                     }
                     ?>
               </div>
               <div class="flex-fill ps-3">
                  <p class="product-price fw-bold m-0 p-0"><?php echo wc_price( get_post_meta( get_the_ID(), '_price', true ) ); ?></p>
                  <p class="product-price text-sm text-muted m-0 p-0"><?php the_title(); ?></p>
               </div>
               <div class="text-right" style="min-width:160px;">
                  <div class="add-to-cart-btn my-auto">
                     <button type="submit" class="product_type_simple add_to_cart_button ajax_add_to_cart btn btn-primary" data-product_id="<?php echo esc_attr($product->get_id()); ?>" aria-label="<?php echo esc_attr(sprintf(__('Add to cart %s', 'woocommerce'), the_title('', '', false))); ?>">
                     <?php esc_html_e('Add to cart', 'woocommerce'); ?>
                     </button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</form>
< ? php
}
}
add_action('woocommerce_after_single_product', 'custom_add_to_cart_button');

Am I missing something? Do you have any idea what might be causing this problem? Thanks a lot!

[crftwrk]

Hi,

quickly formatted the <?php and works fine? Check https://dev.bootscore.me/product/belt/

Tested with v5.3.4 and latest developed version.

// Sticky bottom add to cart
function custom_add_to_cart_button() {
global $product;
// Check if it's a single product page
if (is_product()) {
?> 
<form action="<?php echo esc_url(wc_get_cart_url()); ?>" method="post" class="cart">
   <input type="hidden" name="add-to-cart" value="<?php echo esc_attr($product->get_id()); ?>" />
   <div id="bottomBar" class="invisible fixed-bottom py-3" style="transition: all 0.3s ease;">
      <div class="container container-small">
         <div class="sticky-bottom-add-to-cart">
            <div class="d-flex align-items-center">
               <div class="flex-fill" style="max-width:65px;">
                  <?php
                     // Display the product thumbnail
                     if ( has_post_thumbnail() ) {
                         $thumbnail_id = get_post_thumbnail_id();
                         $alt = get_the_title(); // Set alt to product title
                         echo get_the_post_thumbnail( get_the_ID(), 'thumbnail', ['alt' => $alt] );
                     } else {
                         // Display a default image or custom text if there's no thumbnail
                         echo '<img src="' . wc_placeholder_img_src() . '" alt="' . get_the_title() . '" class="woocommerce-placeholder" style="max-width: 50px; height: auto;" />';
                     }
                     ?>
               </div>
               <div class="flex-fill ps-3">
                  <p class="product-price fw-bold m-0 p-0"><?php echo wc_price( get_post_meta( get_the_ID(), '_price', true ) ); ?></p>
                  <p class="product-price text-sm text-muted m-0 p-0"><?php the_title(); ?></p>
               </div>
               <div class="text-right" style="min-width:160px;">
                  <div class="add-to-cart-btn my-auto">
                     <button type="submit" class="product_type_simple add_to_cart_button ajax_add_to_cart btn btn-primary" data-product_id="<?php echo esc_attr($product->get_id()); ?>" aria-label="<?php echo esc_attr(sprintf(__('Add to cart %s', 'woocommerce'), the_title('', '', false))); ?>">
                     <?php esc_html_e('Add to cart', 'woocommerce'); ?>
                     </button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</form>
<?php
}
}
add_action('woocommerce_after_single_product', 'custom_add_to_cart_button');
``