Payment boxes always active

Resolved alexandreconceicao
(@alexandreconceicao)

3 years, 8 months ago

Hello there,

I have been trying to edit the woocommerce checkout page, but I have found 3 key issues in the process.

First, the payment boxes for the different payment methods appear to be always active no matter which payment method is selected. I’m not sure if this is supposed to happen by default but I think it might be a theme bug (although my theme developer doesn’t help me with that). You can see what I’m talking about in more detail with this print screen: https://ibb.co/6gtycz3

The second issue is regarding the payment box layout. I was able to edit these boxes using CSS, however there is still a small grey triangle at the top which I can’t find a way to remove.

Lastly, I would like to know how I can edit the payment selection icon. By payment selection icon I’m referring to this: https://ibb.co/sy6YVjw

I would really appreciate any help you guys can give me regarding these issues.

Hope to hear from you soon!

The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

Margaret S. woo-hc
(@margaretwporg)

3 years, 8 months ago

Hi @alexandreconceicao

the payment boxes for the different payment methods appear to be always active no matter which payment method is selected

From the screenshot you shared, what you are seeing is normal. All applicable payment methods are listed so that the customer can choose any of those. If you do not wish to show some of the options then you can toggle those OFF at WooCommerce > Settings > Payments.

there is still a small grey triangle at the top which I can’t find a way to remove

Can you please share a screenshot of the payment box so we can understand which grey triangle you are looking to remove? We recommend https://snipboard.io for easily sharing screenshots – please follow the instructions on that page, then paste the URL in this thread.

I would like to know how I can edit the payment selection icon. By payment selection icon I’m referring to this: https://ibb.co/sy6YVjw

The look of this radio button depends on the theme. For example, on Storefront theme, the option buttons look like this:

Link to image: https://snipboard.io/Zmj5QM.jpg

You can also have it programmatically changed with the help of a developer. For help with custom code we recommend the WooCommerce Developer Resources Portal and the WooCommerce Customizations Partners.

We’ll look forward to your response to be able to help you further.

Thread Starter alexandreconceicao
(@alexandreconceicao)

3 years, 8 months ago

First of all, thank you very much for the time spent trying to help me with these issues.

From the screenshot you shared, what you are seeing is normal. All applicable payment methods are listed so that the customer can choose any of those. If you do not wish to show some of the options then you can toggle those OFF at WooCommerce > Settings > Payments.

Maybe I was not clear in my previous message, but the problem here it is not having multiple payment methods available. The problem is that the payment method boxes are always opened even if that specific method is not selected. For example, in the printscreen I sent previously, the payment method selected is “Bank Transfer” and despite that, the credit card fields are still displayed.

Can you please share a screenshot of the payment box so we can understand which grey triangle you are looking to remove?

Sure, in this printscreen you can find the grey triangle I’m talking about marked with a red circle around it.

You can also have it programmatically changed with the help of a developer.

Thank you for the recommendation. I will look for a developer who can help me with that.
Mirko P.
(@rainfallnixfig)

3 years, 8 months ago
Hi @alexandreconceicao,

First of all, thank you very much for the time spent trying to help me with these issues.

You’re welcome! We’re always happy to help here along with other forum contributors.

The problem is that the payment method boxes are always opened even if that specific method is not selected

Thanks for clarifying that. I see that what you report doesn’t occur with Storefront which is a default Woo theme. See screenshot. You may want to contact your theme author to figure out if it’s related to the theme you’re using.

Sure, in this printscreen you can find the grey triangle I’m talking about marked with a red circle around it.

Thanks for the screenshot! Use the CSS below to hide the grey triangle.
```
.woocommerce-checkout #payment div.payment_box::before {
  display: none;
}
```
To add custom CSS code navigate to WordPress Dashboard > Appearance > Customize > Additional CSS and add your CSS to the editor.

I hope this helps!