如何将 "Empty Cart" 按钮上的文本居中?
How to center text on "Empty Cart" button?
我有以下代码,用于将“清除购物车”按钮添加到我的 woocommerce 购物车页面。按钮上的文字不以移动设备为中心,但希望如此。该按钮也不是完全圆形的,看起来不对。请访问我的网站 https://www.livestainable.co.za add an item to the cart to replicate my issue. I have also added some screenshots of the issue. 如果有人能帮我解决这个问题,我将不胜感激。谢谢大家
这里是手机端问题的截图。
add_action('woocommerce_cart_coupon','custom_woocommerce_empty_cart_button');
函数 custom_woocommerce_empty_cart_button() {
回声 '' 。 esc_html('Empty Cart','woocommerce')。 '';
}
add_action('wp_loaded','custom_woocommerce_empty_cart_action',20);
函数 custom_woocommerce_empty_cart_action() {
如果(isset($_GET['empty_cart'])&&'yes'===esc_html($_GET['empty_cart'])){
WC()->购物车->empty_cart();
$referer = wp_get_referer() ? esc_url( remove_query_arg( 'empty_cart' ) ) : wc_get_cart_url();
wp_safe_redirect( $referer );
}
}
您只需在样式中添加几行代码
/* 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;
}
}
我有以下代码,用于将“清除购物车”按钮添加到我的 woocommerce 购物车页面。按钮上的文字不以移动设备为中心,但希望如此。该按钮也不是完全圆形的,看起来不对。请访问我的网站 https://www.livestainable.co.za add an item to the cart to replicate my issue. I have also added some screenshots of the issue.
这里是手机端问题的截图。
add_action('woocommerce_cart_coupon','custom_woocommerce_empty_cart_button'); 函数 custom_woocommerce_empty_cart_button() { 回声 '' 。 esc_html('Empty Cart','woocommerce')。 ''; }
add_action('wp_loaded','custom_woocommerce_empty_cart_action',20); 函数 custom_woocommerce_empty_cart_action() { 如果(isset($_GET['empty_cart'])&&'yes'===esc_html($_GET['empty_cart'])){ WC()->购物车->empty_cart();
$referer = wp_get_referer() ? esc_url( remove_query_arg( 'empty_cart' ) ) : wc_get_cart_url();
wp_safe_redirect( $referer );
}
}
您只需在样式中添加几行代码
/* 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;
}
}