Shop Page Issues (Different links buttons for each products)

Hello community! I need help, once again! 😃

I am seeking to have different button links (other than the action "ADD TO CART") for my 3 first products only. As you'll see, I have managed to use CSS to create a different button for those 3 first products (using the tag 'no-cart' to differentiate them from product #4 and #5, which still have the ADD TO CART button, like I want them to).

Here's what I need: 

Product #2 to be linked to https://thefolkpath.com/booking-1-hour-session

and button text to display : BOOK & PAY NOW

Product #3 to be linked to https://thefolkpath.com/booking-90-min-session

and button text to display: BOOK & PAY NOW

Product #4 and #5 to ONLY have the regular "ADD TO CART" button.

Ideally, if all buttons looked the same, that would be great!

Here are the codes I have used. Please bear with me as I am only a beginner at CSS... I know what I've added potentially doesn't make sense for what I want.

THANK YOU FOR YOUR HELP! password: g

HEADER INJECTION:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   <script>
   $(function() {
     $("<a class='checkoutbutton' href='https://thefolkpath.com/booking-free-session'>BOOK YOUR FIRST SESSION</a>").insertAfter(".sqs-add-to-cart-button-wrapper");        
   });
</script>

CSS:

.tag-no-cart .sqs-add-to-cart-button, .tag-no-cart .product-quantity-input {
  display: none !important;
}
.checkoutbutton {
 font-family: arial;
 font-size: 12px;
 color: #fff;
 font-weight: normal;
 font-style: normal;
 text-align: center;
 width: 250px;
 text-decoration: none;
 padding: 14px 18px;
 background-color: #292929;
  margin: 20px;
}
.checkoutbutton:hover {
 color: #fff;
  background-color: #292929;}

Hi,

You want to replace add to cart with custom button for 3 products only

and 3 products will use different button url

Your problem: find a way to add different button url

is that right?

Exactly!!!!! Yes!!!! 

Edit each product > Additional Info > Add a Button Block, 3 products will have 3 buttons with 3 urls

Then use this code to 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>
jQuery(document).ready(function($){
  $('section.ProductItem-additional .button-block').appendTo('.sqs-add-to-cart-button-wrapper');
})
</script>
<style>
div.product-details.pdp-details div.sqs-add-to-cart-button-wrapper div.sqs-add-to-cart-button {
    display: none !important;
}
div.sqs-add-to-cart-button-wrapper .button-block * {
   opacity: 1 !important;
}
</style>

This didn't work unfortunately. 

Can you share link to a product where you added Button Block?

Of course. 

I removed this code :

.tag-no-cart .sqs-add-to-cart-button, .tag-no-cart .product-quantity-input {
  display: none !important;
}

So that the 3 first products' "ADD TO CART" buttons would reappear and, as intended, be replaced by the button blocks in the description pages by using your code.

This is what it looks like (see picture 1 for the shopping page and picture 2 for the product descriptions).

Here is the link for product #1:

https://thefolkpath.com/shop/p/free-session

I see the code worked, it moved Button Block under Add to Cart. What is problem here?

The problem is this:

The 3 first products must go through different booking/payment links (different links for each of them), so I need different buttons for them, replacing the ADD TO CART button. I would like the buttons replacing the ADD TO CART buttons to be displayed on the SHOP page (and not just on the description pages, like it is right now).

To be clear,

I DON'T want the 3 first products to go through the ADD TO CART payment, so they must be replaced by the new buttons with different URLs ONLY for the 3 first products.

Here's what I want:

On the SHOP page, I want products #1, #2 and #3 to display each different buttons with different URLs.

On the SHOP page, I want products #4 and #5 to display the regular ADD TO CART button.

Please let me know if you need more clarification 🙏
Thank you for your help Tuanphan!

 

You mean add buttons (different url) + remove add to cart on Shop Page https://thefolkpath.com/shop? (for 3 products #1, #2, #3)

& don't add any buttons, and still keep add to cart on detail page (3 products, #1, #2, #3): https://thefolkpath.com/shop/p/free-session?

Can you remove this code first? I can test new code easier

You mean add buttons (different url) + remove add to cart on Shop Page https://thefolkpath.com/shop? (for 3 products #1, #2, #3)

---------- YES (the new buttons can also be displayed on the description pages)

& don't add any buttons, and still keep add to cart on detail page (3 products, #1, #2, #3): https://thefolkpath.com/shop/p/free-session? 

-------------- NO, remove all "ADD TO CART" buttons on SHOP and PRODUCT DESCRIPTION page for products #1, #2, #3 

I have removed the other code (and tag "no-cart" for product #1, #2, #3 👍👍👍

 

I have also updated my website to : https://www.thebraveleap.com/  password : g 

First, with Product Individual Pages, add this code to Code Injection > Footer to replace add to cart button with your button block in Additional Info

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('section.ProductItem-additional .button-block').appendTo('.sqs-add-to-cart-button-wrapper');
})
</script>
<style>
body.view-item div.product-details.pdp-details div.sqs-add-to-cart-button-wrapper div.sqs-add-to-cart-button {
    display: none !important;
}
body.view-item div.sqs-add-to-cart-button-wrapper .button-block * {
   opacity: 1 !important;
}
</style>

Next, with Product Shop/List Page, to replace Add to Cart with Custom Button, use this code

<script>
  jQuery(document).ready(function($){
  $('<a href="https://google.com" target="_blank" class="tp-custom-button">Free button</a>').appendTo('div#thumb-free-session .sqs-add-to-cart-button-wrapper');
     $('<a href="https://ebay.com" target="_blank" class="tp-custom-button">1 hour button</a>').appendTo('div#thumb-free-session-3wp35 .sqs-add-to-cart-button-wrapper');
     $('<a href="https://amazon.com" target="_blank" class="tp-custom-button">1.5 hour button</a>').appendTo('div#thumb-free-session-3wp35-nwwyz .sqs-add-to-cart-button-wrapper');
})
</script>
<style>
  body.view-list div.sqs-add-to-cart-button-wrapper div.sqs-add-to-cart-button {
    display: none !important;
}
body.view-list div.sqs-add-to-cart-button-wrapper .button-block * {
   opacity: 1 !important;
}
.tp-custom-button {
    background-color: #000;
    color: white;
    padding: 10px 20px;
    min-width: 200px;
    display: block;
    text-align: center;
    text-transform: uppercase;
}
</style>

Change text/url here

Hello Tuanphan, 
You are a master at your craft!

I am deeply impressed by your skills and feel incredibly grateful for your help. Thank you! There are some modifications I need in order to complete the shop page if you can still offer me your generous help. 🙏

I will no longer be using ANY of the ADD TO CART BUTTONS. The Squarespace payment system doesn't work for what I need, unfortunately, so I have found a workaround that should work, thanks to your fantastic skills!

A) I need to remove ALL ADD TO CART BUTTONS both on the SHOP page and product description page, for every single product (without removing the buttons you've already created).

B) I need buttons just like the ones you created for products #1, #2, & #3 for every product. They are fantastic and exactly what I've been needing!

C) I would like to create more space over and under every buttons on the SHOP page. (See the red arrows in the picture).

THANK YOU! 😇

#1. To remove all add to cart, change this red code

to this code

<style>
div.sqs-add-to-cart-button-wrapper div.sqs-add-to-cart-button {
    display: none !important;
}
div.sqs-add-to-cart-button-wrapper .button-block * {
   opacity: 1 !important;
}
</style>

#2. I see you added 4 products, to add custom button for these products on Shop Page, change this red code

to this new code

<script>
  jQuery(document).ready(function($){
    // free session
  $('<a href="https://www.thebraveleap.com/booking-free-session" target="_blank" class="tp-custom-button">Grab a cup & book your first call</a>').appendTo('div#thumb-free-session .sqs-add-to-cart-button-wrapper');
    // 1 hour session
     $('<a href="https://www.thebraveleap.com/booking-1-hour-session" target="_blank" class="tp-custom-button">Book & pay now</a>').appendTo('div#thumb-free-session-3wp35 .sqs-add-to-cart-button-wrapper');
    // Compassionate Life Design
     $('<a href="https://www.thebraveleap.com/booking-free-session" target="_blank" class="tp-custom-button">Life Design</a>').appendTo('div#thumb-free-session-3wp35-nwwyz-hgc8n .sqs-add-to-cart-button-wrapper');
     // Compassionate Life Design 3000
     $('<a href="https://www.thebraveleap.com/booking-free-session" target="_blank" class="tp-custom-button">Life Design 3000</a>').appendTo('div#thumb-free-session-3wp35-nwwyz-hgc8n-43ka7 .sqs-add-to-cart-button-wrapper');
      // Resilient Self-Development
     $('<a href="https://www.thebraveleap.com/booking-free-session" target="_blank" class="tp-custom-button">Resilient Self-Development</a>').appendTo('div#thumb-free-session-3wp35-nwwyz-hgc8n-dtrmt .sqs-add-to-cart-button-wrapper');
    // Extended Support
     $('<a href="https://www.thebraveleap.com/booking-free-session" target="_blank" class="tp-custom-button">Extended support</a>').appendTo('div#thumb-free-session-3wp35-nwwyz-hgc8n-dtrmt-aclxy .sqs-add-to-cart-button-wrapper');
})
</script>
<style>
div.sqs-add-to-cart-button-wrapper div.sqs-add-to-cart-button {
    display: none !important;
}
div.sqs-add-to-cart-button-wrapper .button-block * {
   opacity: 1 !important;
}
.tp-custom-button {
    background-color: #000;
    color: white;
    padding: 10px 20px;
    min-width: 200px;
    display: block;
    text-align: center;
    text-transform: uppercase;
  margin-top: 10px;
}
  @media screen and (max-width:767px) {
  .tp-custom-button {
    margin-top: 40px !important;
}
  }
</style>

This COMPLETELY fixed my issue.

Now, my shop will be all set up because of you!

Impeccable!👏

Thank you Tuanphan, you are spectacular!

🙏😇