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. 

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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.