Woocommerce添加到购物车按钮定位

I'm building a WordPress theme for Woocommerce. So far so good, except for the "add to cart" button on the products (archive) page. I can modify the placement of the price and product title fine, but the add to cart element seems to be placed outside of the wrapper the actual product tile is in. So, now the button creates extra space next to the actual tile it resides in. I already tried absolute positioning, but this becomes a nightmare in responsive design.

as you can see in the picture; I changed the "add to cart" text to a picture, but the result is the same when it was text-only. I've been digging through the Woocommerce php template files, but so far I can't find a way place the button inside of the enclosure of the actual tile.

add-to-cart.php:

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

global $product;

echo apply_filters( 'woocommerce_loop_add_to_cart_link', // WPCS: XSS ok.
    sprintf( '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
        esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
        isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
        esc_html( $product->add_to_cart_text() )
    ),
$product, $args );

css concerning the item:

a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    display: inline;
    position: relative;
    background-image: url(img/cart.svg);
    height: 32px;
    width: 37px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

In the end I'd like to move the cart button to right underneath the price.