How to adjust tiered pricing templates with custom CSS

Tiered pricing blocks usually fit any theme perfectly by utilizing its styles; however, there can also be cases when you need to apply specific CSS rules, which is common for WordPress sites.

WordPress allows you to add custom CSS to your site for those cases.

You can read more about that in WordPress documentation: https://wordpress.com/support/editing-css/

As for the Tiered Pricing, here are some classes you can use to add CSS:

Every pricing template is wrapped in the .tiered-pricing-wrapper div so that you can use that as a general container for your CSS.

The inner pricing blocks use the following CSS class structure: tiered-pricing-{type} where {type} is the type of layout (table, blocks, options, etc.):

So, for example, if you need to make the pricing table smaller, CSS can look like this:

.tiered-pricing-table td,
.tiered-pricing-table th  {
	padding: 2px;
}

Or, for example, you want to change the font of the pricing blocks:

.tiered-pricing-blocks .tiered-pricing-block {
	font-family: PT-Sans
}

Read more about CSS https://developer.mozilla.org/en-US/docs/Web/CSS