Change "view cart" button

4 posts from 3 voices

• Started 4 months ago by Delphine
• Latest reply from Devin
• This topic is closed
• This topic is resolved

Tags:

No tags yet.

1. 

   Delphine
   Member

   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

   Posted 4 months ago #
2. 

   Nick
   Moderator

   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

   Posted 4 months ago #
3. 

   Delphine
   Member

   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

   Posted 4 months ago #
4. 

   Devin
   Moderator

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

   Regards,

   Devin

   Posted 4 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.