Apply CSS only to a specific page

  • Hello
    I styled the checkout page of a demo website I’m building.
    Then, if I like how it looks, I will push to the mail website.
    I applied different CSS changes in the Additional CSS page in the customizer.
    However, I’d like that all the CSS only applied to the checkout page. How can I do that?
    The page I need help with is the checkout, but you first need to add a product to the cart from the /shop page to see the styling difference.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • 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

    Thread Starter Tommaso99

    (@tommaso99)

    @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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Apply CSS only to a specific page’ is closed to new replies.