How to center text on "Empty Cart" button?

Question

I have the below code for adding a "clear cart"button to my woocommerce cart page. The text on the button is not centered on mobile and would like it to be. The button also is not completely round and looks wrong. Please visit my site https://www.livestainable.co.za add an item to the cart to replicate my issue. I have also added some screenshots of the issue. I would very much appreciate if someone can help me out with this. Thanks guys

here is the screenshot of the issue on mobile.

add_action( 'woocommerce_cart_coupon', 'custom_woocommerce_empty_cart_button' ); function custom_woocommerce_empty_cart_button() { echo '' . esc_html( 'Empty Cart', 'woocommerce' ) . ''; }

add_action( 'wp_loaded', 'custom_woocommerce_empty_cart_action', 20 ); function custom_woocommerce_empty_cart_action() { if ( isset( $_GET['empty_cart'] ) && 'yes' === esc_html( $_GET['empty_cart'] ) ) { WC()->cart->empty_cart();

    $referer  = wp_get_referer() ? esc_url( remove_query_arg( 'empty_cart' ) ) : wc_get_cart_url();
    wp_safe_redirect( $referer );
}

}

Answer 1

You simply have to add some lines of code to your style

/* centering text on mobile */
@media (max-width:767px) {
    table.shop_table.cart .coupon .button {
        text-align: center;
    }
}

/* fixing border radius on dekstop */
@media (min-width:768px) {
    table.cart .coupon .button:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}