Docs

[mattbuff5]

I am attempting to implement a Sale Price into my Pricing Table Element.

I have tried both of the methods described in the threads pasted below:
https://community.theme.co/forums/topic/slash-through-prices-in-pricing-table/
For the first attempt, nothing changed in my price.

https://community.theme.co/forums/topic/add-red-strikethrough-on-priciing-table-column/
For the second attempt, the strike through showed up but the weight of the line was very, very thin.

Any assistance is appreciated.

[mattbuff5]

This reply has been marked as private.

[Joao]

Hi There

Your line trough doesn’t look thin on my end, please see image attached.

Let us know if you still need help.

Joao

[mattbuff5]

I’ve gotten the slash method similar to this post:
https://community.theme.co/forums/topic/slash-through-prices-in-pricing-table/

I’ve added the CSS below and have set the class to slash-price… The slash part is working great. Now what I’m trying to do is under the slashed price, I want the new-price to display. It is displaying but the new-price styling is not applying to the price – i have $99 set … it should be 28px and red.
I’ve also added this to the content input box in the pricing table – <label class=”new-price”>$99</label>
Here are a few screen shots…
http://prntscr.com/bt2gc0

http://prntscr.com/bt2gp0

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

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

.x-pricing-column-info br {
    display: none;
}

Thanks for the assistance.

[mattbuff5]

edit – removed to update previous question

[John Ezra]

Hi there,

Thanks for updating the thread! Upon checking your site, you seemed to have changed your styling to something different. Do you still need help with this issue? Thanks,

[mattbuff5]

yes i still need help

i don’t think i changed any styling

[Rad]

Hi there,

Try something like this,

.x-pricing-column label.new-price {
    font-size: 28px !important;
    color: red !important;
}

Thanks!

[mattbuff5]

Rad –

Thanks I tried that; however, it still did not work.

Matt

[Jade]

Hi Matt,

I went ahead and place the code that Rad suggested in the customizer and it seems to work fine.

http://greaterthanyesterdaynutrition.com/nutrition-coaching/get-started/

[mattbuff5]

So I see what I was doing different….
I had this

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

You all entered this (which worked)

.x-pricing-column label.new-price {
    font-size: 28px !important;
    color: red !important;
}

So the -info at the start of the class identifier was causing me issues.

Thanks

[mattbuff5]

Well I guess I’m stumped – I have to have the same statement in the css code twice to get it to take.
This works:

.x-pricing-column label.new-price {
    font-size: 40px !important;
    color: red !important;
}

.x-pricing-column label.new-price {
    font-size: 40px !important;
    color: red !important;
}

This does not work:

.x-pricing-column label.new-price {
    font-size: 40px !important;
    color: red !important;
}

Any idea why?

[Friech]

Hi There,

There is a syntax error on your custom CSS. Please look for this block on your custom css in customizer.

.wpcf7 textarea {
    margin-bottom: 10px;
	border:1px solid #DCAE1D;
    height: 180px;
    padding:2px 5px;
    border-radius:5px;
    font-size:14px;
    max-width: 400px;
  }
}

And remove that extra closing bracket.

Hope it helps, Cheers!

[mattbuff5]

Doh!
Thanks, got it.

[Thai]

If you need anything else please let us know.

[Author]

Posts