Sale Price in pricing table

[gazpugh1]

Hi. I am using the (now Classic) pricing table and I want to run a sale. Basically I need to put a slash through the main price and add something like “Now £xx.xx - Save 10%” underneath. I have found some old support threads but links are unavailable so cannot get this working.Also using the dark background so the slash and the new price are in white. Can anyone advise on this please?

[nico]

Hi @gazpugh1,

Thanks for writing in.

I have taken this this code from our old support thread. I have follow the instruction and it is still working well. Follow the instructions below to achieve what you want to customize. In regards to the color, adjust the code according to the desired color.

First, Add this code below in your custom CSS to add slash class that will add slash to the prices.

.slash-price .x-price {
  position: relative;
  }
.slash-price .x-price:after {
  content:"";
  display: block;
  height:4px;
  background-color:#000;
  position: absolute;
  width: 90px;
  left: calc(50% - 45px);
  bottom: calc(50% - 2px);
  -ms-transform: rotate(-30deg); /* IE 9 */
    -webkit-transform: rotate(-30deg); /* Chrome, Safari, Opera */
    transform: rotate(-30deg);
  } 

Then simply add slash-price to your Pricing table’s column’s class input. Check the video below for sample,

https://cloudup.com/i3fw4V9P2Rf

Then for your texts underneath the slashed price.

Add this in your text field in your price column:

<label class="new-price">Now £xx.xx - Save 10%</label>

Then add this in your custom CSS:

.x-pricing-column-info .new-price {
    font-size: 25px;
    color: red;
}

Hope it helps.

Let us know how it goes.

Thanks.

[gazpugh1]

@nico

<label class=“new-price”>Now £xx.xx - Save 10%</label>

Hi Nico,
Thanks for the fast response. The slash is fine but having issues with the last part. I’ve added the CSS and the label class part into the text section but it just appears as code. If I paste it into the title, it works but without styling. See attached screenshot.
Thanks!

[lely]

Hi There,

Please add it inside PRICE COLUMN.

Try to update the CSS to this:

.new-price {
    font-size: 25px;
    color: red;
}

See this: https://screencast-o-matic.com/watch/cbXeQn21as

Hope this helps.

[gazpugh1]

@Lely

.new-price {
font-size: 25px;
color: red;
}

Hi Lely,
Thanks for the input but still can’t get it to works. I’ve followed your instructions but still getting the same issue - see attached screenshots.
Am I missing something obvious here?
Many thanks,

Gareth.

[thai]

Hi There,

I would like to take a look at your custom CSS, would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom)? To do this, you can make a post with the following info:

• Link login to your site
• WordPress Admin username / password

Thanks.

[jade]

Hi there,

It seems that you have deleted your post.

Kindly provide us with the login details to your site so that we could check this further.

Please add it as a Secure Note which is the key icon below your response.

Thank you.