Woocommerce添加到购物车按钮位置

Question

我正在为Woocommerce建立一个WordPress主题。到目前为止一切正常，除了产品（存档）页面上的“添加到购物车”按钮。我可以修改价格和产品标题的位置，但是“添加到购物车”元素似乎位于实际产品图块所在的包装器外面。因此，现在该按钮在其实际所在图块旁边创建了额外的空间我已经尝试过绝对定位，但这成为响应式设计的噩梦。

如您在图片中看到的；我将“添加到购物车”文本更改为图片，但纯文本时的结果相同。 我一直在研究Woocommerce php模板文件，但到目前为止，我找不到将按钮放置在实际磁贴外壳内的方法。

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：

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

最后，我想将购物车按钮移至价格下方的右侧。