Striked price in Divi Pricing Table module

I’m not going to write a big intro about this topic, all I’m gonna say is that some people needs this feature and I’ve seen different workaround approaches, most of them involving using either the “currency”, either the “per” fields. The result is not visually pleasant, but it’s easy to maintain, update and reuse.

My approach it’s slightly different, it’s using CSS pseudoelements that will give best looking results, but at the cost of a bit more complicated usage.

So, in the example below, I first gave a class of discount to the Pricing Table module. Then, in the price fields of each table, I’ve used the current (new) price. The striked prices are added trough the following CSS code, that can be added either in Divi’s Custom CSS field, either in WP Customizer’s Additional CSS, either (most recommended) in child theme’s style.css:

.discount .et_pb_sum::before {
	content: '';
	margin-right: 5px;
	font-size: 30px;
	color: gray;
	text-decoration: line-through;
}
.discount .et_pb_pricing_table:nth-of-type(1) .et_pb_sum::before { content: '800'; }
.discount .et_pb_pricing_table:nth-of-type(2) .et_pb_sum::before { content: '1000'; }
.discount .et_pb_pricing_table:nth-of-type(3) .et_pb_sum::before { content: '1200'; }

That’s pretty much it. I think the CSS it’s pretty self-explanatory, so I won’t insist on it. With a bit more CSS, the striked prices can be styled in pretty much any way one would like.