I created a customized add to cart button and I'm using slider so the user can slide the product images directly from the archive page everything is working just fine, but the newly displayed products in the scrolling, the slider and the add to cart button not working on them, the add to cart button refresh the page without adding the product to the cart while the slider not working at all, what seems the issue here? please take a look on my codebase content-product.php <?php /** * The template for displaying product content within loops * * @package WooCommerce/Templates * @version 3.6.0 */ defined( 'ABSPATH' ) || exit; global $product; // Ensure visibility if ( empty( $product ) || ! $product->is_visible() ) { return; } ?> <section <?php wc_product_class( 'product', $product ); ?> data-product_id="<?php echo esc_attr($product->get_id()); ?>"> <div class="product-wrapper"> <?php do_action( 'woocommerce_before_shop_loop_item' ); ?> <div class="thumbnail-wrapper"> <a href="<?php the_permalink(); ?>"> <div class="swiper-container"> <div class="swiper-wrapper"> <?php echo '<div class="swiper-slide">' . woocommerce_get_product_thumbnail() . '</div>'; $product = wc_get_product( get_the_ID() ); $gallery_image_ids = $product->get_gallery_image_ids(); if ( ! empty( $gallery_image_ids ) ) { foreach ( $gallery_image_ids as $image_id ) { $image_url = wp_get_attachment_url( $image_id ); echo '<div class="swiper-slide"><img src="' . esc_url( $image_url ) . '" alt="Product Image" /></div>'; } } ?> </div> </div> </a> <?php do_action( 'woocommerce_shop_loop_item_title' ); do_action( 'woocommerce_after_shop_loop_item_title' ); ?> </div> <?php if ( $product->is_type( 'variable' ) ) : ?> <div class="add-to-cart-wrapper"> <?php woocommerce_template_loop_add_to_cart(); ?> </div> <?php else : ?> <div class="add-to-cart-wrapper"> <form class="custom-add-to-cart-form" data-product_id="<?php echo esc_attr( $product->get_id() ); ?>"> <input type="hidden" name="product_id" value="<?php echo esc_attr( $product->get_id() ); ?>"> <!-- Add extra options here --> <button type="submit" class="button">Add to Cart</button> </form> </div> <?php endif; ?> </div> <div class="meta-wrapper"> <?php $terms = get_the_terms( $product->get_id(), 'product_cat' ); $first_sub_category = ''; if ( $terms && ! is_wp_error( $terms ) ) { foreach ( $terms as $term ) { if ( $term->parent != 0 ) { $first_sub_category = $term; break; } } } if ( ! empty( $first_sub_category ) ) { $link = get_term_link( $first_sub_category ); echo '<span class="posted_in"><a href="' . esc_url( $link ) . '">' . esc_html( $first_sub_category->name ) . '</a></span>'; } ?> <?php do_action( 'woocommerce_after_shop_loop_item' ); ?> </div> </section> custom-ajax-add-to-cart.js jQuery(document).ready(function($) { $('.custom-add-to-cart-form').on('submit', function(e) { e.preventDefault(); var $form = $(this); var product_id = $form.data('product_id'); $.ajax({ type: 'POST', url: custom_ajax_object.ajax_url, data: { action: 'custom_add_to_cart', product_id: product_id }, success: function(response) { if (response.success) { $(document.body).trigger('wc_fragment_refresh'); $('.woocommerce-notices-wrapper').html('<div class="woocommerce-message">' + response.data.message + '</div>'); } else { $('.woocommerce-notices-wrapper').html('<div class="woocommerce-error">' + response.data.error + '</div>'); } } }); }); }); Swiper.js enqueue snippet function enqueue_swiper_scripts() { // Enqueue Swiper CSS wp_enqueue_style('swiper-css', 'https://unpkg.com/swiper/swiper-bundle.min.css'); // Enqueue Swiper JS wp_enqueue_script('swiper-js', 'https://unpkg.com/swiper/swiper-bundle.min.js', array('jquery'), null, true); // Add Swiper initialization script wp_add_inline_script('swiper-js', " document.addEventListener('DOMContentLoaded', function() { var swiper = new Swiper('.swiper-container', { loop: true, }); }); "); } add_action('wp_enqueue_scripts', 'enqueue_swiper_scripts'); add to cart button snippet add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' ); function custom_enqueue_scripts() { wp_enqueue_script( 'custom-ajax-add-to-cart', get_template_directory_uri() . '/js/custom-ajax-add-to-cart.js', array( 'jquery' ), null, true ); wp_localize_script( 'custom-ajax-add-to-cart', 'custom_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) ); }