Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #22181

    Guten Tag,

    drei Fragen zu woocommerce:

    1. Ich möchte gerne die Farben sämtlicher Buttons in woocommerce ändern.

    Hintergrund Farbe, Schriftfarbe und Hooverfarbe und Hoover-Text Farbe.

    2. Im Produkt-Template möchte ich die Schriftgröße des Verkaufspreises ändern und ebenso die Schriftgröße des Preises pro Einheit.

    3. Zuletzt möchte ich die Schriftgröße der Artikel-Bezeichnung ändern. (vermutlich H1)

    Wo finde ich die entsprechenden Funktionen?

    Vielen herzlichen Dank!!

    #114477

    Hi,

    I used google translate to understand your language. Sorry for some inaccuracy.

    1.) All of the button styles can be change using this class. Go to custom.css and edit this code

    #top .button {
    width: 40%;
    padding: 15px 2.2%;
    text-align: center;
    background-color: green;
    border: 1px solid #E1E1E1;
    color: #666;
    background-image: url("../images/layout/bg-button.png");
    background-repeat: repeat-x;
    text-shadow: 1px 1px 0px white;
    -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 0;
    font-size: 11px;
    min-width: 68px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    text-decoration: none;
    }

    The MINUS and PLUS button can be change using these codes

    input.minus {
    padding: 0;
    vertical-align: middle;
    line-height: 41px;
    border: none;
    width: 43px;
    height: 43px;
    cursor: pointer;
    margin: 0;
    display: inline;
    border: 0;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
    background-color: #F8F8F8;
    border: 1px solid #E1E1E1;
    color: #666;
    background-image: url("../images/layout/bg-button.png");
    background-repeat: repeat-x;
    }

    2.) You can change the font size of the product price by editing custom.css, add this code

    .price .amount {
    font-size: 20px !important;
    }

    3.) You can also change the font size of the product description using custom.css, again, add this code.

    #tab-description {
    font-size: 15px;
    }

    Hope this helps.

    Regards,

    Ismael

    #114479

    Hi Ismael,

    thanks for your reply. I will try it.

    Sorry, but I have writen in German because I have seen some posts in German. :)

    Next time I will again post in English.

    Thanks a lot and best regards.

    Michael

    #114480

    O.K. I have done it and it works.

    But where can I change the color of the hoover button and the color of the text?

    Thanks!

    #114481

    Use following code to style the hover effect:

    #top .button:hover {
    background-color: green;
    border: 1px solid #E1E1E1;
    color: #666;
    background-image: url("../images/layout/bg-button.png");
    text-shadow: 1px 1px 0px white;
    -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    }

    - you need to change the color values :)

    #114482

    Thank you, Dude.

    It works but NOT for the add-to-cart-button. The color of this button did not change!!

    #114483

    Hi,

    You can use this. Change the color value

    #top .button:hover, #top .submitbutton:hover{
    color: pink;
    background-color: red;
    }

    Hope it works.

    Regards,

    Ismael

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

The topic ‘Woocommerce button – Farbe ändern’ is closed to new replies.