Überschreiben einer Woocommerce! Wichtige Klasse

Question

Ich versuche, Woocommerce CSS-Klasse zu überschreiben, die standardmäßig auf! Wichtig ist. Wie kann ich dies überschreiben?

Der Standard ist:

.woocommerce-error, .woocommerce-info, .woocommerce-message{ 
padding: 1em 2em 1em 3.5em!important;} 

Ich habe versucht, die folgenden aber will nicht wissen:

main .post .entry .woocommerce-error, .woocommerce-info, .woocommerce-message{padding: 0 0 10px 0 !important;} 

nicht sicher, ob ich das Original WooCommerce Sheet ändern kann, wie ich die Änderungen übernehmen I make wird überschrieben, wenn das Plugin aktualisiert wird.

Vielen Dank.

Answer 1

Das ist, weil Sie das Komma übersehen, gibt es tatsächlich Regeln innerhalb dieser Linie von Ihnen, und Sie müssen es für jeden von ihnen angeben. Dies sollte funktionieren:

main .post .entry .woocommerce-error, 
main .post .entry .woocommerce-info, 
main .post .entry .woocommerce-message { 
    padding: 0 0 10px 0 !important; 
} 

Answer 2

Um über Fahrt Standard WooCommerce Stile es am besten ist es, die Stylesheets zu deaktivieren, indem Sie die unten in der functions.php Datei eingeben:

add_filter('woocommerce_enqueue_styles', '__return_empty_array'); 

Auf diese Weise können Sie vermeiden, indem Wichtig dabei ist, dass dies eine schlechte Übung ist und den Shop so anpassen, dass er wie gewünscht aussieht.

standardmäßig WooCommerce einreiht 3 Sheets und das obige Snippet werden alle von ihnen deaktivieren, wenn Sie individuell nur jeden deaktivieren möchten Sie hinzufügen können:

// Remove each style one by one 
add_filter('woocommerce_enqueue_styles', 'jk_dequeue_styles'); 
function jk_dequeue_styles($enqueue_styles) { 
    unset($enqueue_styles['woocommerce-general']); // Remove the gloss 
    unset($enqueue_styles['woocommerce-layout']);  // Remove the layout 
    unset($enqueue_styles['woocommerce-smallscreen']); // Remove the smallscreen optimisation 
    return $enqueue_styles; 
} 

Bitte hier sehen für weitere Informationen: Woomerce Docs

Answer 3

!important ist erstaunlich böse und sollte vermieden werden, es sei denn, Sie wirklich 10000% sicher, dass Sie es nicht bereuen werden (oder vielleicht wollen Sie eine einfache Dienstklasse, die in Ordnung ist). Ich benutze nie Woo-Commerce, aber es ist so eine Schande für sie, !important Regel in der CSS zu verwenden, die erstaunlich schwierig sein wird, jeden anderen Stil zu machen, der diese Spezifität schlagen wird.

Wie auch immer, der beste Weg, ich weiß ist, eine ID zu Element hinzufügen, die Sie überschreiben möchten, wenn möglich, und fügen Sie einen neuen Selektor zur Verbesserung der Spezifität hinzu und !important Regel zu diesem Selektor hinzufügen (Beispiel unten). Aber wenn nicht, nun, ich weiß es nicht.

#newselector{ 
    padding: 1em 2em 1em 3.5em!important; 
} 

!important böse ist, ich hoffe, dass Sie keine Angst, wenn es plötzlich du am Leben zu essen ist.