Replacing Add to Cart Button with Donation Button on a Single Product

Hello there,

I am wondering if anyone has discovered a way to replace the add to cart button on a single product with a donation button. This weekend I am going to begin teaching an online group voice class completely by donation. I want to use my product page to do this, but would like people to be able to contribute whatever they want when they take the class...

Page link is: https://www.worldisonfire.com/services/resonant-you-the-golden-wave-group-voice-class

My goal for this page is:

1. Hide the price at the top of the page
2. Hide the Add to Cart button
3. Hide the quantity field
4. Add a donation button in the exact place the Add to Cart button currently resides.

Is there a CSS wizard artist out there who can figure out how to solve this?

Thank you in advance,

-Juice

Hi,

Click "Donate" button > It will?

+ If click on it, redirect to new line, you can add a Button Block on Additional Info, then we can give code to move it to current Add to Cart Button

To remove price, add to cart, quantity, add this to Design > Custom CSS

/* hide price add to cart quantity */
.product-quantity-input, .sqs-add-to-cart-button-wrapper, .product-price {
    display: none !important;
}

+ If click on donate button, open donate popup, you can add a Donate Block on Additional Info, we can give code to hide some info, then move Donate button to current Add to Cart Button