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

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

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. 

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?