CSS code to add a background color to a special heading element

Hi RosannaK,

Try going to Enfold > General Styling > Quick CSS, then add this CSS code:

#top #wrap_all .woocommerce-loop-product__title {
    background-color: blue;
}

just change the blue color.

Best regards,
Nikko

Hi RosannaK,

Can you give us a link to where this should apply? so we can try to investigate why it’s not working.

Best regards,
Nikko

Hi Rosanna,

I apologize for the delayed response.
The code I gave did work on the Enfold setup/site that I have, can you give us a link? the woocommerce product page that you are referring.
I’m just speculating but I think the problem might be caching if the CSS code is not fetched on the frontend of your site.

Best regards,
Nikko

Hi RosannaK,

Thanks for giving us the link and admin access.
I noticed that you were using Advanced Layout Builder, so I suggest doing the following steps:
1. Edit the Special Heading (product title), go to Advanced > Developer Settings > Custom CSS Class, then put my-product-title then save.
2. Go to Enfold > General Styling > Quick CSS, then add this CSS code:

#top .my-product-title {
    background-color: blue;
}

Just change the blue (value) in background color to any color you’d like.
Also to apply this in other products, you only need to do step 1.

Best regards,
Nikko

Hi RosannaK,

I have removed the spacers and replaced it with border of the same color, I replaced this code:

#top .my-product-title {
    background-color: blue;
}

With:

#top .my-product-title {
    background-color: blue;
    border-top: 1px solid #ddb72c;
    border-bottom: 1px solid #ddb72c;
    margin: 30px 0 !important;
    padding: 30px 0 !important;
}

However with the blue background color, the border does not look visible, I would suggest changing the background color from blue to another one.

Best regards,
Nikko

Hi,

Add this to quick css:

#top form.cart .button {
    color: #ddb72c!important;
}

Best regards,
Jordan Shannon

Hi RosannaK,

We’re happy to hear that :)
Thanks for using Enfold and have a great day!

Best regards,
Nikko