Produktsortierung neu positionieren

Das Problem ist der negative obere Rand: margin: -40px 0px 40px 0px; für die CCS Klasse woocommerce-ordering

Zitat von hirma

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?

Am einfachsten:
Übersschreib die Regel im Customizer unter "Zusätzliches CSS".

Zitat von hirma

Uiuiui. Wie geht sowas? Da habe ich mich noch nie damit beschäftigt. Gibt's da eine kürzere anleitung oder so?

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 :

p
{
color:green;
}

Kannst du in "Zusätzliches CSS" die Regel überschreiben:

p
{
color:red;
}

Die Farbe, die dann für die p-Tags gilt, wäre dementsprechend Rot und nicht Grün.

Zitat von hirma

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?

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:

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

Zitat von hirma

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;
}

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.

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):

function woocommerce_template_loop_product_title() 
{
    $titleOld = get_the_title();
    $titleArray = $teile = explode("-", $titleOld);
    $titleNew = titleArray[0].'<span class="erweiterung">'.titleArray[1].</spanp>
    echo '<h2 class="woocommerce-loop-product__title">' . $titleNew . '</h2>';
}

Das sollte folgende Ausgabe erzeugen:

<h2 class="woocommerce-loop-product__title">Titel<span class="erweiterung">Erweiterung</span></h2>';

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-…-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...