Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #19241

    Hi,

    I have a little question, I try to change the “view cart ” button – which appear when you add a product to your cart -

    here :

    in the woocommerce-mod.css, line 1249 :

    div .container a.button, div a.button, div .container button.button, div .container input.button, div .container #review_form #submit {

    color: white;

    padding: 10px;

    line-height: 1em;

    margin: 4px 2px 0 0;

    float: left;

    font-size: 12px;

    width: auto;

    vertical-align: middle;

    text-align: center;

    text-decoration: none;

    border: none;

    cursor: pointer;

    font-family: lucida console;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

    position: relative;

    }

    But it change all button of my site (add to cart …etc )

    So where or how I can change just the “view cart” like this :

    font-size: 14px;

    font-family: nixie one;

    text-decoration: blink;

    Than you in advance

    Delphine

    #102893

    Hi,

    You see in the css you posted the first line; The one with all the commas in it? Each comma separates a different place where that code is used. So in line

    div .container a.button, div a.button, div .container button.button, div .container input.button, div .container #review_form #submit

    The code is used in 5 places and in fact that one line can be rewritten like so. Its all put together in one line to save space. I added your code to the 5 versions, and now just pick the correct one and paste it at the end of your custom.css file

    div .container a.button{
    font-size: 14px;
    font-family: nixie one;
    text-decoration: blink;
    }

    div a.button{
    font-size: 14px;
    font-family: nixie one;
    text-decoration: blink;
    }

    div .container button.button{
    font-size: 14px;
    font-family: nixie one;
    text-decoration: blink;
    }

    div .container input.button{
    font-size: 14px;
    font-family: nixie one;
    text-decoration: blink;
    }

    div .container #review_form #submit {
    font-size: 14px;
    font-family: nixie one;
    text-decoration: blink;
    }

    So you need to figure out which of these 5 is the one that you want changed. Since you didnt provide me with enough information about the location of the button, I am not really sure. You can look through Chrome developer tools to get the selector on the page where you want to change the button.

    The final code *which you would put at the end of custom.css file so it overrides the previous css. (never edit css files directly since an update to the theme will overwrite them and by then you will forget what you edited)

    ***Rememeber, You only need to add *only one* of the 5 versions i put up above.****

    Thanks,

    Nick

    #102894

    Hi Nick,

    Thank you so much for your reply, I have found, it’s the first one : div .container a.button{.

    Have a nice day,

    Delphine

    #102895

    Great! Glad Nick was able to help you out :)

    Regards,

    Devin

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Change "view cart" button’ is closed to new replies.