[akanekodani]

Hello, I am using BBQ theme and woocommerce plugin to make the shopping site.
In a checkout page, I cannot click radio buttons and I found out this was a theme conflict. If I use other themes like twenty thirteen, the check marks work on radio buttons normally. Please see this test wp site for your reference.
http://akanekodani.com/test/checkout/

Please let me know how to fix this radio button conflict.
Thank you.

[Juanfra Aldasoro]

Hi,

Thanks for writing. Unfortunately whenever you send a link to a checkout page, it’s almost impossible to view the page as you do, because the cart items are stored in your session.

However, I understand what you mean. Please, open the file /bbq/style.css and look for the following code:

input[type="checkbox"] { -moz-appearance: checkbox; -webkit-appearance: checkbox; }

If you remove that code, then the problem should be fixed.

Best,
Juan

[akanekodani]

Thanks Juan for the reply.
Actually the input code wasn’t in the custom.css (I tweaked the original style.css) and put that code back. Now some of the radio buttons are back. But not all.
If you can take a look at the shop page and add any of the test products into the cart and go to the checkout page, you will see the radio button issue happening in Paypal option at the bottom of the page.
http://patisserietomoko.com/shop/
Please let me know if there is any other way to fix the theme conflict.

Thank you so much!

[Juanfra Aldasoro]

Hi,

The input code shouldn’t be in the custom.css file nor in the styles.css file if you want to solve the problem with the checkboxes.

Please go and look over the style.css file for the following line:

input, textarea, select { -moz-appearance: none; -webkit-appearance: none; }

and remove it or comment it.

Best,
Juan.

[akanekodani]

I found the code and got fixed the radio button issue.
Thank you so much!

[Juanfra Aldasoro]

No problem 🙂

Best,
Juan.

[akanekodani]

Hi Juan
I found one new issue after fixing the radio button issue.
Now the dropdown arrows are double since I updated the style.css to remove the radio button theme conflict. Do you think I can fix the dropdown arrow issue and keep the radio button conflict out?
http://patisserietomoko.com/shop/
(you can see the double arrows in the default sorting dropdown menu)
Please let me know.
Thanks so much!

[Juanfra Aldasoro]

Hi,

Thanks for the follow up.

A CSS line will do the trick, add this to the custom.css file:

select { background-image: none; }

Best,
Juan.

[akanekodani]

Thanks for the reply, Juan.
I added this line into the custom.css file, but it still shows the double arrows.
Please let me know if there is any other ways to fix this issue.

thanks

[Juanfra Aldasoro]

Hello,

I went through your site and your custom.css file is plenty of rules taken from the main stylesheet. It almost seem like a copy paste from the main stylesheet. I still couldn’t find the rule I’ve sent you to avoid having the image background for the select input.

Please re-check, because it is not in the code.

Best,
Juan.

[akanekodani]

Thanks for the reply, Juan.
I put select { background-image: none; } into the custom.css. It’s in “4.Main Content Styles” section in custom.css.
But what you mentioned is that custom.css doesn’t need to repeat the same codes from style.css?
I thought creating a custom.css is making a full css and the machine reads only custom.css to display the page. If the machine reads both style.css and custom.css both, does my custom.css make the conflict more complicated? Please let me know how to fix.

Thank you.

[Juanfra Aldasoro]

Hello,

If I go to your site custom.css file, I can’t find where is that you’ve placed that on the section “4. Main Content”: http://patisserietomoko.com/wp-content/themes/bbq/custom.css

Perhaps you forgot to upload the modified version of the file?

That’s right. The custom.css file should only include the portions of code (classes and IDs) that you would like to modify on your site. As the custom.css is read after style.css then, the styles in custom.css will override the ones in style.css.

There’s no need to copy all the styles from style.css into custom.css, you should only do it with the ones you would like to modify.

Best,
Juan

[akanekodani]

Thanks Juan for the reply.
I cleaned up the custom.css to get rid of redundant css codes. Now the double dropdown arrows issue is clear.
Thanks so much again!

[Juanfra Aldasoro]

No problem 🙂

Have a nice day,
Juan.