1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Produktsortierung neu positionieren

Dieses Thema im Forum "WooCommerce" wurde erstellt von hirma, 14. November 2017.

  1. hirma

    hirma Well-Known Member

    Registriert seit:
    4. März 2015
    Beiträge:
    114
    Zustimmungen:
    0
    In der Kategorieansicht ist ein kleines Problem aufgetaucht. Das Sortierfeld ist falsch positioniert und ragt in die Kategoriebeschreibung hinein (siehe Schreenshoot). Ich probier schon eine ganze Weile rum, bekomme es aber einfach nicht in den Griff. Im Netz habe ich aber auch keine Lösung dazu gefunden. Hat jemand eine Idee was zu tun ist?

    Verschoben.jpg

    Anschauen kann man sich das auch hier: https://martin-hirsch.com/?product_cat=lightroom
     
    #1 hirma, 14. November 2017
    Zuletzt bearbeitet: 14. November 2017
  2. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Evtl. ein fehlender clear:both oder ein falschen postition per CSS. Könnte ziemlich viel sein. Wie sollen wir das jetzt genau beurteilen?
     
  3. mensmaximus

    mensmaximus Well-Known Member

    Registriert seit:
    24. Juli 2014
    Beiträge:
    8.857
    Zustimmungen:
    437
    Das Problem ist der negative obere Rand: margin: -40px 0px 40px 0px; für die CCS Klasse woocommerce-ordering
     
  4. hirma

    hirma Well-Known Member

    Registriert seit:
    4. März 2015
    Beiträge:
    114
    Zustimmungen:
    0
    Danke schon mal. Dann muss ich wohl mal suchen wo ich die finde und wie ich das ändern kann. Hast du einen kleinen Tipp für mich? ;) Sorry, aber ich hab gerade erst angefangen mich mit dem Zeug zu beschäftigen.
     
  5. hirma

    hirma Well-Known Member

    Registriert seit:
    4. März 2015
    Beiträge:
    114
    Zustimmungen:
    0
    Auf jeden Fall habe ich daraus schon mal gelernt wo ich das im Browser sehe wenn ich mir den Quelltext anschaue. Dafür mal ein fettes DANKE. Jetzt müsste ich nur noch wissen wo man erkennt in welcher Datei das liegt.
     
    #5 hirma, 14. November 2017
    Zuletzt bearbeitet: 14. November 2017
  6. hirma

    hirma Well-Known Member

    Registriert seit:
    4. März 2015
    Beiträge:
    114
    Zustimmungen:
    0
    Ok. Da bräuchte ich wohl doch noch mal eine kleine Hilfestellung. Wenn ich das richtig Überblicke liegt die Klasse im WooCommerce.css. Das zu ändern ist aber wohl kein guter Plan, da es immer wieder überschrieben wird. Wie geht man in so einem Fall vor?
     
  7. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Am einfachsten:
    Übersschreib die Regel im Customizer unter "Zusätzliches CSS".
     
  8. hirma

    hirma Well-Known Member

    Registriert seit:
    4. März 2015
    Beiträge:
    114
    Zustimmungen:
    0
    Uiuiui. Wie geht sowas? Da habe ich mich noch nie damit beschäftigt. Gibt's da eine kürzere anleitung oder so?
     
  9. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Naja, also der praktische Teil ist:
    Du klickst im Dashboard auf "Design" -> "Customizer" -> "Zusätzliches CSS". Dort kannst du deine CSS Regeln einfügen.

    Zu CSS im allgemeinen gibt es zum Beispiel folgende Anleitung:
    https://wiki.selfhtml.org/wiki/CSS

    Nicht direkt kurz, aber recht umfassend.

    Aber vielleicht als kurze Info:
    Die wesentlich Eigenheit von CSS ist, dass es hierarchisch überschreibbar ist. Das heißt, du kannst eine existierende Regel einfach überschreiben, in dem du eine Regel für das gleiche Element erstellst und einfach "weiter unten" im Quellcode schreibst. "Zusätzliches CSS" wird immer hinter den Stylsheets geladen und überschreibt somit jede vorherige Regel (es sei denn, sie ist mit !important gekennzeichnet).

    Wenn es zum Beispiel in der style.css (oder einem anderen Stylesheet) folgende Regel gibt :
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Kannst du in "Zusätzliches CSS" die Regel überschreiben:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Die Farbe, die dann für die p-Tags gilt, wäre dementsprechend Rot und nicht Grün.
     
    #9 danielgoehr, 14. November 2017
    Zuletzt bearbeitet: 14. November 2017
  10. hirma

    hirma Well-Known Member

    Registriert seit:
    4. März 2015
    Beiträge:
    114
    Zustimmungen:
    0
    Ok, danke. Aber einfach

    woocommerce-ordering {
    margin: 0px 0px 40px 0px;
    }

    reinzuschreiben funktioniert nicht. Ich tippe mal drauf er kann die Klasse nicht zuordnen, oder?
     
  11. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Ich habe mir deinen Link jetzt nicht angeschaut (bin gerade nur auf dem Handy unterwegs). Aber deine Regel ist nicht korrekt.

    Wenn du eine Klasse ansprechen möchtest, muss ein Punkt davor. Bei einer ID ein #.
    Ohne Punkt oder # sprichst du das jeweilige Tag an (und ein Tag <woocommerce-ordering> gibt es nicht).

    Deine Regel muss also aller Wahrscheinlichkeit folgendermaßen lauten:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #11 danielgoehr, 14. November 2017
    Zuletzt bearbeitet: 14. November 2017
  12. hirma

    hirma Well-Known Member

    Registriert seit:
    4. März 2015
    Beiträge:
    114
    Zustimmungen:
    0
    Das hatte ich auch schon probiert. Führt leider zu keinerlei Veränderung. Danke übrigens für die Hilfe :)
     
  13. hirma

    hirma Well-Known Member

    Registriert seit:
    4. März 2015
    Beiträge:
    114
    Zustimmungen:
    0
    Es funktioniert mit dem Code hier. Gefunden im Netz. Ich glaube ich muss mich mal mit der Klassenstruktur beschäftigen.

    .woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering {
    margin: 0px 0px 40px 0px;
    }
     
  14. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Diese Regel ist "höherwertiger". Wenn die im Stylesheet so definiert würde, kannst du sie auch nur so überschreiben (oder du verwendest !important).

    Aber ja, generell macht es auf jeden Fall Sinn, sich zumindest ein paar CSS Grundlagen anzulesen, wenn man sich damit längerfristigen beschäftigen möchte :)
    CSS ist auch gar nicht so wahnsinnig kompliziert. Man kommt mit ein paar Basics schon ziemlich weit.
     
  15. hirma

    hirma Well-Known Member

    Registriert seit:
    4. März 2015
    Beiträge:
    114
    Zustimmungen:
    0
    Ja, das habe ich gerade schon gemerkt. Hab gleich noch ein paar regeln nachgeschoben die mich schon die ganze Zeit genervt haben ;) Hast du evtl. auch einen Lösungsansatz für die Produktdarstellung? Ich hätte gerne immer einen zweizeiligen Produktnamen in der Produktübersicht Shop. (In der Einzelansicht ist das so ok). Oben der Name und unten ein 'Zusatztitel'. Momentan schaut mein Name so aus: "Hans - Gerd". 'Hans" ist der Titel, "Gerd" die Erweiterung. Solange beide auf eine Zeile passen ist das alles ok. Blöd wird es wenn die Darstellung umgebrochen wird. Deswegen würde ich das ganze gerne so stylen, dass von Anfang an zwei Zeilen in der Produktdarstellung da sind. Das Problem kann man da https://martin-hirsch.com/?product_cat=lightroom schön erkennen. Die Höhe habe ich dank deinem Hinweis mit .css mittlerweile angleichen können über die MinHeight.
     
  16. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Das Problem ist, dass die Ausgabe von Titel und Erweiterung innerhalb eines Tags erfolgt. Das heißt, beides steht in <h2 class="woocommerce-loop-product__title">.

    Mit reinem CSS wirst du dieses Problem nicht lösen können (ich wüsste zumindest nicht wie).

    Idealerweise würde ich jetzt einfach zwei Felder im Produkt machen (also ein zusätzliches Custom Field verwenden) und dann beide mit eigenen Tags über das Template ausgeben.

    Theoretisch geht aber auch die Quick & Dirty Lösung (sofern dein Titel und die Erweiterung immer mit einem Minus getrennt sind).
    Du benötigst ein Child-Theme (siehe Link unten). Dort fürgst du folgende Funktion in die functions.php ein (vorsicht, ungetestet):
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Das sollte folgende Ausgabe erzeugen:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Jetzt kannst du das <span> mit der Klasse "Erweiterung" einfach auf "display:block" setzen. Danach sollten Titel und Erweiterung automatisch in unterschiedlichen Zeilen stehen.



    https://www.elmastudio.de/ein-wordpress-child-theme-anlegen-so-gehts-richtig/


    Edit: Ich glaube, du kannst alternativ auch einfach ein <BR> im Titel verwenden. Zumindest geht das bei Posts und Pages, Dann sollte das bei Produkten eigentlich auch gehen. Finde ich immer etwas unelegant, aber ist wahrscheinlich die einfachste Lösung...
     
    #16 danielgoehr, 15. November 2017
    Zuletzt bearbeitet: 15. November 2017
  17. hirma

    hirma Well-Known Member

    Registriert seit:
    4. März 2015
    Beiträge:
    114
    Zustimmungen:
    0
    Cool. Danke dir. Dann spiele ich mal ein wenig :)
     
  18. hirma

    hirma Well-Known Member

    Registriert seit:
    4. März 2015
    Beiträge:
    114
    Zustimmungen:
    0
    So, jetzt habe ich endlich mal wieder Zeit mich um das Problem zu kümmern. Mittlerweile habe ich den Subtitle als eine benutzerdefinierte Produkteigenschaft angelegt und möchte die Datei 'content-product.php' ändern. Mein derzeitiges Problem ist, dass ich keine Funktion finde um auf diese benutzerdefinierte Eigenschaft zuzugreifen. Ich kann den Hook auf den Titel ändern oder die Kategorie drunter setzen aber finde keinen Zugriff auf die Eigenschaft. Hat da jemand einen Tipp für mich? Oder gehe ich mit meinen Überlegungen komplett in die falsche Richtung?
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden