Jump to content

CSS Code to put a price in brackets, hyperlink text that is there

Recommended Posts

I hope you can help with some css code for my shop.

1. I wonder if there is a way to take the product price and put it in brackets where the (+OTR) is but add a figure i designate which would be the OTR cost on a bike. So £4199 (£4349 inc OTR). This css only appears if the item has the tag available-to-order which i need to keep. Below is the css i have put in to it so far:

h4 a:hover{background-color:#808080    !important;border-bottom-style: none!important;text-decoration: none!important}
.tag-available-to-order .product-price::after {
    content: '(+OTR)';

2. I would like to take this text and hyperlink it to telephone a number i can designate. Again, i have added this code already which i have put below.

.tag-available-to-order .product-mark.sold-out:after {
  content: 'TO ORDER, CALL 01392 467700'!important;
  visibility: visible;
  position: absolute;
  left: 0;
  width: 100%;
  color: black !important

3. In the product page itself, i would like to have a hyperlinked text after it which will link to a separate page on a new tab. I only want this to appear on the product page. I don not have css for this.


Any help that can be given would be greatly appriciated. This is code i have found from other threads on the forum. Website is cmsexeter.co.uk

Screenshot 2023-03-28 165142.png

Screenshot 2023-03-28 165309.png

Edited by derekrayner
added url of site.
Link to comment
  • Replies 1
  • Views 462
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

#1. Add to Design > Custom CSS

.tag-available-to-order .product-price {
    visibility: hidden;
.tag-available-to-order .product-price::before {
    content: '(+OTR)';
    visibility: visible;

#2. You mean make phone clickable?

#3. All available to order products will have same link or different?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.