Checkout payment methods styles broken by gp-premium

[Adam]

Hi,

In the checkout payment method section couple of styles provided by gp-premium/woocommerce/functions/css/woocommerce.css, break the design, as show on the screenshots.

The styles that’s break the UI are:

#payment .payment_methods li.wc_payment_method>input[type=radio]:first-child {
	clip: rect(1px,1px,1px,1px);
    position: absolute!important;
}

#payment .payment_methods li.wc_payment_method>input[type=radio]:first-child:checked+label {
	font-weight: bold;
    background-color: rgba(0,0,0,0.07);
}

#payment .payment_methods>.wc_payment_method>label {
    padding: 20px;
    background-color: rgba(0,0,0,0.04);
    display: block;
}

.woocommerce-checkout #payment ul.payment_methods li img {
	float: right;	
}

We really don’t see the point why these styles are there, we had to override them to fix checkout view. Can you please remove them from the following release?

[Leo]

Hi there,

We’ve got lots of WooCommerce users and have not encountered this problem before.

Can you link us to the page in question with all plugins disabled except GP Premium and WooCommerce?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Adam]

I don’t know about other users, maybe they didn’t notice that something is wrong in the checkout page, we did.

I can’t provide link to the page because we have only production and staging online, which we use on ongoing basis and these issues are fixed there already. We can’t rollback our staging and leave stagnant only as proof of the problem purpose.

I did the test, again as you said, on local vagrant woocommerce instance, disabled all the plugins except gp-premium. Results are the same, as described and provided on screenshots above. Winning styles, that modify checkout are defined in the plugin in the file mentioned. It took me less than 5 minutes to set it up localy.

[Leo]

I tested with 3 of our WooCommerce sites in the library and don’t believe I’m seeing the issue:
http://gpsites.co/seller/
http://gpsites.co/prime/
http://gpsites.co/niche/

Are you seeing the issues in those sites?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Adam]

To reproduce it you have to have payment method available, because this is related to payment method block. In my example I had Stripe active.

[Leo]

Ok I just started this test site and imported Seller:
https://wordpress-202309-991531.cloudwaysapps.com/

and activated all the default payment methods:
https://www.screencast.com/t/1TF3gYfglI

But still don’t think I’m seeing the issue though:
https://www.screencast.com/t/Zfnkiim01
https://www.screencast.com/t/Mz9hNobHsjY6

Can you test it out and let me know if I’m missing something?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Adam]

Hi Leo,

thanks. In my instance there is just black spot in place of checked checkbox, as shown on my screenshots. I see on your screen it looks a bit different. Probably some child theme setting make it look bad. I will dig it bit deeper.

[Leo]

Sounds good 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts