How to change "$" sign in Pricing Tables module
If you have the unicorn child theme installed follow Method 1. If you added the CSS to the custom CSS box in Divi, follow Method 2.
Method 1 - You have the Unicorn Bundle Child Theme installed
- The pricing tables are stand alone modules or included in specific page layouts. First identify if you a stand alone pricing table - make note which one. If you used a page layout with a pricing table on it - identify the name of page layout.
- Next we locate the matching Css file for the module OR the page layout. We will download and open the file by FTP and search for a specific line of code in it.
- The pricing tables 4-4 module CSS file path will look something like this /wp-content/themes/unicorn-divi-child-theme/css/pricing-tables-divi-layout-kit.css
In that file - search for the line below - the replace the "$" with "£" or Symbol of your choice. - Clear caches - reload page and you should be good.
Before.....
.price_table_4 .et_pb_et_price .et_pb_sum:before {
content: "$";
display: inline-block;
font-size: 28px;
vertical-align: top;
line-height: 100%;
}
After.....
.price_table_4 .et_pb_et_price .et_pb_sum:before {
content: "£";
display: inline-block;
font-size: 28px;
vertical-align: top;
line-height: 100%;
}
Method 2 - You manually added the source CSS somewhere.
- Search wherever you added CSS for the "before" code as listed above and replace it with the "after" code. Update or Save. Clear caches - reload page and you should be good.
- Clear caches - reload page and you should be good.
Potential caches to clear "before" reviewing your changes
- How to clear the Divi Theme cache "static css file generation" https://www.screencast.com/t/k2WiQImA6MqM
- Website cache (a plugin like wp-rocket, fastest cache, w3Cache etc)
- Hosting or CDN side cache (Cloudflare, Cloudfront, Varnish, WPengine etc) Note: this can take up to 30 min to reflect changes.
- How to clear your browser cache or load the page in a Private or Incognito tab. This applies to all desktop, mobile and tablet devices you are testing on.
Further links that might be of help
- How to use the code inspector to find specific CSS in Chrome - video here https://www.youtube.com/watch?v=vs63yeOkT3I. It's a similar story if you use Firefox or Safari - Search for videos on that if you need to.
- More info here https://css-tricks.com/using-devtools-tweak-designs-browser/