Redirect "Add To Cart" Button to Scheduling App

On 10/24/2022 at 7:02 PM, Melbaspence said:

@creedon hey there, I followed this a while back to redirect CTA on product page to external link. 

One extra thing I'm looking to add to design. For all the buttons linking out, I want to add the external link icon (attached) after the copy "Buy it now". Can you advise how to do that? 

Also, it looks like the text is centered right to left, but not top to bottom. Can you tell me how to fix that?

Website is live - https://www.senseofspencer.com/home-decor-edit/p/raja-throw-pillow

Thank you!

 

@creedon checking in to see if I can get some help with this question. Thank you!!

On 10/24/2022 at 4:02 PM, Melbaspence said:

One extra thing I'm looking to add to design. For all the buttons linking out, I want to add the external link icon (attached) after the copy "Buy it now". Can you advise how to do that? 

I have updated my cited code in my October 30, 2020 post adding a class to the atc button so that one can achieve effects that alter the appearance of the atc button based on it being a redirect.

Then add something like the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .twc-spdatcbur .sqs-add-to-cart-button-inner {
  
    align-items : center;
    display : flex;
    gap : 1em;
    justify-content : center;
    
    }
    
  .twc-spdatcbur .sqs-add-to-cart-button-inner::after {
  
    --size : 25px;
    
    content : '';
    background-image : url( [enter image url here replacing aquare brackets] );
    background-repeat : no-repeat;
    background-size : contain;
    display : inline-block;
    height : var( --size );
    width : var( --size );
    
    }
    
  </style>

I don't have an solution for alignment issues.

Let us know how it goes.

Hi there @creedon! What if I only want one Add to Cart button (for a single product) to link externally and the others to remain as normal Add to Cart buttons? Is there a way to do this? I managed to get the one button I want to link to the external URL but now the other Add to Cart buttons are directing to the 404 page. The site I'm working on is demostudios.ca and the pw is: demostudios2023

I only want the "Explore the Shop" under Print Shop button to link to the external URL and the others to remain normal.

17 hours ago, lindsayc123 said:

What if I only want one Add to Cart button (for a single product) to link externally and the others to remain as normal Add to Cart buttons? Is there a way to do this?

Yes. Use my official code cited in my October 30, 2020 post.

You've copied code that a member posted of my code. If someone is quoting code you don't know how they may have altered it. It also is a static snapshot of code at that point and may no longer work.

Let us know how it goes.

I managed to get it working using your original code! Thanks so much! 

@creedon

thank you for always posting helpful content!

I am using Brine 7.0 Template and i have followed the steps you have provided in this thread using the following link:
https://github.com/tomsWebConsulting/twcsl/blob/main/Store Product Detail Add to Cart Button Url Redirect/README.md

i set 

• Set bailIfNoSkusInMap to false.

• Set url to a URL.

Everything is working fine but "add to cart" is redirecting to the following:
https://www.website.net/shop/www.website.net/wishlist

instead of www.website.net/wishlist

Can you please tell me what am i doing wrong?

9 hours ago, mcgharios said:

but "add to cart" is redirecting to the following

The url should be the following.

url : '/wishlist',

Let us know how it goes.

1 hour ago, creedon said:

The url should be the following.

url : '/wishlist',

Let us know how it goes.

worked just fine! thank you for your assistance and helpfull content as always!

On 11/2/2022 at 4:58 PM, creedon said:

I have updated my cited code in my October 30, 2020 post adding a class to the atc button so that one can achieve effects that alter the appearance of the atc button based on it being a redirect.

Then add something like the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .twc-spdatcbur .sqs-add-to-cart-button-inner {
  
    align-items : center;
    display : flex;
    gap : 1em;
    justify-content : center;
    
    }
    
  .twc-spdatcbur .sqs-add-to-cart-button-inner::after {
  
    --size : 25px;
    
    content : '';
    background-image : url( [enter image url here replacing aquare brackets] );
    background-repeat : no-repeat;
    background-size : contain;
    display : inline-block;
    height : var( --size );
    width : var( --size );
    
    }
    
  </style>

I don't have an solution for alignment issues.

Let us know how it goes.

I am attempting to implement this update now. The thing is, I have suppressed the CTA button on my product pages. Instead I am creating them using this CSS. 

Could I insert a command here to add the redirect icon to appear at the end of this button?

//Make Link A Button Within My Branding//
.ProductItem-details .ProductItem-details-excerpt a {
  text-decoration: none!important;
  border: solid 1px #3B3C36 !important;
  color: #3B3C36 !important;
  padding: 2.5%;
  background-size: 202% 100%;
  background-color: transparent !important;
  background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, #3B3C36 50%) !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  width: 50%;
  text-align: center;
  font-size: 1.1rem !important;
}
.ProductItem-details .ProductItem-details-excerpt a:hover {
  color: #fff !important;
  background-position: -99% 0% !important;
}

Website: www.senseofspencer.com (here's an example of a product page - https://www.senseofspencer.com/home-decor-edit/p/antique-terracotta-olive-jar) 

Thanks for your help with this. 

Hi there,

I have a a Squarespace store where I just want to show my products online but not let customers put their items directly to the cart. I want that the ''add to cart'' button on each product page to change into something like ''send request'' and that when they click on this button a custom form will pop up and they will be able to send me their requests. I have just been able to remove the ''add to cart'' button but nothing else. Could you please help me out? Thanks!

https://www.casparcollectables.com/shop/p/f30t2uhwm4wply42m7pf8l0n71u6as

here's a product link to my website.

Hi @creedon !

I saw that you helped here a few people with similar issue and wanted to ask help. 

I want to redirect all the buttons on my website (https://www.brothersmotors.ca)  to be to Acuty Scheduling system (https://brothersmotors.as.me/schedule.php), especially the one in the store. I tried to do it be myself, googled the code itself, but I struggle with finding button id and class(if I am correct). 

I would really appreciate your help and thank you in advance!

15 minutes ago, lada said:

I want to redirect all the buttons on my website to be to Acuty Scheduling system

My code won't handle all buttons on your website. It will  handle product detail buttons.

Quote

googled the code itself, but I struggle with finding button id and class(if I am correct).

No need to Google the code it's cited in this thread.

If all buttons are going to one URL then the only settings you need to set are bailIfNoIdsInMap and url. This is explained in the code.

Hi @creedon - I have been trying your "add to cart" > redirect to link (in my case, scheduling) workaround, and I can't figure out how to get it to fire or where I'm going wrong. 

https://harp-chicory-kphm.squarespace.com/

password = password

Would love any help you can provide - thank you!

22 minutes ago, MooseMarketing said:

I have been trying your "add to cart" > redirect to link (in my case, scheduling) workaround, and I can't figure out how to get it to fire.

It appears you've not done step 3 of the paid plan twcsl install steps.

Oh my gosh, thank you! I misread that thinking it only applied to 7.0 - THANK YOU

On 1/9/2024 at 2:35 PM, MooseMarketing said:

I misread that thinking it only applied to 7.0

After rereading it I can see how this could be confusing. The parentheses 7.0 was meant to indicate the previous navigation level was in v7.0 sites level only.

Hello everyone, I am trying to do this exact same thing (excellent looking site and layout btw). Unfortunately I am very inexperienced at css and I am wondering if someone could help me out in achieving this exact checkout/scheduling system. 

9 minutes ago, BradBerry said:

I am very inexperienced at css

CSS is for styling the look of elements.

What  you need to use is JavaScript.

Please see my October 30, 2020 post.

@creedon I'm using some of the code in this thread to have my buttons redirect to Amazon.  I have all of the CSS set up the way I want to match my website buttons - except for the button text color which I'm trying to change to white.

Simple as it seems, I haven't figured out how to change the text color.

Any suggestions? 

URL: artdomain.co

On 3/5/2024 at 2:26 PM, jmerrill said:

except for the button text color which I'm trying to change to white.

Simple as it seems, I haven't figured out how to change the text color.

Try the following CSS.

.ProductItem-details .ProductItem-details-excerpt a span {

  color : var( --siteBackgroundColor ) !important;
  
  }

This is for v7.1.

Let us know how it goes.

@creedon worked great, thanks!

I have updated my cited code in my October 30, 2020 post.

From the changes...

• checked for v7.0 Avenue template compatibility