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
  • njwfxnjwfx Member

    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;
    }


  • njwfxnjwfx Member
    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.
Sign In or Register to comment.