Table of Contents
Change Button Colors on Sidecart, Cart, and Checkout (v2.0)
To customize the colors of the sidecart, cart, and checkout button colors:
Step 1: Copy the code snippet
Go to this page and copy the CSS you see there to your computer's clipboard.
Step 2: Insert into your configuration
If you're using the new Admin
Go to https://admin.foxy.io, select Settings–>Templates, and scroll down to Custom header to insert the copied code.
If you're using the legacy Admin
- Go to configuration section in your FoxyCart admin.
- Scroll down and enable the Add custom header and footer code to your templates option if it isn't already enabled. Paste the code you copied to your clipboard in step 1 into the custom header textarea (You may see some code already in the text area, paste this either before or after your existing code).
Step 3: Customize your styles
- Change the existing colors in the styles to be the desired color. In the example code, the two colors in use are
#FFFFFF(white) and#ec6725(orange). Here's a hex color picker in case you need one to select a new color. - Save the configuration.
Step 4: Test
Take a look at the cart and checkout to ensure that it looks as expected. Hover over the buttons to see if there are any adjustments you'd like to make to those styles.