Jump to content

Redirect to Cart After Submitting Custom Product Form

Recommended Posts

Site URL: https://www.theenrichededucator.com/summer-intensive

Hello, I have made my own page for a product (service) that I am offering: https://www.theenrichededucator.com/summer-intensive

In the programming section, I've added a product block so that the client can register there instead of going to the original product page. The product block only has the price and register button shown -everything else is hidden via CSS or the native settings.

Product Block Register Button

Once clicking the "register" button my Custom Product Form pops up to gather registration details. I would like help with figuring out how to redirect the customer to the cart or to the checkout page after completing the Custom Product form and pressing "Register" at the bottom.

Form Register Button

I do not want to enable "express checkout" because it would be applied site-wide and I do not want this applied to other products I sell on my site. Is this possible to do with a script or some CSS?

Quote

 

If the above cannot be achieved, I've been exploring another Script/CSS option that would suffice if I could figure out how to target and differentiate between the "product block register button" and the "custom form register [submit form] button".  

Right now I am trying to use this code to replace the "product block register button" with a "checkout" button once the user clicks the "custom form register [submit form] button". Right now it doesn't work. It only works if the selectors are all .sqs-add-to-cart-button

<!-- after add to cart show go to cart-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $(".lightbox-inner input.button.sqs-system-button.sqs-editable-button").one("click", function(){
    $("<a class='checkoutbutton' href='/commerce/show-cart'>CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button");
});
  });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".lightbox-inner input.button.sqs-system-button.sqs-editable-button").click(function(){
    $(".sqs-add-to-cart-button").hide();
  });
});
</script>

<style>
/*checkout button that appears below add to cart when you click on it*/ 
.checkoutbutton {
  display:block;
  font-size: 14px;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:#990000;
  font-weight: 700;
  font-style: normal;
  line-height: normal;
  opacity:1;
  text-align: center;
  width: auto;
  height: auto;
  text-decoration: none;
  padding: 5px 20px;
  background-color: white;
  transition: .1s opacity linear;
  cursor: pointer;
  border-color: #990000;
  border-width:2px;
  border-style:solid;
  margin-top:10px;} 
.checkoutbutton:hover {color: #fff; background-color: #990000;}
</style>

 

 

Link to comment
  • Replies 0
  • Views 162
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.