Center Buy button

Hi,

You can align button with custom CSS snippet.

Can you please provide me your website link on which you have added the button so I can check and provide you custom CSS snippet.

Hi Pratick,
The website is:

https://gatheringdreams.com but the page isn’t live yet because I am still working on it.
I was hoping I could get it to look right before publishing it?
If you need the actual page before you can give me the CSS code let me know and I will send you a link as soon as everything else is ready!

Also, is there a way to make the button a custom color? At the moment no matter what color I pick, it keeps the color of my blog them.

Thanks so much!
Sara

Hi,

Thanks for the website link. Can you please give me the actual webpage link on which you have added the button? so it will be easy for me.

Hi Pratik,

I published the page here:
https://gatheringdreams.com/meal-planning-printables-offer/

Can you please let me know what CSS I need to use to:

– center the buttons
– make the buttons this color #eafbff and this color when you hover over them #f9f9f9

Thank you so much!
Sara

Hello,
I’ve just noticed that I can only see the buttons when I am logged in wordpress.

I added the code: [purchase_link id=”6336″ text=”Buy it now!” style=”button” color=”white”]

In several places on the page but I cannot see the buttons when logged out of wordpress?

Sorry, I can see the buttons now!

Please let me know how to style them thanks ??

Hi @satrez ,

Thanks for the details.

Please use below CSS snippet, This is for particular provided page.

.page-id-6296 .edd_purchase_6336 .edd_purchase_submit_wrapper{text-align: center;}
.page-id-6296 .edd_purchase_6336 .edd_purchase_submit_wrapper .edd-add-to-cart{background-color:#eafbff;}
.page-id-6296 .edd_purchase_6336 .edd_purchase_submit_wrapper .edd-add-to-cart:hover{background-color:#f9f9f9; color: #424243;}

You can put this CSS to WordPress Customizer > CSS section OR you can put it in your theme style file also. Please try this and update me for the same.

Thank you Pratik!
That seems to work perfectly!

– How can I change the text color of the button, for example, if I wanted the text to be white? And make the text bold?

– How do I apply these changes to any other page that contains buttons? This is not the only page I will need to create for this product and/or other products?

Thanks again!
Sara

I actually managed to solve point 1.

I just need to know:

– How do I apply these changes to any other page that contains buttons? This is not the only page I will need to create for this product and/or other products?

Thanks again!
Sara

Hi,

Please replace your old CSS with new one so it will be applied to all places.

I have added color style in this also. As you can see red and blue. You can change this to your desired color.

.edd_download_purchase_form .edd_purchase_submit_wrapper{text-align: center;}
.edd_download_purchase_form .edd_purchase_submit_wrapper .edd-add-to-cart{background-color:#eafbff; color:red;}
.edd_download_purchase_form .edd_purchase_submit_wrapper .edd-add-to-cart:hover{background-color:#f9f9f9; color:blue;}

Thanks!
Will this be applied to all products?

Hi,

Yes, It will work for all products button.

Thank you.
If I wanted to change buttons depending on the product, what code should I use?
Thanks again!

Hi,

For particular download you can use below CSS snippet

.edd_purchase_6336 .edd_purchase_submit_wrapper{text-align: center;}
.edd_purchase_6336 .edd_purchase_submit_wrapper .edd-add-to-cart{background-color:#eafbff; color:red;}
.edd_purchase_6336 .edd_purchase_submit_wrapper .edd-add-to-cart:hover{background-color:#f9f9f9; color:blue;}

Where 6336 is the download id.

Perfect! Thank you for all your help!