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