Customizer not applying changes to WooCommerce Checkout page

Hello @vannessarhoades,

Thank you for reaching out,

Could you please share a brief video showing the issue you are encountering?
Or tell us how we can replicate your steps to arrive at the issue on a fresh WordPress installation(we need to reproduce the issue on a brand-new WordPress). So we can understand and check it better.

You can upload your files to one of the following online services:
https://loom.com
https://drive.google.com
https://wetransfer.com
Or any other service you know.

All styling for WooCommerce pages in WP Dashboard > Appearance > Customizer > WooCommerce > Advanced Styling. Also, you can edit the page and find more settings for special page styling on OceanWP Settings.

If you’re not seeing changes after adjusting them on, it could be related to the cache. So if you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, clearing all caches depends on the cache at the ISP, which might take time. Alternatively, you can check it on a device that you haven’t used to access your website recently or check your website on a guest browser.

Please keep us posted,
Thank you

Best Regards

Here is a screenshot of the changes I made in the customizer via WP Dashboard > Appearance > Customizer > WooCommerce > Advanced Styling: https://snipboard.io/oQqgVa.jpg. The problem is the changes are not showing up on the front end of my website. This is a screenshot of what it looks like in real life: https://snipboard.io/Lb74d3.jpg. It’s making it hard for customers to read the text since my hyperlinks are also orange.

This seems to be the only place in WooCommerce I’m having this issue. All other customizations are working fine. Since my initial inquiry, I have deactived a number of plugins, specifically any that claim to speed up the site by optimizing the Javascript or CSS. So I’m not sure what else to do at this point. WordPress was unable to help with this issue. Any help you can offer is most appreciated.

Hello @vannessarhoades,

Thank you for reaching out,

I fully examined the issue you have raised on this topic and could not see it on my end.

I found these CSS that overridden the custom styling in the theme:
https://postimg.cc/FYXyhm0R It is called “WooCommerce Colors” and is not in our products. So I guess there is a plugin on your website that affects it.

For troubleshooting, please do the following steps:

0. Enable the primary theme(if you are using a child theme).
1. Head over to WP Dashboard > Plugins.
2. Deactivate all plugins.
3. Then, first, activate Ocean Extra plugin.
4. Check your issue.
5. Then, activate your plugins one by one
6. After activation of any plugins, check your issue

And check if there is any plugin that affects it.

If the above steps didn’t help you, you can add the following custom CSS to override all previous CSS

.woocommerce-checkout #payment div.payment_box {
    background-color: #6b6b6b !important;
}

.woocommerce-checkout #payment {
    background-color: #e0e0e0 !important;
}

Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

I hope it helps.
Best Regards

You were exactly right! Disabling the WooCommerce Colors plugin fixed it! That was one I needed with my old theme, and I must have missed it as I was going through and testing various plugins. Thank you so much for taking the time to help me fix this ??

Hello @vannessarhoades,

Thank you for the update, and you’re most welcome.
I’m glad we could help.

Best Regards