Custom styled "Add to cart" button in WooCommerce product archive pages

Question

I've replaced the default button function, thus I'm adding a new one. Trying to create a custom 50px circle "add to cart" button (fa-solid fa-cart-shopping icon, #F5F5F5 background, 5px padding, I want it to be placed in the bottom left corner of product images with 10px margins.

My archive template is made with Elementor using the “product archive” widget. My single product template is also made with Elementor and uses the “Product images” widget.

What I'm trying to get

A visual example of what I'm going for

For some background, I have replaced the archive "Add to cart" button text and function (to take clients to the product page), and this is the code I used. I activated it through the Code Snippets plugin.

add_filter( 'woocommerce_product_single_add_to_cart_text', 'woocommerce_custom_single_add_to_cart_text' ); 
function woocommerce_custom_single_add_to_cart_text() {
    return __( 'Buy Now', 'woocommerce' );  
}



add_filter( 'woocommerce_loop_add_to_cart_link', 'wpt_custom_view_product_button', 10, 2 );
function wpt_custom_view_product_button( $button, $product  ) {
// Ignore for variable products
//if( $product->is_type( 'variable' ) ) return $button;

$button_text = __( "Product Info", "woocommerce" );
    return '<a class="button wpt-custom-view-product-button" href="' . $product->get_permalink() . '">' . $button_text . '</a>';
}

What I tried and didn't work:

I added custom CSS (in Appearance > Customize > Add custom CSS) to style the "Add to Cart" button.

.custom-add-to-cart-btn {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 99;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #F5F5F5;
    padding: 5px;
    text-align: center;
    line-height: 40px; 
    box-sizing: border-box;
    cursor: pointer;
}

.custom-add-to-cart-btn i {
    font-size: 24px;
    color: #000;
}

I added JavaScript code to handle the click event on the custom "Add to Cart" button. This code triggers the add to cart action and performs an AJAX request to add the product to the cart. I added the code using the "Code Snippets Pro" plugin and chose "Load JS at the end of the section".

<script>
jQuery(document).ready(function($) {
    // Add custom "Add to Cart" button to each product item
    $('.elementor-widget-archive-products .elementor-archive__item').each(function() {
        var productId = $(this).find('[data-product-id]').data('product-id');
        var buttonHtml = '<a class="custom-add-to-cart-btn" data-product-id="' + productId + '"><i class="fa fa-cart-shopping"></i></a>';
        $(this).find('.elementor-image').append(buttonHtml);
    });

    // Click event handler for custom "Add to Cart" button
    $(document).on('click', '.custom-add-to-cart-btn', function(e) {
        e.preventDefault();
        var productId = $(this).data('product-id');

        // Trigger add to cart action
        $(document.body).trigger('adding_to_cart', [$(this), productId]);

        // AJAX add to cart
        $.ajax({
            type: 'POST',
            url: wc_add_to_cart_params.ajax_url,
            data: {
                'action': 'woocommerce_ajax_add_to_cart',
                'product_id': productId,
            },
            success: function(response) {
                if (response.error && response.product_url) {
                    window.location = response.product_url;
                } else {
                    // Redirect to cart page
                    window.location = wc_add_to_cart_params.cart_url;
                }
            }
        });
    });
});
</script>

To add the custom "Add to Cart" button to each product item on the archive page, I utilized JavaScript code to dynamically insert the button within the product item containers.

<script>
jQuery(document).ready(function($) {
    // Add custom "Add to Cart" button to each product item
    $('.elementor-widget-archive-products .elementor-archive__item').each(function() {
        var productId = $(this).find('[data-product-id]').data('product-id');
        var buttonHtml = '<a class="custom-add-to-cart-btn" data-product-id="' + productId + '"><i class="fa fa-cart-shopping"></i></a>';
        $(this).find('.elementor-image').append(buttonHtml);
    });

    // Click event handler for custom "Add to Cart" button
    $(document).on('click', '.custom-add-to-cart-btn', function(e) {
        e.preventDefault();
        var productId = $(this).data('product-id');

        // Trigger add to cart action
        $(document.body).trigger('adding_to_cart', [$(this), productId]);

        // AJAX add to cart
        $.ajax({
            type: 'POST',
            url: wc_add_to_cart_params.ajax_url,
            data: {
                'action': 'woocommerce_ajax_add_to_cart',
                'product_id': productId,
            },
            success: function(response) {
                if (response.error && response.product_url) {
                    window.location = response.product_url;
                } else {
                    // Redirect to cart page
                    window.location = wc_add_to_cart_params.cart_url;
                }
            }
        });
    });
});
</script>

I embedded this JavaScript code within an Elementor HTML widget that I added to the archive template. This was intended to dynamically insert the custom "Add to Cart" button for each product item displayed on the archive page.

Despite these efforts, the custom "Add to Cart" button didn't appear anywhere on the page.

Any advice will be highly appreciated.