Hiding quantity, add to cart button and adding custom button to redirect to separate URL

Monstarro · May 3, 2023

I am trying to hide the "Add to Cart" button, hide the product quantity input field, and add a custom "Order Now" button on a Squarespace page with the following code. However, I keep receiving the message: "Syntax Error On Line 1".

<head>
<style>
.sqs-add-to-cart-button-wrapper {
display: none !important;
}

.custom-button {
border: 1px solid;
padding: 10px 15px;
}

.product-quantity-input {
display: none !important;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
$('<a class="custom-button" href="https://google.com">Order Now</a>').insertAfter($(".ProductItem-details-excerpt ul"));
});
</script>
</head>

(The current URL is a temporary placeholder to get the code working. However, the aim is to redirect to a different website.)

Ziggy · May 3, 2023

5 hours ago, Monstarro said:

However, I keep receiving the message: "Syntax Error On Line 1".

Are you typing the code starting with <head> into the Custom CSS part of the dashboard?

That code is HTML not CSS co needs to go in the header code injection. You also need to change <head> to <header> BUT if you're putting it in the Header Code Injection then you can delete those start and end tags.

Monstarro · May 4, 2023

19 hours ago, Ziggy said:

Are you typing the code starting with <head> into the Custom CSS part of the dashboard?

That code is HTML not CSS co needs to go in the header code injection. You also need to change <head> to <header> BUT if you're putting it in the Header Code Injection then you can delete those start and end tags.

That's great, this fixed my issue. However, is there a way to add a variable so that each item on the store links to a different URL through the new custom button?

tuanphan · May 6, 2023

On 5/4/2023 at 9:23 AM, Monstarro said:

That's great, this fixed my issue. However, is there a way to add a variable so that each item on the store links to a different URL through the new custom button?

You can consider adding a button block in Additional Info, then use this new code to achieve this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  
  <script>
    $(document).ready(function() {
      $('[class*="type-products"] .button-block').insertAfter($(".ProductItem-details-excerpt ul"));
    });
  </script>

Hiding quantity, add to cart button and adding custom button to redirect to separate URL

Recommended Posts

Monstarro

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Ziggy

Ziggy

Monstarro

tuanphan

Create an account or sign in to comment

News

Ziggy

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources