Checkout – Style with Bootstrap
Style the WordPress Shopping Cart plugin with Bootstrap.
It first loads
bootstrap.css and then its own
The best way to make CSS changes is by adding styles into
style.css to override that of Bootstrap in the
style.css is loaded after
bootstrap.css, the styles you specify in
style.css will override it.
Example of styling the buttons
To style a button, for example, right-click on the button in the browser and inspect it. You’ll see that it uses btn btn-primary from Bootstrap on the products loop/list. So, in your
style.css file, create a class to override the btn and btn-primary class of Bootstrap. Prepend each class with
.checkout, e.g., .
checkout .btn and
To make the button corners rounder, make the button pink with black text, and red with white text on hover, use this CSS: https://gist.github.com/tribulant/170a8309a2da904ed703e8b00d44950e
and then hovering your mouse over the button will make it red as shown in the screenshot above.
Child Theme Folder
Use a child theme folder. You can create a
/checkout/ folder inside the folder of your WordPress theme and put a
style.css there to serve as the default
Learn more about adding your files with changes to a child theme folder.