Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Redirect "Add To Cart" Button to Scheduling App


Recommended Posts

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? =)

Screen Shot 2020-10-29 at 8.51.39 PM.png

Link to comment

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
40 minutes ago, white_sarah said:

I saw it as button, did you solve it?

image.png.39ec112ec408a88fc051731b02c12879.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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;
}
 

Link to comment
  • 2 weeks later...
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!

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1 month later...
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.

Link to comment
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

Edited by TylerJ
Making url a link rather than plain text.
Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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>

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@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.

Link to comment
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

Link to comment

@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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...