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, followMethod 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/