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.
Item 1
Subtitle for item 1
$200/item
- Included option
- Included option
- Included option
- Excluded option
- Excluded option
- Excluded option
Item 2
Subtitle for item 2
$400/item
- Included option
- Included option
- Included option
- Excluded option
- Excluded option
- Excluded option
Item 3
Subtitle for item 3
$600/item
- Included option
- Included option
- Included option
- Excluded option
- Excluded option
- Excluded option
Hi, could you please send me instructions on exactly how to do this? Unfortunately, I don’t know CSS. I will be very grateful
Hello, Kamil.
It’s in the article:
Just be sure you add same class in both module and CSS.
This is not working for me have i done anything wrong? how can i enable old strike price?
Hello, Paul.
If it’s not working for you, you certainly did something wrong. As you can see in the example above, it does work. I don’t know what old strike price you had before, so I can’t help you with that. Divi does not have a striked price option, so I guess you used some different custom code for it.