PRODUCT BLOCK - customize layout/design - adjust Add To Cart button size and text & delete the Quantity Input box

Hello Everyone,

Please help me with CSS code needed to redesign Squarespace's Product Block.  This Product Block was added to the page called LOADED under the SHOP navigation folder in the header.  Squarespace's standard settings for adjusting the style/design of a Product Block are extremely limited.  

Website link: https://carrot-disc-nsp7.squarespace.com/loaded

Password: peak

Please see attached JPG file for what I would like to accomplish. 

GOALS:

STEP #1 Increase Width of Add to Cart Button

STEP #2 Change text on button to read:       $42   |   Add to Cart

STEP #3 Delete the Quantity text & box

What is the CSS code is need to accomplish these goals? 

Thanks so much in advance! 

Freed

Add to Loaded Page Header

<style>
  div.sqs-add-to-cart-button {
    width: 100% !important;
}
.sqs-add-to-cart-button-inner {
    font-size: 0;
}
.sqs-add-to-cart-button-inner:before {
    content: "$42 | Add to Cart";
    font-size: 20px;
}
  .product-quantity-input {
    display: none;
}
</style>

Tuanphan, thank you so much for your help!  The code worked well. 

I would like to have space between the text on the button so that it looks more natural and more appealing.  Is there a way to add space between the word "$42" and the vertical line.  And then add space between the vertical line and the phrase "Add to Cart"?  I was thinking 30 or 40 pixels of space or the equivalent of three character spaces with the space bar would look good.  When I try to add spaces with css code the text does not change.  I tried to add css word spacing but it also adds spacing between the words Add to Cart which was not desired. 

Please check the attachment for reference.

Website link: https://carrot-disc-nsp7.squarespace.com/loaded

Password: peak

Thank you! 

Freed

Use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $(".sqs-add-to-cart-button-inner").html(function() { 
          return $(this).html().replace("Add To Cart", "<span>$42</span>|<span>Add To Cart</span>");  
    });
});
</script>
<style>
  div.sqs-add-to-cart-button {
    width: 100% !important;
}
  .product-quantity-input {
    display: none;
}
  .sqs-add-to-cart-button-inner span:first-child {
    margin-right: 20px;
}
.sqs-add-to-cart-button-inner span:last-child {
    margin-left: 20px;
}
</style>

14 hours ago, tuanphan said:

Hello Tuanphan, 

Thanks so much for the code!  It worked great  but I have a few issues I am hoping you can help me with. 

Issue #1- The code that you gave works great on the website link I gave you one week ago. Since then I have been refining the whole website on a duplicate site. The new code does not work on the new website.  I think it is because the first line was specific to the previous website: 

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

Could you check the new website and adjust the code to match this latest version of my website?

Website link = https://crimson-amethyst-w5xe.squarespace.com/loaded

Password = loaded5

Issue #2 When I click the Add to Cart red button the button expands to the right each time it is pressed. Is there a way this can be fixed? Please check the video attachment for reference.

Issue #3 At the moment the "Add to Cart button" is very wide. I would like to shorten the length for a balanced look with the rest of the items on the page. Is there a way to make the button match the width of the product box?  Then I can adjust the product box width to increase or decrease the length of the Add to Cart button.  Please check the attachment for reference. 

Thank you! 

Freed

Can you remove the code? I see your Code Injection has 2 jQuery Library, they will conflict together

Also, some lines are invalid, you are using comment, but these syntax is for CSS comment

To add comment in Code Injection, you need to use this syntax

<!-- write a comment here -->

Thank you, Tuanphan. 

I removed all the code in the Loaded page code injection.  Then I added back in the code that you sent me: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $(".sqs-add-to-cart-button-inner").html(function() { 
          return $(this).html().replace("Add To Cart", "<span>$42</span>|<span>Add To Cart</span>");  
    });
});
</script>
<style>
  div.sqs-add-to-cart-button {
    width: 100% !important;
}
  .product-quantity-input {
    display: none;
}
  .sqs-add-to-cart-button-inner span:first-child {
    margin-right: 20px;
}
.sqs-add-to-cart-button-inner span:last-child {
    margin-left: 20px;
}
</style>

I still have two issues: 1) the Add-to-Cart spacing is not showing and 2) when you click on the red Add-to-Cart button the button expands to the right (it gets longer and extends off the right side of the screen).  

Question: 

Is this code script correct for the current website? 

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

The website is https://www.inkshotlife.com/loaded

The Password is = loaded5

Thank you.

Thank you, Taunphan!  

I really appreciate your help fixing the issue with the button expanding when pressed.  Now the button remains the same size and is fixed.  

With the new code, the button expansion stopped with both texts I tried:

"Add to Cart" or

"$42 | Add to Cart"

Span Distance Issue Question:

Since the $42 | Add to Cart button is working well now, I would to use this button text and solve the issue of having more space between the span "$42", the span "|" and the span "Add to Cart".  Previously you sent me the code to put distance between the spans, but it does not seem to be working.  Please see the attachment with the latest code. 

Could you please help me adjust the code to increase the space between the spans on the button? 

The website = https://www.inkshotlife.com/loaded

Password= loaded5

Thank you! 

Script code, will find button with text: Add to Cart, then add span tag to this text

But, current button text is "$42...", not "Add to Cart", so that code won't run.

So I said, you need to change the text to Add to Cart first, If you doesn't change it, I have no way to help you with this.

Tuanphan, thank you for your help!  Everything is working great! I appreciate your explanation of how the script code works.  I found out why the script was not working before when I change the text to Add to Cart.... the reason was that I changed  (wrote) the text in the  "Checkout / Custom Button" section to "Add to Cart", but I really needed to turn off the Checkout / Custom Button" option completely so that Squarespace would use their default "Add to Cart" text.  Only if Squarespace's Checkout / Custom Button function is turned off will the script work to overwrite the default "Add to Cart" with the script's text.

Thank you again, so much, for your fantastic help! 

Freed