Change the Proceed to checkout button color to green to my site theme color

nareshnaresh Member
Hi Adam,

1. I want to change the "Proceed to checkout" button color to my site theme color
2. I want to change the font style of the Price in the cart page. Below is code I change in the header section in configuration page, but it didn't reflect the changes.

#fc .fc-cart__item__total {
font-size: 20px;
font-style: normal;
font-family: Raleway, sans-serif;
color: rgba(0, 0, 0, .5);
}
Comments

  • This is what I used for changing the button colour of the proceed to checkout button
    change #00A1F3 below to the colour that you want.

    #fc .fc-action--checkout--button{
    background: #00A1F3;
    }


    You may also want to change the hover background colour:
    #fc .fc-action--checkout--button:hover, {
    background: #00A1F3;
    }


  • for your second issue you may need to use:

    #fc #fc-cart--fixed-width .fc-cart__item__total{
    font-size: 20px;
    font-style: normal;
    font-family: Raleway, sans-serif;
    color: rgba(0, 0, 0, .5);
    }
  • fc_adamfc_adam FoxyCart Team
    @naresh,

    Happy to help, and @njwfx - thanks for chiming in too!
    1. I want to change the "Proceed to checkout" button color to my site theme color
    For the checkout button, you can use the code that @njwfx suggested there. You can also expand on it slightly to include the checkout button displayed in the top right of the Sidecart as well. You'll possibly also want to change the colour of the padlock icon as well, depending on the colour you're changing the button to:
    #fc .fc-action--checkout--button,
    [data-fc-sidecart] #fc .fc-fixed-button-right .fc-btn-action {
    background: #00A1F3;
    }
    #fc .fc-action--checkout--button:hover,
    [data-fc-sidecart] #fc .fc-fixed-button-right .fc-btn-action:hover {
    background: #0074af;
    }
    #fc .fa-lock {
    fill: #FFFFFF;
    }
    2. I want to change the font style of the Price in the cart page. Below is code I change in the header section in configuration page, but it didn't reflect the changes.
    Just a small change to your target there, from #fc .fc-cart__item__total to #fc .fc-cart__item__total p. That should then target the item total text.
  • Hi Adam,

    I'd also like to change the colour of the buttons to match.

    Is it a case of pasting the above into the header on the configuration page? I tried it and also wrapping in tags but I'm clearly missing something.
  • njwfxnjwfx Member
    @MagicMark
    yes it goes in the custom header on the configuration page
    with and wrapped around it

    The css may be cached in your browser?
  • njwfxnjwfx Member
    sorry my tags got swallowed up
    <style> and </style>
  • fc_marijafc_marija FoxyCart Team
    @MagicMark -

    Did you get this working? I see the change in your cart. For anyone else who comes along – this link has some additional button styling: https://pastebin.com/raw/kz8Vd9Vp . As njwfx mentioned, it goes in the "custom header:" textarea of the configuration page.
  • MagicMarkMagicMark Member
    edited February 9
    Ahhh, I added <script> tags instead of <style> tags. (mine also got swallowed)

    It just has a green border left now, but I can live with that.

    (Sorry Marija, typed it out earlier but never pressed post comment!)
  • Just seen the border colour addition in your code.
Sign In or Register to comment.