How to Customize the Pricing Table Colors in Dynamic Pricing Using the Code Snippet?

This article explains how to customize the pricing table of ELEX WooCommerce Dynamic Pricing and Discounts Plugin. You can use a simple code snippet to do this task. 

This is a generic code snippet and works regardless of any third-party plugins. The snippet is an easy way to override the display of the pricing table without overriding it in the plugin file (Dynamic Pricing).

Pricing Table Before Adding the Code Snippet

Customize the Pricing Table Colors in Dynamic Pricing | pricing table-before applying code snippet

Add the below code snippet in the CSS file (additional.css) of your activated website theme.

Just copy and paste the snippet and you are done! 

Follow the below steps to input the snippet into your website.

1.Navigate to the appearance tab of the backend of your website.

2.Select the Customise option.

3.Click the additional CSS option and input the below snippet.

Code Snippet to Customize the Pricing Table

.xa_sp_table_body_row td {
        background-color: blue !important;
    }
.xa_sp_table_cell{
        text-align:center;
color:red;
    }
    .xa_sp_table_head2 tr td
    {
        text-align: center;
color: green;
background-color: yellow;
    } 
.xa_sp_table_head1  {
color: orange;

Note: All the colors are changeable as per the business requirement. We can change the color by changing the colors of different classes in the snippet.

Classes for different colors are listed below:

Body background color (blue) – .xa_sp_table_body_row

Body text color(red) – .xa_sp_table_cell

Heading background color(yellow) – .xa_sp_table_head2

Table heading text color(orange) – .xa_sp_table_head1

Pricing Table After Adding the Code Snippet

Customize the Pricing Table Colors in Dynamic Pricing | pricing table-after applying the code snippet

This is how you can customize the colors on the pricing table with a code snippet.


To know more about the product, check out Dynamic Pricing and Discounts Plugin for WooCommerce.

Or check out the documentation section for more related articles.

Next Display Regular Price range for the discounted Variable products using ELEX WooCommerce Dynamic Pricing Plugin (Code Snippet)

    Leave a Reply

    WordPress Image Lightbox Plugin