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