How to restyle the fast cart and checkout
WooCommerce Fast Cart is designed to integrate seamlessly into any theme. Details such as the fonts and colors are inherited from your theme to ensure that everything looks beautiful together.
This article provides guidance on how to change any of the styles in the fast cart.
'Keep Shopping' and 'Checkout' buttons
The 'Checkout' button in the popup cart will match the primary button color in your theme. To do this, it creates a button in the background with the following classes and extracts the colors generated for the background, border, and text: button checkout-button alt wc-forward. This set of classes is used generally by WooCommerce for creating navigation buttons and so should fit well within your existing theme.
The 'Keep Shopping' button reverses the colors of the checkout button. Both buttons have the same outline color; the background colour of the 'Checkout' button becomes the text color of the 'Keep Shopping' button; and the text color of the 'Checkout' button' becomes the background color of the 'Keep Shopping' button.
A theme developer can change these colors by either updating the button classes inherited by Fast Cart, or directly changing the colors using CSS variables. Some of these variables are applied to the Fast Cart container, so to override the automatic values, you'll need to apply variable changes to an inner element. The easiest to use is .wc-fast-cart__inner-contents.
The following CSS variables can be modified to change the colors and fonts used by Fast Cart:
--wfc-btn-radius- The border radius of buttons created by Fast Cart.--wfc-font- The font applied to all cart elements.--wfc-notification-bg- The background color of notifications displayed inside Fast Cart.--wfc-notification-color- The text color of notifications displayed inside Fast Cart.--wfc-btn-bg-color- The background color of solid action buttons (like "Checkout"), and text color of secondary (outlined) buttons (like "Keep Shopping").--wfc-btn-color- The text color of solid action buttons (like "Checkout"), and background color of secondary (outlined) buttons (like "Keep Shopping").--wfc-btn-border-color- The border color of any buttons created by Fast Cart.
Here is an example of how you might change Fast Cart buttons to a red scheme:
.wc-fast-cart__inner-contents {
--wfc-btn-bg-color: #C73828;
--wfc-btn-border-color: #7A2218;
--wfc-btn-color: #F8BBB3;
}
You can add this code to a stylesheet, or inside the "Additional CSS" editor found in the WordPress theme customizer.
Can I restyle the fast checkout?
The popup checkout appears within an iframe. This means that it is an exact replica of your main WooCommerce checkout page, and doesn't contain its own styling.
As a result, you can restyle the fast checkout by styling the default WooCommerce checkout. Your changes will appear on the checkout page and in the popup checkout.