Woocomerce Buttons anpassen

  • Liebe Forumgemeinde,

    verwende WP 4.8.2
    mit PHP 7.1.9
    Theme: Elated Kreate

    ich würde gerne alle Buttons im Woocomerce anpassen,
    leider greifen alle versuchten Plugins nicht,
    und verschiedene Anpassungsversuche die ich über das Custom CSS
    vorgenommen habe, zeigen auch keine Verbesserungen.

    Kann mir jemand vielleicht aus dem Forum hier behilflich sein,
    um z.B. diesen "In den Warenkorb" Button anzupassen?

    https://www.cbd-innovation.com/produkt/endoca-cbd-oel-15/

    Bin Euch für jeden Vorschlag dankbar!

    Cheers

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Versuche es mal mit diesem Selektor im Custom CSS (Dashboard -> Design -> Customizer -> zusätzliches CSS):

    HTML
    .woocommerce-page button.button.alt {
      background: #555 !important;
      color: #fff !important;
      border: 2px solid #000 !important;
      border-radius: 5px;
      height: 40px;
      margin-top: 10px;
      /* weitere nach Geschmack */
    }


    Da anscheinend WooCom in den eigenen Stylesheet viele '!important' benutzt, kann es sein, dass du das im Custom CSS auch machen musst, um die Originalformatierungen zu überschreiben.
    Und nach der Änderung bitte auch prüfen, ob irgendwo ungewollt auch andere Buttons 'umformatiert' werden.

  • Danke für Deinen Ratschlag!!

    Hab folgendes ins Custom CSS eingefügt:

    .woocommerce-page button.button.alt {
    background-color: #88a551 !important;
    hoover: #88a551 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
    border-radius: 5px;
    height: 40px;
    margin-top: 10px;
    }

    Andere Buttons wurden keine berührt.
    Leider hat sich auch nicht viel am ursprünglichen
    Button geändert, außer dass er eine rote
    Umrandung bekommen hat.....
    https://www.cbd-innovation.com/produkt/endoca-cbd-oel-15/

  • da es schon !important Einträge gibt, musst du deine Einträge mehr differenzieren, z.B.
    .woocommerce-page div.eltd-single-product-summary button.button.alt{...}

    und
    hoover: #88a551 !important;
    gibt es nicht.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • Leider scheint es so, dass dort in den originalen Stylesheets nicht nur 'backgroud' sondern auch 'background-color' ... und nicht nur 'border' sondern auch 'border-color' mit Werten vorgegeben und mit '!important' versehen sind.
    Es könnte helfen, wenn du die jeweils fehlende Angabe noch in dein Custom CSS hinzufügst.
    Die Werte für 'margin-top' und 'border' (abgesehen von der Farbe) hat die Seite ja übernommen - scheint also nicht ganz so falsch zu sein der Selektor.

  • ok versteh, dank dir!

    noch ein problem im Warenkorb:

    hab folgendes versucht:


    .woocommerce-page div.eltd-cart-proceed-update button.button.alt {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    border-radius: 5px;
    height: 40px;
    margin-top: 10px;
    }

    leider nichts!
    wie spricht man die Buttons hier an,
    über die Page, dann denn übergeordneten div,
    oder lieg ich iwo falsch?

    achja und das hoover mit:
    .woocommerce-page div.eltd-cart-proceed-update button.button.alt:hoover
    funkt auch nicht...

    Einmal editiert, zuletzt von JorgStuck (31. Oktober 2017 um 14:17)

  • Es heißt nicht hoover sondern hover!

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Danke, hab mich wohl verschrieben.......

    Kann mir noch jemand helfen mit dem Problem?

    [COLOR=#333333].woocommerce-page div.eltd-cart-proceed-update button.button.alt

    kann ich die Warenkorb-Seite auch über .woocommerce-page ansprechen,
    dann den übergeordneten <div> tag und dann den button.

    ist mein Gedankengang soweit richtig?


    [/COLOR]

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!