Jump to content

When customizing cart page, can you add a link to a text?

Recommended Posts

Posted (edited)

I was able to add a paragraph in the cart page with CSS, but I want to add a link in that paragraph. Is it possible to add a link to a specific text with CSS or any kind of custom code?

 

Here's my code, and I want to add a link to the bold text. 

#cart .cart-container::after {
  content:'1. Customers who wish to make payment through WeChat Pay, Alipay, FPS, or bank transfer can go to WhatsApp to connect with customer service. We will assist you in placing your order conveniently. Alternatively, please contact Vinalie CS through WhatsApp at +852-5506-1330.\00000a 2. The option to pay with Apple Pay is only visible to custmers who have set up Apple Pay on their device(mobile). Must use Safari on a supported device.';
    white-space: pre-wrap;
    display: block;
    margin-top: 20px;
    color: #5B7456;}
 

Edited by Chloe9656
Link to comment
  • Replies 4
  • Views 177
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

27 minutes ago, Chloe9656 said:

Is it possible to add a link to a specific text with CSS or any kind of custom code?

You can't add a link using CSS. For that you'll need to write some JavaScript that dynamically adds the linked text after the page has been populated.

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment
2 minutes ago, paul2009 said:

You can't add a link using CSS. For that you'll need to write some JavaScript that dynamically adds the linked text after the page has been populated.

Adding JavaScript through Code Injection right? I just want to add a link to the bold text (WhatsApp). Does anyone know the what Javascript code to add to the cart page...?!


#cart .cart-container::after {
  content:'1. Customers who wish to make payment through WeChat Pay, Alipay, FPS, or bank transfer can go to WhatsApp to connect with customer service. We will assist you in placing your order conveniently. Alternatively, please contact Vinalie CS through WhatsApp at +852-5506-1330.\00000a 2. The option to pay with Apple Pay is only visible to custmers who have set up Apple Pay on their device(mobile). Must use Safari on a supported device.';
    white-space: pre-wrap;
    display: block;
    margin-top: 20px;
    color: #5B7456;}

Link to comment

@Chloe9656 Please add this code on your website in Header or Footer. And update link and class.
Please follow this path: Settings > Advanced > Code Injection
 

<script type="text/javascript">
	var paragraph = document.querySelector('.your-paragraph-class');

	var link = document.createElement('a');
	link.href = 'https://example.com';
	link.textContent = 'Your Link Text';

	paragraph.appendChild(link);
</script>

 

Link to comment
On 5/9/2024 at 9:50 PM, HimanshuYadav said:

@Chloe9656 Please add this code on your website in Header or Footer. And update link and class.
Please follow this path: Settings > Advanced > Code Injection
 

<script type="text/javascript">
	var paragraph = document.querySelector('.your-paragraph-class');

	var link = document.createElement('a');
	link.href = 'https://example.com';
	link.textContent = 'Your Link Text';

	paragraph.appendChild(link);
</script>

 

Hi! @HimanshuYadavThank you for your reply. But I tried this way, it didn't work. Can you see what was wrong?

 

<script type="text/javascript">
    var paragraph = document.querySelector('.cart-container');

    var link = document.createElement('a');
    link.href = 'https://api.whatsapp.com/message/TJOJYPO7OSXAM1?autoload=1&app_absent=0';
    link.textContent = 'WhatsApp';

    paragraph.appendChild(link);
</script>


Here's my CSS:

 

#cart .cart-container::after {
  content:'1. Customers who wish to make payment through WeChat Pay, Alipay, FPS, or bank transfer can go to WhatsApp to connect with customer service. We will assist you in placing your order conveniently. Alternatively, please contact Vinalie CS through WhatsApp at +852-5506-1330.\00000a 2. The option to pay with Apple Pay is only visible to custmers who have set up Apple Pay on their device(mobile). Must use Safari on a supported device.';
    white-space: pre-wrap;
    display: block;
    margin-top: 20px;
    color: #5B7456;}

Edited by Chloe9656
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.