Add a Checkout Button to Individual Product Page

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