NO BUG: WooCommerce Checkout Bugs

Bugs
1

Browser: Newese Chrome and FF
OS: Win 11
URL: Cart | Chaos Magick Forge [you have to first add a product from the shop]

  1. Looks like there’s no option to style the WooCommerce country dropdowns via GUI? (select and option tags)
  2. Some changes to the select and options tags (wc country dropdown at the checkout) made via CSS work inside the builder, but not on the front end
  3. Thirdly, the most important issues, Bricks & WC generate light-gray payment buttons with light-gray text, and no option to change it. This is not compliant with the accessibility guidelines (legal requirement) + is basically unreadable, the users have no idea what the button does. Screenshot attached below.

wc payments
wc payments715×896 98.6 KB

2

Hi Daniel,
Thanks so much for your report!

  1. A missing feature is never to be considered a bug, but a feature request/improvement like this: https://bricksbuilder.io/ideas/?search=select#13326
  2. What are the changes specifically? It is possible that the selectors in the builder are slightly different. Compare them with the front end and adjust them if necessary.
  3. Neither Bricks nor WC generates these styles – it’s Stripe:

image
image1920×1173 167 KB

Best regards,
timmse

3
  1. If the interface is intended to change the styling of a specific section, and it doesn’t do its job, I would argue it is a bug. Other fields change, this one does not.
  2. Styling, that is text color and background color of the fields. They worked fine on the front end when I changed them with CSS, but not on the back end. AI told me that apparently WC uses JS libraries that append the code when rendered on the front end.
  3. For some reason “outdated and limited” themes & plugins are able to style WC checkout payment buttons. Please take a look at another screenshot, this is from another site of mine ( primexaos.com ) using Impreza Theme and WP Bakery. If this issue is not addressed, it simply means that Bricks is not yet ready WooCommerce as gray payment buttons with gray text on it are unreadable, which is both illegal in terms of consumer protection and accessibility. This means that I am unable to use Bricks builder to build client sites or even publish my own shop because apart from making the website unusable for our customers, we also risking getting fined by the government. I seriously doubt Stripe would make such a big mistake, I am more keen on thinking that their plugin pulls the text color from the theme settings or something, and if that’s the case, there is something that could be done to push a different text color to WC, so Stripe does not using a very bright text color on very bright backgrounds.

I will try contacting Stripe about it as well.

wccheckout
wccheckout641×926 36.1 KB

4
  1. :point_right: Idea board – Bricks :point_left:
  2. That’s right. WooCommerce uses the select2 library on the front end, which is not a bug.
  3. Please take a look at the WooCommerce/Stripe documentation: How can I change the style of the payment form? Documentation - WooCommerce.

For example, if you add the following snippet to your child theme’s functions.php (or a code snippet plugin), you can change the text color. This is certainly not easy, but it seems to be the way to do it:

add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
	$stripe_params['appearance'] = (object) [
		'variables' => (object) [
			'colorTextPlaceholder' => '#0099cc',
		],
	];
	return $stripe_params;
} );
1 Like
5

Thank you. I should be able to deal with this using the provided snippet and WP Code Box.