No checkout fields appear but WooCommerce warns about empty fields

I had to add this to Checkout page CSS to force it to show
.payment_method_s4wc {display:initial !important;}

This should be fixed already.

Ditto. Fields not showing on my client’s site after selecting the credit card payment radio button. jrandomh’s suggestion did not help.

It’s probably a theme issue. Without a link I can’t tell you why it isn’t working in your specific case.

Oh, my bad. Here you go: https://o-marin.com/checkout/

That’s a problem with every gateway on that site because the theme is incompatible with WooCommerce. You should notice that the PayPal description doesn’t hide when it’s deselected even though it should. That theme broke the checkout for WooCommerce by removing the order_review id on that page. Check for an update from the theme developer, or contact them about it. It’s a problem you’ll see with any payment gateway you install.

The Royal Theme is compatible with WooCommerce.

https://themeforest.net/item/royal-multipurpose-wordpress-theme/8611976

If you inspect the element, you’ll notice that your code has <div class=”payment_box payment_method_s4wc” style=”display: none”>

When I change it to “display: inline” in my browser, it renders. What can I do to permanently fix this?

Many thanks!!

You can contact the theme developers.

And since I’m sure you don’t believe me I will walk you through why the code on your site doesn’t work and why I say the theme is incompatible. They can claim whatever they want on their site but I looked at the code and can tell you without a shadow of a doubt that no payment gateway will work on your site with the code as it currently is.

Here’s the click event handler that toggles between payment gateways in the WooCommerce plugin (https://github.com/woothemes/woocommerce/blob/master/assets/js/frontend/checkout.js#L23). Here’s the code that it triggers (https://github.com/woothemes/woocommerce/blob/master/assets/js/frontend/checkout.js#L112-L132). Here’s where it shows the slides down the box to display payment fields (https://github.com/woothemes/woocommerce/blob/master/assets/js/frontend/checkout.js#L120). Here’s the selector it’s looking for (https://github.com/woothemes/woocommerce/blob/master/assets/js/frontend/checkout.js#L15). If you know anything about jQuery, that means it’s looking for an element with an ID of “order_review”. Here’s what happens when I run that same selector on your site (https://imgur.com/q7tD0Hx). Again, that should be showing me an element, but it doesn’t exist. The theme you have is incompatible with WooCommerce.

Here’s what a compatible theme looks like (https://demo2.woothemes.com/storefront/checkout/). Notice how when you switch between payment gateways the payment description/fields slide in and out? Your site doesn’t do that because of the theme.

Contact the theme developers and tell them that the order review div needs an id of order_review. If you’re using a current version of the theme then you should probably get a refund because they don’t know what they’re doing, but then again, neither do you.

Hey there Stephen Zuniga! your a bit overconfident as Ive documented this error in a lot of themes. It isn’t working, luckily people can just plug in this little bit of css (that some silly developer seems to have failed to use) into a overwrite file and it works great!

CSS::

div.payment_box_payment_method_stripe div.stripe_new_card {
display: block!important;
}

now if only someone would put that in somewhere…you know…useful

??