Jump to content

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

Go to solution Solved by Ziggy,

Recommended Posts

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

Link to comment
  • Solution
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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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?

Link to comment
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>

 

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.