Add a Checkout Button to Individual Product Page

Hey All,

I am looking to add a "Checkout" button to each individual product page right next to the "Add to Cart" button. I was able to find a partial solution here, but the problem this is that the custom CSS does not load until after refreshing the page due to the Ajax functionality. It does not appear that my theme has an option to disable Ajax.

Here is a link to an example product: https://www.fantasiummedia.com/prints/mossy-bridge

Any suggestions? 

@fantasiummedia Wrap CSS in Style tag, then insert to Site Header

The code will be

<style>
 .checkoutbutton {
   font-family: arial;
   font-size: 12px;
   color: #fff;
   font-weight: normal;
   font-style: normal;
   text-align: center;
   width: 250px;
   text-decoration: none;
   padding: 14px 18px;
   background-color: #292929;
 }
 .checkoutbutton:hover {
   color: #fff;
   background-color: #292929;
 }
</style>

@tuanphan thanks for that - the checkout button is there, but still only after I refresh the page. I'm guessing still for the same reason. Any idea on how to get it to bypass the Ajax portion?

@fantasiummedia Try inline CSS, the code will be

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
     <script>
     $(function() {
       $("<a class='checkoutbutton' style='font-family:arial;font-size:12px;color:#fff;font-weight:normal;font-style:normal;text-align:center;width: 250px;text-decoration: none;padding: 14px 18px;background-color: #292929;' href='/link/'>CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button-wrapper");   
     });
 </script>

@tuanphan still no luck. Thank you so much for your help - huge discount code on a print coming your way if you're interested.

Just to confirm, you want me to have the first piece of code ( style - .checkoutbutton) in the Advanced --> Code Injection --> Header field, then use the script in there as well, just at the top? 

@fantasiummedia replace your code (script, style) with code i sent above, in Header. NOT WRAP CODE IN STYLE TAG

@tuanphan same result. Here is what I have in my Header:

CSS Editor:

Result only after refreshing.

@fantasiummedia

You removed all code in CSS Editor & Header

then inserted my code in HEADER

and STILL SAME RESULTS?

@tuanphan that is correct :( 

@jahanggir any ideal?

Hey @tuanphan,

i have inserted this code in the header :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
     <script>
     $(function() {
       $("<a class='checkoutbutton' style='font-family:arial;font-size:12px;color:#fff;font-weight:normal;font-style:normal;text-align:center;width: 150px;text-decoration: none;padding: 14px 18px;background-color: #292929;' href='/scheduling'>Book a date</a>").insertAfter(".sqs-add-to-cart-button-wrapper");   
     });
 </script>

The link works but the button is displayed on top of the product name instead of below the add to cart button.

Do you know how i can solve this problem?

On 7/29/2020 at 10:29 PM, Christine_DTS said:

Hey @tuanphan,

i have inserted this code in the header :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
     <script>
     $(function() {
       $("<a class='checkoutbutton' style='font-family:arial;font-size:12px;color:#fff;font-weight:normal;font-style:normal;text-align:center;width: 150px;text-decoration: none;padding: 14px 18px;background-color: #292929;' href='/scheduling'>Book a date</a>").insertAfter(".sqs-add-to-cart-button-wrapper");   
     });
 </script>

 

The link works but the button is displayed on top of the product name instead of below the add to cart button.

Do you know how i can solve this problem?

Can you share link to product in screenshot? We can check easier.