Easy Pricing Tables comes with pretty complete customization options. However, if you know some basic coding skills, adding further customization is easy.
Before you begin:
This article is useful for free and premium customers. However, it does reference some premium features. Head here for details or to purchase.
All fields of your pricing tables are shortcode, and HTML, compatible. You can even add CSS directly to elements with some inline styling. On top of that Easy Pricing Tables comes with a CSS editor to add custom CSS to the backend.
HTML in your Tables
When creating or editing your tables, you can add almost any HTML to your features, plan name, and other fields, for styling them. You can even add inline CSS.
Examples:
<b>My Feature</b>
<div style="color: red;">My Feature</div>
This can be used to style individual features, add small images to your columns headers, change the colors of your icons, and much more.
Custom CSS Editor
All versions of Easy Pricing Tables let you easily add custom CSS to your pricing table:
1. Log into your WordPress backend and open your pricing table.
2. Click on the “Design” tab.
3. Click on “Custom CSS” at the bottom.
4. Enter your CSS here.
Tips:
Be specific with your classes and ID’s, and you may need to include !important in your CSS, depending on how your theme works, and if you have other things adding custom CSS to your site. For most custom CSS it’s best to target your individual table, especially if you want to make more than one. Your tables will all have a unique HTML id.
Target your tables with this id: #ptp-[post-id]
Where [post-id] will be your table’s unique post id. This can be found in the URL while editing it, or the shortcode while deploying it.
Specific HTML and CSS
Here are some examples of really cool stuff you can do easily with custom CSS and HTML in Easy Pricing Tables.
Select a topic for details:
Linebreaks
Adding Linebreaks to Titles and Buttons
If need to add a line to your buy button, or plan names, you can simply use a <br> HTML tag right in the table.
This:
Will result in this:
Keep in mind this may affect alignment, so try to keep the number of lines the same across rows.
Colors
Colors for Icons and Features
You can customize the color of every element in Easy Pricing Tables. However, we get a lot of questions about changing the color of an icon, or a specific feature.
To change the color of one very specific thing, we suggest adding some inline styling to it. Add a <span> around the the element to change, and add the color property inside the span.
Looks like this:
<span style="color: green;">[check-square-o]</span>
<span style="color: red;">[lock]</span>
This is used to create the green checkmarks, and red locks you see here:
You can use simple color names, but it’s best to find a hex color value, (eg #RRGGBB).
Salesprices
Adding Sales Prices with Strikethrough
By adding and a few markups, you can add a sales price to your price field, by wrapping the initial price in a strikethrough, and making it smaller. Like this:
<strike style=”font-size:20px;”>$149</strike> $99
Add a linebreak and some color to get a nice effect:
<strike style="font-size:18px; color:red;">$149</strike><br>$99
Rows and Columns
CSS for Specific Rows and Columns
Something currently not included in the interface is the ability to customize specific rows or columns. However, you can add some CSS for this using our classes.
Each row and column will have its own unique HTML class you can target with CSS:
For Columns
- Class of the first column:
ptp-col-id-0 - Class of the second column:
ptp-col-id-1 - Class of the third column:
ptp-col-id-2 - etc…
Tips:
For the comparison table, we use slightly different classes. Use “.ptp-cp1-column-0” instead. “cp1” stands for ‘Comparison Table 1’. So for ‘Comparison Table 2’ use cp2 etc.
For Rows
- Class of the first feature row:
ptp-row-id-0 - Class of the second feature row:
ptp-row-id-1 - Class of the third feature row:
ptp-row-id-2 - etc…
So to change the color of and individual column of your table, you can do this:
#ptp-[post-id] .ptp-col-id-2 {
background-color: #3aa0d1;
}
Add Images
Add Images
Using their HTML you can add images to any field in the easy pricing table. Finding this HTML is quite easy too.
Please bear in mind adding images will warp the dimensions of your table. Try and use small images, and keep your rows and columns even.
Example HTML:
<img class="aligncenter size-thumbnail wp-image-722" src="http://www.example-website.com/wp-content/uploads/2018/02/heterochromia-cat-100x100.jpg" alt="" width="100" height="100" />
Where do I get this HTML from? Easy.
Just open up a new post and use “Add Media” as you normally would. Change the size appropriately, and add any alignment right here in your post editor. Then switch to the “Text” editor, and copy the corresponding HTML for your image, and paste it into your table.
Here is an example of a table with some images inserted into the header:
These examples are very basic ideas you can expand on. We hope they help you bring your customizations to the next level.
By limiting customization to the most needed things, and keeping flexibility, we provide products that are both powerful, and easy to use.
Need assistance with this or anything else? Feel free to contact our support team at https://fatcatapps.com/support/