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
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' )
    ) );
}