Redirect "Add To Cart" Button to Scheduling App

Site URL: https://www.leleandbeane.com

Hello! I run a wedding & portrait photo business and am currently upgrading my 7.0 site to 7.1.

I want to display my services using a Store Page, but changing the "Add To Cart" button to "Reserve Your Date," which would redirect to my Scheduling app either in a pop-up or another page. I managed to get rid of the "Add To Cart" button altogether with CSS and now just have a link for "Reserve Your Date." But I love to look of a button instead. 

Any tips with CSS? =)

what is your product page url, sorry I can't find it

Yes please a link to your product page on your 7.1 site would be best.

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

We can then take a look at your issue.

Here you go!

Password is password 😃

https://leleandbeane27.squarespace.com/packages/p/gn5jev93roc0go71vbzdrg17232k48

Thank you!!

40 minutes ago, white_sarah said:

Here you go!

Password is password 😃

https://leleandbeane27.squarespace.com/packages/p/gn5jev93roc0go71vbzdrg17232k48

Thank you!!

I saw it as button, did you solve it?

Please see Store Product Detail Add to Cart Button Url Redirect.

Let us know how it goes.

You're amazing, thank you!! 

Just FYI guys,

After the above code ended up working out from @creedon (thank you!) - I realized that I needed different booking links for each service. So here's the breakdown of what I ended up doing after lots of research:

GOAL: Redirect Add to Cart link to Acuity Scheduling session link

OUTCOME:

• First, I tagged each product that I wanted to change with "hideorder"
• I hid the Quantity and Add To Cart button with CSS
• Then I made any links in the product description into a button, making it easy for me to redirect to any link of my pleasing! 

EXAMPLE: https://leleandbeane27.squarespace.com/services/p/tennessee-wedding-package (password is password)

//Add "hideorder" tag to any product or service to remove dropdown, quantity, and order button //

//Remove Select Size Dropdown//
article .tag-hideorder .variant-option {
    display: none;
}

//Remove Quantity Dropdown//
article .tag-hideorder .product-quantity-input {
    display: none;
}

//Remove Order Button//
article .tag-hideorder .sqs-add-to-cart-button-wrapper {
    display: none;
}

//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;
  transition: all .4s cubic-bezier(0.75, 0, 0, 1) !important;
  margin-block-start: 1.5rem;
  padding: 1.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: 35%;
  text-align: center;
  font-size: .7rem !important;
}
.ProductItem-details .ProductItem-details-excerpt a:hover {
  color: #fff !important;
  background-position: -99% 0% !important;
}
 

Nicely done! Thank you for sharing!

Can I ask a follow up @creedon and @white_sarah? 

Is there a way to remove the price from showing up on the recommended products section as well? It is hidden elsewhere on our site but it still shows in this section. 

Appreciate the help!

@tealcanvas

Please post the URL for a page with related products so we can take a look at your issue.

On 11/18/2020 at 8:37 PM, creedon said:

@tealcanvas

Please post the URL for a page with related products so we can take a look at your issue.

@creedon take a look at the page https://www.tealcanvas.com/artists/p/christina

(site password is Tealcanvas0202)

Scroll down to the bottom, to the "artists you may like" section. We do not want a price visible but it currently comes up as $0.00, which we want to hide. This functionality shows up on every product page (listed as each artist page in our case). Let me know if there is a way to suppress globally for all recommended products on the site.

Additionally, is there any way to adjust how many recommended products are shown? I was told the max was 5, but I would rather change it to 6, or just 3, so that the page would look more balanced. Thanks!

@TealCanvasArt

2 hours ago, TealCanvasArt said:

Additionally, is there any way to adjust how many recommended products are shown? I was told the max was 5

I think its fixed at five. There is no user control in SS interface of which I'm aware.

Add the following to Store Settings > Advanced > Page Header Code Injection for the Store page.

<style>

  /* begin change recommended products */
  
    /* hide last two */
    
    .ProductItem-relatedProducts .grid-item:nth-last-child( 1 ),
    .ProductItem-relatedProducts .grid-item:nth-last-child( 2 )
    
      {
      
        display: none;
        
        }
        
    /* hide price */
    
    .ProductItem-relatedProducts .product-price {
    
      display: none;
      
      }
      
    /* end change recommended products */
    
  </style>

Let us know how it goes.

That totally worked! It looks so much better now, thank you @creedon 🙂

On 10/30/2020 at 4:03 PM, creedon said:

To redirect to a scheduling page upon clicking the Reserve Your Date button add the following to Store Settings > Advanced > Page Header Code Injection.

<script>

  $( ( ) => {
  
    var url = 'https://www.squarespace.com/';
    
    var $addToCartButton = $( '.sqs-add-to-cart-button' );
    var $addToCartButtonClone = $addToCartButton.clone ( )
    
      .click ( function ( event ) {
      
        window.location = url;
        
        } );
        
    $addToCartButton.replaceWith ( $addToCartButtonClone );
    
    } );
    
  </script>

Let us know how it goes.

I tried adding this to my page because I need a similar setup but it still just adds the button to the cart. I am very new to this. My domain transfer is still in process so the URL is just the temp that is automatically generated by squarespace which requires a password currently to view. I'm not sure exactly what to do for you to be able to view the site.

@TylerJ

Please post the URL to the where you want to achieve this effect.

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

We can then take a look at your issue.

8 hours ago, creedon said:

@TylerJ

Please post the URL to the where you want to achieve this effect.

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

We can then take a look at your issue.

https://circle-hexahedron-azm6.squarespace.com/shop/p/lily-xgc3d
 

password = password

@TylerJ

The issue is that you need to install jQuery.

Add the following to Settings > Advanced > Code Injection > HEADER. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

I didn't mention this step originally as the OP already had jQuery installed. Once you've done this try the code again.

@creedon

That worked perfectly. Thank you very much.

17 minutes ago, TylerJ said:

Is there an easy way to add a comment in the code injection page.

Knowing which commenting syntax to use where is not easy without knowing the exact context of what you want to comment.

Can you show us a pic and describe where you want to comment.

Here are a few quick ones.

<!-- this is an HTML comment and is used with other HTML tags like style and script, not inside them though -->

<!-- now a style tag -->

<style>
  
  /* a css comment makes me see red in the body */
  
  body {
    
    background-color: red;
    
    }
    
  </style>

<!-- now a script tag -->

<script>
  
  /*
  
    most scripts are javascript and this a multi-line
    
    comment using javascript syntax, other languages may have other commenting syntax
    
    */
    
  let body = 'red';
  
  // this is a single line comment, set body to green
  
  body = 'green';
  
  </script>

@creedon@bangank36

I saw above that the OP removed the button and created her own button. Where would I find the data to recreate the original button so it looks the same on my page? I need 1 of my products to link to my contact page rather than scheduling. Or is there a different way of doing this within the script that was already added to my page header code injection page?

As a side note @bangank36,  since this does still seem to relate to this same thing I have removed my other post to prevent cluttering the forum with duplicate information.

17 hours ago, TylerJ said:

@creedon@bangank36

 

I saw above that the OP removed the button and created her own button. Where would I find the data to recreate the original button so it looks the same on my page? I need 1 of my products to link to my contact page rather than scheduling. Or is there a different way of doing this within the script that was already added to my page header code injection page?

 

As a side note @bangank36,  since this does still seem to relate to this same thing I have removed my other post to prevent cluttering the forum with duplicate information.

I have figured out the creating a button part but I can’t seem to get it where I want it. I would like to have it positioned where the current add to cart button is located

@TylerJ

Without the URL to the page it is hard to help.

8 hours ago, creedon said:

@TylerJ

Without the URL to the page it is hard to help.

Here is the URL directly to the product I would like directed to contact instead of to the schedule.

https://www.eventmamasaz.com/shop/p/custom

password = password

@creedon

As an update, I used the OPs CSS that she posted to remove the “Add to cart” button and create a button from a link which placed it where I want it. I managed to get the background color changed and the font color changed. What data do I need to add to make the size and shape of the button the same as the standard add to cart button? I tried adding as much as I could into custom CSS by going to another page and right click then inspect on a button but I could not seem to find what would change the shape and size.

URL that has the button to be changed is http://www.eventmamasaz.com/shop/p/custom

URL with a button I want to duplicate is 

http://Www.eventmamasaz.com/shop/p/birthday