[Resolved] Center the woo-buy-option button

[Author]

Posts

[liatG]

My question is similar to https://toolset.com/forums/topic/style-options-for-wpv-woo-buy-options/.

My page is hidden link.
The HTML I have for my layout is

<p style="text-align: center;">Click "Add to Cart" below to check out without PayPal, or click the PayPal button below.<br />
[wpv-woo-buy-options]</p>

However, the "Add to Cart" button is way off to the left, and has quite a bit of padding on the top. It makes the page look weird. I attempted the CSS given in the solution to the ticket above, but couldn't get the button to budge (even after setting margin-left:100px just to test).

Could you give me some CSS to center the red button and move it up some?

Thank you so much!
Liat

[Beda]

Toolset Support cannot provide this kind of Support, like CSS, HTML and JS are required knowledge sets to use it.
We can point to what classes or specific cases of Toolset SHortCodes you would apply CSS; or how to use those ShortCodes, etc.

In this case here, you use the ShortCode [wpv-woo-buy-options] as explained here:
https://toolset.com/documentation/user-guides/views-shortcodes/#vf-154348
It has not a lot of attributes as we just copy the WooCommerce add to cart button.

This outputs a whole bunch of HTML as you can see in the Browser console, coming from WooCommerce.
To remove the top margin, which is not from the button, but it's wrapping cart form and wc-stripe-payment-request-wrapper, you would address those elements.
For example, wc-stripe-payment-request-wrapper has a padding-top: 1.5em added inline.
That you need to remove or overwrite.

However this cannot be manipulated in a Toolset GUI (you can add the CSS there, but you'd need to find and address the classes manually)

[liatG]

My issue is resolved now. Thank you!