Jump to content

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)

Recommended Posts

Posted

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?

  • Replies 6
  • Views 2.5k
  • Created
  • Last Reply

Top Posters In This Topic

Posted

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 3 months later...
Posted
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
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

image.thumb.png.216bb993a8012cd573791f221e380f7e.png

#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

image.thumb.png.e1b682e69b5231adc478a6988fce3545.png

#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

image.thumb.png.5f9d68f9baf06c163b363e6363f52200.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.