Checkout – Style with Bootstrap
Style the WordPress Shopping Cart plugin with Bootstrap.
The Shopping Cart plugin uses the Bootstrap framework. See Bootstrap here: Bootstrapcom.
It first loads bootstrap.css
and then it’s own style.css
The best way to make CSS changes is by adding styles into style.css
to override that of Bootstrap in the bootstrap.css
. Since style.css
is loaded after bootstrap.css
, the styles you specify in style.css
will override.
Example of styling the buttons
To style a button for example, right-click on the button in the browser and inspect. You’ll see that it uses btn btn-primary from Bootstrap on the products loop/list for example. So in your style.css
file go and create a class to override the btn and btn-primary class of Bootstrap. Prepend each class with .checkout
eg. .checkout .btn
and .checkout .btn-primary
So to remove the button corners, 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 the hover 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 rather serve than the default style.css
Learn more on adding your files with changes to a child theme folder.
Earn Money by Referring People
Refer customers to us with your affiliate link and earn commission on sales from your link.