Support » Allgemeine Fragen » Warenkorb Icon im Header

  • Guten Morgen,

    ich hätte eine Frage bezüglich einer Konfiguration im Header. Verwendetes Theme: OShine Theme.

    Und zwar hätten wir gerne ein Warenkorb / Cart Icon im Header neben dem Hamburger Menü Icon, der dann beim Klick auf unseren Shop führt. Wir verwenden aber kein WooCommerce, da unser Shopsystem bei Shopify läuft.

    Kennt jemand ein Plugin, dass so ein Cart Icon im Header einfügt?

    Vielen Dank schon einmal für eure Hilfe.

    LG

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Es mag dafür ein Plugin geben (vielleicht sowas wie Menu Image, Icons made easy) aber besser ist, wenn du selber mal im Plugin-Verzeichnis nachschaust. Ich würde das ohne Plugin mit folgenden Arbeitsschritten umsetzen:

    1. Du gehst in Design > Menüs und aktivierst über das Pulldown-Menü Ansicht oben rechts unter Erweiterte Menüeigenschaften anzeigen die Anzeige von CSS-Klassen.
    2. Du wählst das Menü aus, das du als Hauptmenü erstellt hast [1] und fügst einen Individuellen Link ein. Hierbei verwendest du den Link zu Shopify [2], nennst den Link „Warenkorb“ [3] und gibst ihm die CSS-Klasse „warenkorb“ [4]:
      Screenshot Einstellungen
    3. Du lädst dir von einem Anbieter (z.B. Icons8) ein Cart-Symbol herunter und lädst es über die Mediathek als neue Mediendatei hoch. Klick direkt nach dem Upload auf „Bearbeiten“ und kopier dir den Link zur Mediendatei.
    4. Du gehst in den Customizer und trägst unter Zusätzliches CSS folgendes ein:
      li.warenkorb a { 
      font-size: 0; 
      background: url(https://example.com/wp-content/uploads/2020/12/icons8-warenkorb-64.png);
      background-repeat: no-repeat;
      background-size: 48px; 
      width: 48px; 
      height: 48px; }

      Als URL verwendest du die kopierte Adresse des hochgeladenen Shop-Icons.
      Der Link zu deiner Website ist ungültig und ich konnte deshalb nicht nachschauen aber wenn du bereits ein Child-Theme erstellt hast, kannst du die CSS-Reglen statt im Customizer auch im Stylesheet des Child-Themes einfügen (bitte nicht in einem Parent-Theme, weil die Änderung sonst beim Update überschrieben wird).

    Thread-Ersteller tzuml

    (@tzuml)

    Hallo pixolin, vielen Dank für deine schnelle Antwort & Hilfe.

    Ich habe soeben alle Schritte erledigt, die du aufgezählt hast und im Child-Theme die Änderungen vorgenommen. Ich füge dir mal die Anhänge bei:

    https://ibb.co/BrnBZ3h
    https://ibb.co/mNtkbb3
    https://ibb.co/HCNLDvK

    Leider zeigt es nichts an, nur im Sidebar-Menü unter dem Punkt „Warenkorb“, aber auch dort kein Icon sondern nur ganz unten im Menü. Hättest du eine Idee, wieso es nichts anzeigt?

    Sorry für den falschen URL-Link… Url ist: topspeed-spirituosen.com

    Die CSS-Regel ist dir scheinbar in eine andere CSS-Regel reingeruscht:

    @media only screen and (max-width: 800px) {
    .column-half{
    width: 100%;
    }
    	
    li.warenkorb a { 
    font-size: 0; 
    background: url(http://topspeed-spirituosen.com/wp-content/uploads/2020/12/icons8-warenkorb-64.png);
    background-repeat: no-repeat;
    background-size: 48px; 
    width: 48px; 
    height: 48px; }		

    Wenn du vor li.warenkorb a { noch eine schließende Klammer } einfügst, sollte es klappen.

    Ich bitte um Verständnis, dass wir hier nicht die Grundlagen zu CSS vermitteln können.

    Hallo Mario,

    ich schaute gerade nach einem Plugin für ein Warenkorb Icon und stieß auf diese Beschreibung, die ich gleich ausprobierte und Zack habe ich einen Einkaufswagen in der Menüleiste. Jetzt habe ich das Problem, das beim mobilen Menue, in der Handy Ansicht alle schriftlichen Button zentriert sind und das icon nach Li rutscht… Außerdem verschwindet beim Hoovern das Icon…. Hast Du da eine Idee? oder soll ich mir doch ein Plugin installieren, da das hier ja keine css Community ist…

    Gruß aus HH
    ccwoods

    https://kunstblock.com/

    @ccwoods Bitte häng deine Frage nicht an einen anderen Thread an, sondern starte einen eigenen Thread. In diesem Fall ging es um ein Warenkorb-Icon für einen Shopify-Shop, während du WooCommerce verwendest.

    Da wir vom Thread-Ersteller nichts mehr gehört haben, schließe ich den Thread.

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Das Thema „Warenkorb Icon im Header“ ist für neue Antworten geschlossen.