Redirect add to cart button

Once someone has clicked the add to cart button (and the item has gone to their cart). How do I automatically redirect them to another page within the site?

I thought maybe changing the ecommerce site to allow express checkout - so once they click purchase it redirects them to the checkout page - but instead would redirect to another page within the site.

Ex. They want to purchase a blanket within the shop. They select how many they need and then select "purchase". Once they click "purchase" they are then directed to a new page allowing them to purchase monogramming for that blanket.

Thanks ahead of time!

Thank you so much for helping @AndreaDev !!!

I tried everything I don't think it is working :( I have attached the site coding - which has the same names as the ones your listed above.I added it as a code within the additional information section and nothing happened. Any ideas?

@trekyourmarket If you provide a link to your live or trial site, I'd be able to help you. I need to look for more details of the code in the collapsed elements. Thanks.

@AndreaDev the site is http://www.foutacolors.com/shop-traditional-foutas or any of the products within the shop.THANK YOUUU!

@trekyourmarket Please see my updated reply in the original answer. My apologies. I forgot that a required script already part of my testing environment.

YAY! IT WORKED!One last question... is there way to have the item added to the cart first then direct to a different page? I may be asking too much :/-A.

@trekyourmarket Yikes, that's no good that it's not adding to cart. Let me look at the test environment and I'll get back to you.

@trekyourmarket Please see the now revised original answers.

Great thank you!

Hi – great to see some information on this. My issue is similar but hopefully slightly simpler! Can anyone help? I am offering a service so don't need to 'add to cart' – instead I wish to repurpose the add to cart button to 'enquire' which can link to a form at the bottom of the same product page.

You can see this here: https://www.stonepaperscissors.co.uk/game-themes/the-blitz

Any thoughts?Thanks in advance!

This is exactly what I need to force the selection of an add-on item.Is the code type "Javascript"? I added the numbers in front of each line in the code editor. The code is now visible on the product page and Add to Cart is not redirecting. Any insight? I'm using Brine template. Thanks.

Hello everyone! I have a semi-similar question. I only have 1 subscription product and I want the link in my top banner "Subscribe Now" to redirect them to express checkout. I would prefer to use the banner instead of the product block. 

Same kind of issue here.

I found a solution, but unfortunately it seems to be effecting site wide instead of per individual product. It's a very old post, so I wont bother the original poster. It was designed to be specific, but I can't get it to work and don't understand javascript.

Even after changing and using the IDs, I still get site wide results. Maybe if together we can tweak this, then it might be a solution some of us are after?

Credit to @sshaw

Quote

This code will change the link on the button to a location and title of your choosing. You can set up a page, add a form to collect email, name, etc. then add a link to the download in the thank you message of the form. To use the code below, change dii and replacewith to meet your needs. To find dii, view the source code of the product page that you want to offer for free. Find the data-item-id tag for the add to cart button.

e.g. change var dii = '524b3f23e4b030f838022bbc'; to var dii = 'my-data-item-id'; where my-data-item-id is the id you copied from the source code.

Copy and paste the code to Config / Code Injection - Footer

<script type="text/javascript">
   function ReplaceContentInContainer(dii,content) {
       var matchClass = "sqs-add-to-cart-button";
       var elems = document.getElementsByTagName('*');
       for (i in elems) {
           if((" "+elems[i].className+" ").indexOf(" "+matchClass+" ") > -1) {

             //console.log(elems[i].getAttribute('data-item-id'))
               var di = elems[i].getAttribute('data-item-id');
               if(di = dii) {
                   elems[i].setAttribute('data-form','');
                   elems[i].innerHTML = content;
               }
           }
       }
   }
   window.onload = function () {
       var dii = '524b3f23e4b030f838022bbc';
     var replacewith = '<div class="sqs-add-to-cart-button-inner"> <a style="color: #fff" href="http://www.google.com">Free Download</a></div>';
       ReplaceContentInContainer(dii,replacewith);
   }

</script>

On 6/21/2017 at 10:06 PM, andreab said:

@trekyourmarket Here is a more elegant solution that will not interfere with putting items into the Cart:You can run a script that will, after they click "Add to Cart", reveal a gallery of Add-Ons related to that product, that they can then click on and purchase. You can see an example here:https://amazing-andrea-533j.squarespace.com/shop/(When you reach the site, just click the [Visitor Access] button and follow the instructions. Note that when you arrive in the shop there are 4 items. Only 2 items are "Add-Ons". Click on the "Digital Rescue" product. Then click "Add to Cart". The Gallery featuring the two Add-Ons is now revealed. )

To create this:

A) Put all of the "Add-Ons" for an item in the same Category. For example, if you have Monograms for Blankets and Custom Packaging for Blankets (I'm making stuff up here!) put them both in the Category "Addon-Blanket".B) In the "main product" under "Additional Info" add a Summary Block (I used Carousel) and point it to the Shop, and Filter by the "Category" designed for this product's Add-Ons.C) Below that Summary Block, add a Code Block that has this code:

 <script>
$(function() {
  var $button = $('.sqs-add-to-cart-button');
  $button.on('click', function(){
     $('div.sqs-block.summary-v2-block.sqs-block-summary-v2').appendTo('.Share-buttons');
     $('div.sqs-block.summary-v2-block.sqs-block-summary-v2').css("display", "block");
  });
});
</script>

 

 

In the Shop's Page Settings, under Advanced, add this code to the Page Header Code Injection:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.sqs-block.summary-v2-block.sqs-block-summary-v2 {
display: none;
 }
</style>

 

 

IMPORTANT, Under Settings > Commerce > Checkout make sure that "Enable Express Checkout" is NOT ENABLED or this won't work.

NOTE: The Classes .sqs-add-to-cart-button and .sqs-add-to-cart-button-inner are how the script targets the "Add to Cart" button. There's a chance that the template you're using uses different Classes, but without a link to your site, I was unable to confirm that.

Good luck!

Is this possible to do with a button rather than a summary. If so how would you do this. I am assuming you would replace the code for the summary with the code for the button but what would that code for the button be?

On 6/21/2017 at 10:06 PM, andreab said:

@trekyourmarket Here is a more elegant solution that will not interfere with putting items into the Cart:You can run a script that will, after they click "Add to Cart", reveal a gallery of Add-Ons related to that product, that they can then click on and purchase. You can see an example here:https://amazing-andrea-533j.squarespace.com/shop/(When you reach the site, just click the [Visitor Access] button and follow the instructions. Note that when you arrive in the shop there are 4 items. Only 2 items are "Add-Ons". Click on the "Digital Rescue" product. Then click "Add to Cart". The Gallery featuring the two Add-Ons is now revealed. )

To create this:

A) Put all of the "Add-Ons" for an item in the same Category. For example, if you have Monograms for Blankets and Custom Packaging for Blankets (I'm making stuff up here!) put them both in the Category "Addon-Blanket".B) In the "main product" under "Additional Info" add a Summary Block (I used Carousel) and point it to the Shop, and Filter by the "Category" designed for this product's Add-Ons.C) Below that Summary Block, add a Code Block that has this code:

 <script>
$(function() {
  var $button = $('.sqs-add-to-cart-button');
  $button.on('click', function(){
     $('div.sqs-block.summary-v2-block.sqs-block-summary-v2').appendTo('.Share-buttons');
     $('div.sqs-block.summary-v2-block.sqs-block-summary-v2').css("display", "block");
  });
});
</script>

 

 

In the Shop's Page Settings, under Advanced, add this code to the Page Header Code Injection:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.sqs-block.summary-v2-block.sqs-block-summary-v2 {
display: none;
 }
</style>

 

 

IMPORTANT, Under Settings > Commerce > Checkout make sure that "Enable Express Checkout" is NOT ENABLED or this won't work.

NOTE: The Classes .sqs-add-to-cart-button and .sqs-add-to-cart-button-inner are how the script targets the "Add to Cart" button. There's a chance that the template you're using uses different Classes, but without a link to your site, I was unable to confirm that.

Good luck!

Or is there a way to do this how he originally asked because that would better suit my specific needs.

29 minutes ago, Mmarkie said:

Or is there a way to do this how he originally asked because that would better suit my specific needs.

I think it could be done. We'd need a little more info on how you want this to work.

Could you describe some products on your website that you would like to redirect and where they need to redirect to? A simple text table of urls would help with one column the product url and the second column where the product should redirect to after being added. Two or three examples should be enough for us to examine the issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

I have an issue close to the above but different. My website has two stores. Store A (https://www.wanasambo.com/shop-ng) is a store that was created on Ecwid and embedded on a page on squarespace. Store B (wanasambo.com/shop/all-garments) is the default squarespace store. 

When someone is on Store A. He sees 2 add to cart icons. One at the navigation bar which is from store B, and the other one is just before the footer, which is for store A. 

Customers could get confused and click on the wrong add to cart icon when shopping on store A. 

Is there a way to either hide store B's add to cart icon showing on the navigation menu when someone is shopping on Store A, but when they get to store B, the add to cart icon can be showing. 

Or if that is not possible, can a new cart button be placed somewhere in the product page where it can only be seen by anyone on store B's product page, but it can't appear on other pages or Store A? 

Please note that I have just turned off the cart icon that was showing on the navigation menu and I created a custom add to cart button on the product listing page of store B. But this add to cart button is not showing on the product page. So if someone adds an item to their cart, it automatically redirects them to the checkout page. 

I want customers to add an item to the cart and still stay on the page. And there should be a cart icon or button somewhere where they can click to view their cart. This button should not be placed where it can be seen by anyone on store A. 

14 hours ago, RDDigital said:

My website has two stores. When someone is on Store A. He sees 2 add to cart icons. Customers could get confused and click on the wrong add to cart icon when shopping on store A. 

I don't know why you have two stores with separate carts on separate platforms (your site was password-protected when I tried to view it) but my advice is to only ever have one cart/checkout on your website, otherwise it will be confusing for users, regardless of whether you are using Ecwid or Squarespace for payments.

https://amazing-andrea-533j.squarespace.com/shop/
this website not working anymore can you please  Ms. @andreab Advise THANKS 

Hi, @andreab @creedon @paul2009

I'm looking for a similar solution to OP but slightly different...

I would like to redirect buyers to the cart page once they've clicked "Add to Cart." Right now, the button just changes to "Added." But apparently some people miss this or do not see the cart item number change, and think something has gone wrong. So, I'd like them to be taken to the cart, where their item has been added, and from there have the opportunity to directly check out, or keep shopping. We do have a form that they fill out after clicking "Add to Cart" that we need to keep.

You can see the site / example here: https://www.backcountrymedicalguides.org/wilderness-first-aid-courses/wilderness-first-aid-big-sur

Right now we have express checkout enabled to do this, but then people are unable to buy more than one item.

Any help would be very much appreciated! Thanks!

1 hour ago, backcountrymedicalguides said:

I would like to redirect buyers to the cart page once they've clicked "Add to Cart."

Please see the following.

Let us know how it goes.

Exactly what I was looking for. I searched a bunch, but didn't find that exact thread... Thanks so much @creedon!