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:


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.

Website & Email Hosting

Get the best website & email hosting for speed, security, and peace of mind. No restrictions. Freedom to do what you need in order to run your business.

Host Now

Pin It on Pinterest

%d bloggers like this: