Side by Side Add to Cart and Checkout Button

I am selling services (an event). There are variants which is really just ticket types. I activated the cart because people tend to buy multiple ticket types. However, this results in an add to cart button but not checkout button. There is a cart in the navigation but I know most people will miss that. I'd like a check out button as well. 

I'd like people to be able to Add to Cart as needed and then Checkout. Thanks for your help.

@ManiPi Can you share your site URL for context? 

@Lesum sorry I thought I did. It’s www.paintedpink.net

@ManiPi To display the "Add to Cart" and "Checkout" buttons side by side, you can add this code by navigating to Website > Pages > Website Tools > Code Injection > Header.

<script>
 document.addEventListener("DOMContentLoaded", function() {
    const addToCartButtonWrapper = document.querySelector('.sqs-add-to-cart-button-wrapper');

    if (addToCartButtonWrapper) {
        const checkoutButtonContainer = document.createElement('div');
        checkoutButtonContainer.className = 'checkout-button-container';

        const checkoutButton = document.createElement('a');
        checkoutButton.href = 'https://www.paintedpink.net/cart';
        checkoutButton.className = 'sqs-button-element--primary checkout-button';
        checkoutButton.textContent = 'Checkout Now';

        checkoutButtonContainer.appendChild(checkoutButton);
        addToCartButtonWrapper.appendChild(checkoutButtonContainer);
    }
}); 
</script>

<style>
.checkout-button-container {
    display: inline-flex;
}

#pdp .sqs-add-to-cart-button-wrapper::before {
	display: none !important;
}

#pdp .sqs-add-to-cart-button-wrapper {
    display: flex !important;
    justify-content: flex-start;
    gap: 15px;
    flex-direction: row;
    flex-wrap: wrap;
	margin-top: 15px !important;
}

#pdp a.sqs-button-element--primary.checkout-button {
    line-height: 1.25rem !important;
}

@media screen and (max-width: 767px) {
	#pdp .sqs-add-to-cart-button-wrapper {
		flex-direction: column;
		flex-wrap: nowrap;
	}
}
</style>  

@Lesum could you please develop code to get this same functionality to work on this website? 
https://www.cityrhythmfragrance.com/shop thank you, I cant get it to work even after changing the url from the code you have above

@Neightt I adjusted the code a little bit for your site. You can add the following code in Website > Pages > Website Tools > Code Injection > Header

<script>
 document.addEventListener("DOMContentLoaded", function() {
    const addToCartButtonWrapper = document.querySelector('.sqs-add-to-cart-button-wrapper');

    if (addToCartButtonWrapper) {
        const checkoutButtonContainer = document.createElement('div');
        checkoutButtonContainer.className = 'checkout-button-container';

        const checkoutButton = document.createElement('a');
        checkoutButton.href = 'https://www.cityrhythmfragrance.com/cart';
        checkoutButton.className = 'sqs-button-element--primary checkout-button';
        checkoutButton.textContent = 'Checkout Now';

        checkoutButtonContainer.appendChild(checkoutButton);
        addToCartButtonWrapper.appendChild(checkoutButtonContainer);
    }
}); 
</script>

<style>
#pdp .sqs-add-to-cart-button-wrapper {
    display: flex !important;
    justify-content: flex-start;
    gap: 15px;
    flex-direction: row;
    flex-wrap: nowrap;
}

.checkout-button-container {
    display: flex;
}

#pdp .sqs-add-to-cart-button, #pdp .checkout-button-container {
    width: 50% !important;
}

#pdp a.sqs-button-element--primary.checkout-button {
    width: 100% !important;
}

@media screen and (max-width: 1024px) {
	#pdp .sqs-add-to-cart-button-wrapper {
		flex-direction: column;
		flex-wrap: nowrap;
	}
    #pdp .sqs-add-to-cart-button, #pdp .checkout-button-container {
        width: 100% !important;
    }
}
</style>