EnrichedEducator Posted April 25, 2022 Share Posted April 25, 2022 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. 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. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment