Jump to content

Remove the add to cart button and replace it with custom button pointing to a third party software

Recommended Posts

Site URL: https://www.stylease.club

Hello

I would like to remove the "add to cart button" from all my products pages and replace it with a custom code, from a third party software. We have a rental website and the third party software would allow us to manage rental pricing and all the user experience in a better way. This is the software https://booqable.com/

I can not find a way to remove the code from the product pages, only inject new code.

Here is an example page https://www.stylease.club/catalogo/p/dior-bobby-mediano

I guess this is the part I have to remove

<div class="product-quantity-input" data-item-id="5f7b7251bf4e4a7b6fac98c3" data-animation-role="content">
  <div class="quantity-label">Quantity:</div>
  <input size="4" max="9999" min="1" value="1" type="number" step="1"></input>
</div>

<div class="sqs-add-to-cart-button-wrapper" data-animation-role="button">
  <div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button " role="button" tabindex="0" data-collection-id="5f79f36b481c031d51ecc82e" data-item-id="5f7b7251bf4e4a7b6fac98c3" data-product-type="1" data-use-custom-label="false" data-original-label="Add To Cart" >
    <div class="sqs-add-to-cart-button-inner">Add To Cart</div>
  </div>
</div>

And this is the code I have to put on the top of page

<script>
  var booqableOptions = { company: '934e9747-9f22-4edb-a40a-ee26ddf564fb' };
</script>
<script src="https://934e9747-9f22-4edb-a40a-ee26ddf564fb.assets.booqable.com/v2/booqable.js"></script>

plus, this is the code I have to put instead of the standard squarespace cart and quantity button

<div class="booqable-product-button" data-id="christian-dior-bobbi-mediano"></div>

I think I should do this for each product page, one by one.

I guess that I have to use the development platform to do that, but I can't enable it. It looks like it's not available for my 7.1 site.

I did not find where to choose if my site was to run on 7.0 or 7.1, I guess 7.1 it's default? EDIT: I think the answer to this is that I have to start from scratch my website with a 7.0 template, according to this post >

thanks

best regards

Roberto

Edited by RobertoF
found partial answer
Link to comment
4 hours ago, RobertoF said:

I would like to remove the "add to cart button" from all my products pages

Your site is built with Squarespace 7.1. There isn't a setting in this version to hide the Add to Cart buttons, but you can remove them by adding this to Design > Custom CSS:

 

.ProductItem-details .sqs-add-to-cart-button-wrapper, .ProductItem-details .product-quantity-input {
  display: none;
}

Regarding the script, the first part should be added in Settings > Advanced > Code Injection. The second, product-specific piece of code must be added in a Code Block. When editing your Product, a Code Block can be added to the Additional Information tab and you can insert the code there. 

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
  • 11 months later...
On 11/22/2020 at 9:00 PM, RobertoF said:

Site URL: https://www.stylease.club

Hello

I would like to remove the "add to cart button" from all my products pages and replace it with a custom code, from a third party software. We have a rental website and the third party software would allow us to manage rental pricing and all the user experience in a better way. This is the software https://booqable.com/

I can not find a way to remove the code from the product pages, only inject new code.

Here is an example page https://www.stylease.club/catalogo/p/dior-bobby-mediano

I guess this is the part I have to remove

<div class="product-quantity-input" data-item-id="5f7b7251bf4e4a7b6fac98c3" data-animation-role="content">
  <div class="quantity-label">Quantity:</div>
  <input size="4" max="9999" min="1" value="1" type="number" step="1"></input>
</div>

<div class="sqs-add-to-cart-button-wrapper" data-animation-role="button">
  <div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button " role="button" tabindex="0" data-collection-id="5f79f36b481c031d51ecc82e" data-item-id="5f7b7251bf4e4a7b6fac98c3" data-product-type="1" data-use-custom-label="false" data-original-label="Add To Cart" >
    <div class="sqs-add-to-cart-button-inner">Add To Cart</div>
  </div>
</div>

And this is the code I have to put on the top of page

<script>
  var booqableOptions = { company: '934e9747-9f22-4edb-a40a-ee26ddf564fb' };
</script>
<script src="https://934e9747-9f22-4edb-a40a-ee26ddf564fb.assets.booqable.com/v2/booqable.js"></script>

plus, this is the code I have to put instead of the standard squarespace cart and quantity button

<div class="booqable-product-button" data-id="christian-dior-bobbi-mediano"></div>

I think I should do this for each product page, one by one.

I guess that I have to use the development platform to do that, but I can't enable it. It looks like it's not available for my 7.1 site.

I did not find where to choose if my site was to run on 7.0 or 7.1, I guess 7.1 it's default? EDIT: I think the answer to this is that I have to start from scratch my website with a 7.0 template, according to this post >

thanks

best regards

Roberto

Hi Roberto, can I pm you to asking about the booqable integration on your site?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.