Smaller product title and price font size on checkout page
-
Hi team,
Would you please help me change the products title and price font size to be 14px on the checkout page for all devices?
1. We use CheckoutWC plugin, the custom css option route is here, CheckoutWC->Appearance-> Design-> CSS customize template CSS.
2. On mobile device, can you also reduce the logo size little bit and reduce the spacing up and down as marked in the attached picture, the previous developper only optimized the logo size for desktop not did on mobiles.
Appreciate!
Attachments:
You must be
logged in to view attached files.
Hello,
Try to add the following Custom CSS code in Theme Settings > Custom CSS > Global Custom CSS area.
/* Change product title font size */
.checkoutwc .cfw-cart-item-title,
.checkoutwc .cfw-cart-item-title a {
font-size: 14px !important;
line-height: 1.3 !important;
}
/* Change product price & subtotal font sizes */
.checkoutwc .cfw-cart-item-description .price,
.checkoutwc .cfw-cart-item-description .price *,
.checkoutwc .cfw-cart-item-subtotal .price,
.checkoutwc .cfw-cart-item-subtotal .price * {
font-size: 14px !important;
}
Regarding the logo in mobile, Try to add this following Custom CSS code in Theme Settings > Custom CSS > Custom CSS for mobile:
/* Reduce header padding above and below logo */
#cfw-header,
.cfw-logo {
padding-top: 0.25em !important;
padding-bottom: 0.25em !important;
}
/* Reduce margin around logo link */
.cfw-logo a {
margin-top: 0.25em !important;
margin-bottom: 0.25em !important;
}
/* Reduce logo height on mobile screens */
.checkout-wc .cfw-logo .logo {
height: 2.5em !important;
}
Best Regards
.
