© 450 Heartbeats GmbH
Herzogspitalstrasse 9 | 80331 München
© 450 Heartbeats GmbH | Herzogspitalstrasse 9 | 80331 München

CSS Anpassungen auf ausgewählten Unterseiten und Produkten

Möchte man ausgewählte Seiten ansprechen und CSS Anpassungen am Design vornehmen, beispielsweise den Hover eines Buttons lediglich auf einer bestimmten Seite verändern, kann man dies via CSS und mit Hilfe der Page ID tun.
Inhalt

Bei der Gestaltung von Unterseiten bei WordPress oder einzelner Produkte im WooCommerce Shop sollte man flexibel sein. Hard-Coded Style Elemente lassen sich jedoch bisher oft nur global verändern und werden damit auf allen Unterseiten oder Produkten bei WordPress und WooCommerce entsprechend übernommen. Mehr Flexibilität bietet daher das CSS Styling via Page ID, wodurch sich schnell und einfach CSS Regeln für einzelne Seiten gestalten lassen.

CSS Anpassung einzelner Seiten oder Beiträge mithilfe von Page IDs

Über Page IDs lassen sich schnell und einfach Anpassungen auf ausgewählten Seiten vornehmen, ohne die Style Elemente anderer Seiten mit zu verändern. Diese Page IDs findest du heraus, indem du aus dem Adminbereich heraus auf die gewünschte Seite, Beitrag oder Produkt navigierst und die ID in der URL abliest.

Die Page ID bildet die Zuordnung im CSS

Folgende CSS Klassen ermöglichen Veränderungen nur auf den ausgewählten Seiten. Hierzu dient die Page ID zur Bestimmung derjenigen Seite, die du anpassen möchtest:

 

CSS Anpassungen von Produkten oder Beitragsseiten

.single .post-12345 {
dein CSS code kommt hier
}

Anwendungsbeispiel 1: Verstecke den Preis auf einem ausgewählten Produkt

Bei Beiträgen und Produkten im WooCommerce benötigst du bei nahezu allen Themes zusätzlich die Variable “.single”, die dem Beitrag und Produkt voranstehen.
Die Angabe des Preises für ein Produkt bei WooCommerce soll versteckt werden. Hierzu fügst du hinter die Post ID lediglich die CSS Variable, bei der du Änderungen vornehmen möchtest. Übersetzt bedeutet dies, dass lediglich für das Produkt mit der Page ID 12345 die CSS Variable div.price verändert werden soll, für die anderen Produkte nicht:

.single .post-12345 div.price {
display: none;
}

Anwendungsbeispiel 2: Anpassung von Seiten und Unterseiten

Führt zum Deaktivieren einer Sidebar auf der Unterseite mit der ID 12345 (CSS ist abhängig von eingesetztem Template)

.page-id-12345 .sidebar {
display: none;
}

Anwendungsbeispiel 3: Styling eines Links auf einer Unterseite

Ändert den Hover für einen Link nur auf der Unterseite mit ID 12345 in Schwarz, wohingegen das Link-Styling auf allen anderen Seiten und/ oder Beiträgen unberührt bleibt.

.page-id-12345 a:hover {
color: #000000;
}

 

Noch Fragen?
Kontaktiere uns

Gerne kannst du dich immer an uns wenden, als digitale Experten freuen wir uns dir jederzeit weiterzuhelfen.

Inspiration?
Unsere Showcases

Entdecke unsere zahlreichen Projekte, lern uns und das was wir tun und wie wir arbeiten besser kennen.

Teile diesen Beitrag
Share on facebook
Share on twitter
Share on linkedin
Share on email