Hi, @tommaso99.
Thanks for reaching out to us.
If you only want to target the WooCommerce Checkout page, you can use this CSS selector:
.woocommerce-checkout [other CSS selectors] {
//code here
}
For an instance, you want to change the heading colors of the Checkout page. What you’ll add to Customizer > Additional CSS is:
.woocommerce-checkout h3 {
color: red;
}
I hope this helps. Let us know if we can assist you further.
Regards,
Karla
@karlalevelup Hey, thanks for your reply.
While this solution works
.woocommerce-checkout h3 {
color: red;
}
unfortunately I’m unable to reproduce it with other CSS Classes.
This is the checkout page:
add first a product to the checkout.
For example, this piece of code:
.content-title-style-hide .entry-content, .content-title-style-above .entry-content {
border-radius: 30px;
padding: 20px;
height: 100%;
background: linear-gradient(90deg, white 50%, #f5f5f5 50%);
box-shadow: 0 0 0 1px #e0e0e0, 8px 8px 7px 1px rgb(0 0 0 / 7%), 0 1px 1.5px 0 rgb(0 0 0 / 5%)
}
This piece of code creates a border around the checkout page, adds some shadows and divides it in two halves with two different colors.
Unfortunately this styling also auto-applies to other pages like this page
and if I add .woocommerce-checkout before that piece of CSS code, it doesn’t work anymore.
This doesn’t work
.woocommerce-checkout .content-title-style-hide .entry-content, .content-title-style-above .entry-content {
border-radius: 30px;
padding: 20px;
height: 100%;
background: linear-gradient(90deg, white 50%, #f5f5f5 50%);
box-shadow: 0 0 0 1px #e0e0e0, 8px 8px 7px 1px rgb(0 0 0 / 7%), 0 1px 1.5px 0 rgb(0 0 0 / 5%)
}
Hi, @tommaso99!
Apologies for the delay in getting back to you.
Please could you update your CSS code to this:
.woocommerce-checkout .content-title-style-hide .entry-content,
.woocommerce-checkout .content-title-style-above .entry-content {
border-radius: 30px;
padding: 20px;
height: 100%;
background: linear-gradient(90deg, white 50%, #f5f5f5 50%);
box-shadow: 0 0 0 1px #e0e0e0, 8px 8px 7px 1px rgb(0 0 0 / 7%), 0 1px 1.5px 0 rgb(0 0 0 / 5%)
}
You have two CSS selectors(separated by a comma) and the second one doesn’t have the “.woocommerce-checkout” class which is why it affected other pages.
I hope this helps and let us know if we can assist you further.
Kind Regards,
Karla
