How To Add A Sale To Pricing Tables

How To Add A Sale To Pricing Tables

Firstly add your pricing table

  1. Add a pricing table
  2.  Add a sales message to the top of the features list. Here I’ve added Sale Price

.

Custom Class

The next thing we need to do is add a custom class to the sales pricing table. Here I have added a class called my_sale_pricing

Sales Message

With this method we are targeting the first list item (Sales Price) and moving it above the actual price with the use of jQuery. If you don’t know where to put the code check out this tutorial.

jQuery( document ).ready(function($) {
 $(".my_sale_pricing .et_pb_pricing_content_top").each(function() {
    $(this)
      .parent()
      .find(".et_pb_pricing_content .et_pb_pricing li")
      .first()
      .prependTo(this);
  });
});
  We can then go on to the styling.

.my_sale_pricing .et_pb_pricing_content_top li {
  font-size: 48px;
  padding-bottom: 10px;
  color: red;
}
.my_sale_pricing .et_pb_pricing_content_top li span::before {
  display: none;
}

Previous Price

Simply change the content: “75”; from 75 to whatever number you need.

 


.my_sale_pricing .et_pb_sum::before {
  content: "";
  margin-right: 5px;
  font-size: 30px;
  color: #666;
  text-decoration: line-through;
}

.my_sale_pricing .et_pb_sum::before {
  content: "75";
}

That’s all folks. Job done!

Leave a comment and let me know what you think.

Disclaimer - Divi is a registered trademark of Elegant Themes, Inc. This website isn't affiliated with or endorsed by Elegant Themes.
To enable us to keep some of the content on this site free, we might receive an affiliate commission if you click through and purchase products we advertise/recommend. You will never be charged more for this.