How to use the product blocks in the store to sell items that are not linked within squarespace e-commerce system (hide add-to-cart button and add custom button instead)

I have all offerings showcased on a store page for a client. (www.ruthlera.com/the-store) Some items are purchasable in the Squarespace e-commerce system and others are not. These others are either specific events that are showcased on the page but only available to members, or they are products that are purchased through third party websites. 

Is there a way to add all products to the 'store' section so they are easily findable, filterable via the categories but that have the add to cart button removed and instead have a custom button that takes you to a different place. 

I'm thinking I would have to make inventory 0, hide the 'sold out' button (so to keep the functionality of the disabled checkout) and then hide it on that specific product page. Then I would want to add a new button below that button on that specific product page that would go to a new location. 

Can anyone help?

Hi,

Yes. This is possible. If you search, you will see hundred of post with code to remove price, add to cart,..on specific product. If you share link to a product, I can give you code

With button go to new location, just add a Button Block in Additional Info, then add this code to Website Tools (under Not Linked) > Code Injection > Footer to replace add to cart with Button Block

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('section.ProductItem-additional .button-block').insertBefore('div.sqs-add-to-cart-button-wrapper div.sqs-add-to-cart-button');
});
</script>
<style>
.product-details .sqs-add-to-cart-button-wrapper>*:not(.button-block) {
    display: none !important;
}
.product-details .sqs-add-to-cart-button-wrapper .button-block {
    padding: 0px !important;
}
</style>

@tuanphan I'm wanting to do this on the Product List Page. Is it possible? https://hexaflexagon-drum-je2t.squarespace.com/shop is the site.

On 4/3/2024 at 8:39 AM, rishachesterfield said:

@tuanphan I'm wanting to do this on the Product List Page. Is it possible? https://hexaflexagon-drum-je2t.squarespace.com/shop is the site.

You mean replace all add to cart with button block, each button will have a different link?

@tuanphan exactly! The button says "Learn More" and it takes the user that specific item's product page.

On 4/6/2024 at 3:35 AM, rishachesterfield said:

@tuanphan exactly! The button says "Learn More" and it takes the user that specific item's product page.

Examples for 4 products below

#1. First, you need to find URL of 4 products. In my example, we will have

• /shop/p/diamond/cut/curb/chain/gold/24inch/12mm
•  /shop/p/diamond-cut-curb-chain-silver-necklace-24inch-12nn-stainless-steel
• /shop/p/diamond-cut-curb-chain-gold-bracelet-12mm-9inch
•  /shop/p/diamond-cut-curb-chain-silver-bracelet-12mm-9inch

#2. Use this code to Code Injection - Footer.
Replace Text/URL to your desired text/url.

<a href="https://google.com" class="product-01 custom-button">Learn More</a>
<a href="https://amazon.com" class="product-02 custom-button">Learn More</a>
<a href="https://instagram.com" class="product-03 custom-button">Learn More</a>
<a href="https://ebay.com" class="product-04 custom-button">Learn More</a>

#3. Use this code to Code Injection - Footer, under #2 code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
     $('.product-01').insertAfter('.grid-item-link[href="/shop/p/diamond/cut/curb/chain/gold/24inch/12mm"]');
    $('.product-02').insertAfter('.grid-item-link[href="/shop/p/diamond-cut-curb-chain-silver-necklace-24inch-12nn-stainless-steel"]');
      $('.product-03').insertAfter('.grid-item-link[href="/shop/p/diamond-cut-curb-chain-gold-bracelet-12mm-9inch"]');
      $('.product-04').insertAfter('.grid-item-link[href="/shop/p/diamond-cut-curb-chain-silver-bracelet-12mm-9inch"]');
})
</script>

You will have

#4. Use this code to Custom CSS box

a.custom-button {
  display: none;
}
section.plp-grid-add-to-cart {
    display: none !important;
}
div.grid-item a.custom-button {
    text-align: center;
    background-color: var(--primaryButtonBackgroundColor);
    border: 2px solid #fff;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 10px;
    display: inline-block !important
}

You will have

@tuanphan you're THE BEST! Thank you so much!!!!