Jump to content

Change Add to Cart to "Request Swatch"

Recommended Posts

Site URL: https://lanternfish-lion-lr7x.squarespace.com/

Hi there,

I hid the quantity, price and add to cart buttons on my PDPs using this code:

.product-quantity-input,
.product-price,
.sqs-add-to-cart-button-wrapper {
display:none !important;
}

Now, I would like to add some copy and a button to every PDP, something like:

Copy: Request a swatch or a free quote
Button: Request a swatch
Button link: /contact page

How do I do this?

Edited by MiaMiaMia
forgot to mention i'd hidden product price as well
Link to comment
  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

It will really help us if you share the site password with us so that we can view the site.

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
18 hours ago, MiaMiaMia said:

@tuanphan how do I add a text link to every product page? I can add a description but not sure how to add a link across the board.

all products use same link or different link?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 10/28/2020 at 11:59 PM, MiaMiaMia said:

No, they will all link to the same place @tuanphan

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('footer.sections .button-block').insertAfter('h1.ProductItem-details-title');
	});
</script>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
12 hours ago, MiaMiaMia said:

Thanks! It's showing above the product name, can it be updated to show below

Add to Home > Design > Custom CSS

/* Button under product name */
.ProductItem-details .button-block {
    order: 2;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
1 minute ago, MiaMiaMia said:

Sorry - just realized it's still showing in the footer on non-PDP pages. How do I hide it? Example from the homepage:

211162462_ScreenShot2020-11-03at11_06_16AM.thumb.png.db9c176531d0088ce507c1ca2caf1df5.png

Try adding to Home > Design > Custom CSS

footer.sections .button-block {display: none;}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.