How to switch the original price and compare at price in the cart drawer

Overview

One way of making your cart drawer offer more appealing is by showing a higher compare-at price so customers can clearly see the discount. With some CSS overrides, you can control which prices show up with that strikethrough. Here’s how:

1. On each offer, swap how the compare-at-price is displayed from Functions to Scripts
2. Click on Switch to Scripts to achieve that like the animation shows
3. Use the Fixed Amount option to enter the higher price you’d like to show.

By default, the lower price will show with the strikethrough, which isn’t what we want. To fix this, we’ll use CSS to swap which price gets crossed out.

4. Under the "Customization" section, click on the "Advanced" tab
5. Click on "Advanced: Custom CSS" to open the current CSS styles
6. Next, we want the strikethrough to apply to the compare-at price instead of the original price. To do this, move the following property from the .upsellplus-original-price class to the .upsellplus-compare-at-price class:

text-decoration: line-through;

• The CSS should look like this:

That’s it! Your upsell will now show the custom pricing with the strikethrough applied correctly.

Updated on: 01/10/2025