less than a minute read • Updated a month ago

Change Background Color on Cart and Checkout

You can designate styles for your Foxy cart and checkout in your custom header text area of the configuration settings in your FoxyCart admin. While this article shows you how to change the background color for your cart and checkout, these instructions can be used to apply changes to any elements found on the cart/checkout. Please contact us if you're unfamiliar with locating selectors for CSS styling.

Here's how to change the background color:

  • Copy this style onto your computer's clipboard:

    <style>
    #fc .fc-checkout, #fc .fc-context--cart-fullpage {
     background: yellow;
    }
    </style>
  • Go to your Templates configuration in your FoxyCart admin. Here's a link to that area.

  • Scroll down until you see custom header under Add custom header and footer code to your templates (this may need to be checked to get the custom header input box to appear). You may see some code already in the text area. You can paste the code that you copied to your clipboard into the top of that box (take care not to remove anything that's already there).

  • Scroll down until you see the Update button and click to save.

  • Run a test through the cart and up to the checkout page to ensure that it works as expected.


Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.