/* Theme Name: Attesa Child Template: attesa Description: Gezielte Anpassungen für ks-services.at (Preis-Darstellung, Warenkorb-Beschriftung, Button-Platzierung). Das gekaufte Parent-Theme (Attesa) bleibt unverändert, damit Theme-Updates sicher bleiben. Version: 1.3.2 Text Domain: attesa-child */ /* "Warenkorb aktualisieren" war kaum lesbar (blasser Button ohne Kontrast) - gleicher Stil wie die primären Buttons (z. B. "In den Warenkorb"). */ button[name="update_cart"] { background-color: #ff9f00; color: #fff; } button[name="update_cart"]:hover, button[name="update_cart"]:focus { background-color: #e58f00; } /* Produktpreis war in der Elementor-"Einzelprodukt"-Vorlage (Widget-ID aab0be8) hart auf Rot (#FF0000) gesetzt, statt der Marken-Farbe. Bewusst hier per CSS erzwungen statt (nochmal) direkt in den Elementor-Daten zu ändern - wirkt so unabhängig von der jeweiligen Seiten-ID und bleibt auch bestehen, falls die Vorlage später in Elementor neu bearbeitet wird. !important nötig, da Elementors eigenes, pro Seite generiertes Inline-/Style-CSS dieselbe Spezifität hat und später im lädt. */ .elementor-element-aab0be8 .price { color: #ff9f00 !important; } /* Mengenfeld und "In den Warenkorb"-Button sollten als eine zusammenhängende Button-Gruppe wirken. Zwei getrennte Ursachen für den sichtbaren Abstand, beide bereits vorher da (nicht durch dieses Kindtheme verursacht): 1) WooCommerce setzt auf .quantity standardmäßig einen rechten Außenabstand (margin-right: .5em), unabhängig vom Theme. 2) Elementor Pros eigenes Add-to-Cart-Widget setzt zusätzlich einen linken Abstand auf den Button selbst (--button-spacing, Default 10px, im Widget "Row Gap"/"Spacing" genannt - wäre auch direkt im Elementor-Editor am Widget einstellbar, hier der Einfachheit halber zentral per CSS erzwungen). */ .woocommerce .quantity, .woocommerce-page .quantity { margin-right: 0 !important; } /* Grundlegende Optik für [ks_si_product_filters] (siehe functions.php) - bewusst zurückhaltend, da das Formular per Shortcode-Widget in Elementor eingebunden wird und dort bei Bedarf weiter angepasst werden kann. */ .ks-si-product-filters { background: #fafafa; border-radius: 12px; padding: 20px; } .ks-si-product-filters p { margin: 0 0 6px; } .ks-si-product-filters label { display: block; margin-bottom: 2px; cursor: pointer; } .ks-si-product-filters input[type="search"] { width: 100%; max-width: 320px; padding: 8px 12px; border-radius: 20px; border: 1px solid #ddd; } .ks-si-product-filters button[type="submit"] { background-color: #ff9f00; color: #fff; border: 0; border-radius: 20px; padding: 10px 24px; cursor: pointer; font-weight: 600; } .ks-si-product-filters button[type="submit"]:hover { background-color: #e58f00; } .elementor-widget-woocommerce-product-add-to-cart form.cart .button { --button-spacing: 0; } /* Produktseite: das Add-to-Cart-Widget sitzt im Elementor-Template (post 1420, "Single Product"-Theme-Builder-Vorlage) in einer eigenen Spalte hinter einem großen Produktbild und landet dadurch bei echten Produkten weit unterhalb des Preises - auf Mobil oft erst nach der Beschreibung. Zielt bewusst auf die stabilen Element-IDs dieser einen Vorlage (gilt für alle Produkte, da Theme-Builder-Vorlage) statt auf generische Klassen. Falls die Vorlage in Elementor umgebaut wird, können sich diese IDs ändern - dann muss hier nachgezogen werden. Desktop/Tablet (≥768px, Elementors eigene Breakpoint-Grenze): Button in der rechten Spalte vor das Bild reihen, statt dahinter. !important überall hier bewusst: Elementors eigenes, pro Seite generiertes CSS (elementor-post-1420-css) hat dieselbe Selektor- Spezifität wie unseres, lädt aber später im und würde sonst unsere order/display-Werte in der Kaskade überschreiben - getestet, ohne !important griff keine der beiden Regeln. */ @media (min-width: 768px) { .elementor-element-5056f40 > .elementor-widget-wrap { display: flex !important; flex-direction: column !important; } .elementor-element-5056f40 > .elementor-widget-wrap > .elementor-element-a810b3e { order: 1 !important; } .elementor-element-5056f40 > .elementor-widget-wrap > .elementor-element-a73305e { order: 2 !important; margin-top: 20px; } } /* Mobil (≤767px, Elementors "phone"-Breakpoint): Titel, Preis und Button direkt hintereinander, noch vor Beschreibung und Produktbild. Löst die beiden Spalten dafür visuell auf (display:contents lässt die einzelnen Widgets als direkte Kinder des ohnehin flex-basierten .elementor-container erscheinen), ohne die Elementor-Vorlage selbst anzufassen. */ @media (max-width: 767px) { .elementor-element-3866568, .elementor-element-3866568 > .elementor-widget-wrap, .elementor-element-5056f40, .elementor-element-5056f40 > .elementor-widget-wrap { display: contents !important; } .elementor-element-b1d705c { order: 1 !important; } /* Titel */ .elementor-element-aab0be8 { order: 2 !important; } /* Preis */ .elementor-element-a810b3e { order: 3 !important; } /* Add-to-Cart */ .elementor-element-f1d519e { order: 4 !important; } /* Mobil-Bild */ .elementor-element-6122ecb { order: 5 !important; } /* Beschreibung */ .elementor-element-a73305e { order: 6 !important; } /* Desktop-Bild, auf Mobil ohnehin ausgeblendet */ }