Change Add to Cart to "Request Swatch"

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?

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

@paul2009Oh I'm sorry, password is: Exclusive2020 thank you so much for your help

You can add a text link, then we will give the code to turn link to button

@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.

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?

@tuanphan -- I'm not sure I understand the question. Each product should have a button with the same link. But each product is obviously on a different page. I want to add this button to all product pages. Let me know if that clarifies?

I mean all links to /contact page

or Product a > link to /contact-1

Product b > link to /contact-2

...

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

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>

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

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;
}

Perfect, thank you so much!

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

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:

Try adding to Home > Design > Custom CSS

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

Perfect, that worked, thank you!