WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#40435 closed defect (bug) (wontfix)

Twenty Seventeen: WooCommerce checkout details not readable in Dark color scheme

Reported by: madeincosmos Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.7
Component: Bundled Theme Keywords: has-patch has-screenshots
Focuses: ui Cc:
PR Number:

Description

With the Dark color scheme enabled some WooCommerce elements render with white text on white background. So far I've noticed:

Payment method details at checkout:

http://cld.wthms.co/wwk2+
Screenshot: http://cld.wthms.co/wwk2

Bookable product cost:

http://cld.wthms.co/e5gK+
Screenshot: http://cld.wthms.co/e5gK

Steps to reproduce:

  1. Enable Dark color scheme on any WooCommerce site,
  2. Add a product to cart and proceed to checkout,
  3. Observe how payment method descriptions show in white on white.

All CSS code for the payment method description colors come from the theme code (twentyseventeen.css sets background color, colors-dark.css sets font color).

Attachments (4)

40435.patch (355 bytes) - added by mp518 3 years ago.
Added new css in \css\colors-dark.css
40435 Screen Shot.png (12.9 KB) - added by mp518 3 years ago.
after added css screenshot
40435.2.patch (368 bytes) - added by mp518 3 years ago.
updated
40435.3.diff (435 bytes) - added by lukecavanagh 3 years ago.
Patch Update

Download all attachments as: .zip

Change History (11)

#1 @sami.keijonen
3 years ago

Thanks @madeincosmos for ticket! Do you happen to have live demo site for this so I can quickly take a look? I'm not that familiar with Woocommerce.

#2 @mp518
3 years ago

  • Keywords has-patch has-screenshots added

yes @madeincosmos you are right WooCommerce payment_box payment_method_cod class css backgraound is white and Twenty Seventeen \css\colors-dark.css not added any kind ok this class css so this text is not show in white background.

I have added patch in this patch one new css class added and background is added black so text should be show in when user working on dark screen.

Reagrd,
Mahesh

@mp518
3 years ago

Added new css in \css\colors-dark.css

@mp518
3 years ago

after added css screenshot

#3 @sami.keijonen
3 years ago

Thanks @mp518 for patch. If I understand this correctly, this is for overwriting Woocommerce base styles?

I'm pretty sure we don't add support for plugins (like Woocommerce) but this would be great solution for @madeincosmos. The CSS snippet can be added via child theme style.css or via the Customizer Custom CSS.

#4 @mp518
3 years ago

Hello @sami.keijonen,

Thanks for review patch and this is only for apply when Color Scheme is dark other wise not apply this style.as per my side this way is better not in style.css:)

Yes you are right regarding support for plugins.

Last edited 3 years ago by mp518 (previous) (diff)

#5 @sami.keijonen
3 years ago

There is colors-dark body class so custom CSS would look like this in child theme.

.colors-dark .wc_payment_method .payment_box { 
   background: #333; 
}

Anyways this is just my personal opinion about not adding support for plugins out there:)

#6 @mp518
3 years ago

Yes right i have updated patch.

@mp518
3 years ago

updated

@lukecavanagh
3 years ago

Patch Update

#7 @swissspidy
3 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed
  • Version changed from trunk to 4.7

Thanks for your report, but such third-party compatibility fixes should be made by the third-parties, not by the default theme. We do not have such compatibility styles in Twenty Seventeen and shouldn't start adding them IMHO.

WooCommerce has a special stylesheet for Twenty Seventeen, see https://github.com/woocommerce/woocommerce/blob/124f41a2b747f0d59e740140688b7498736c1575/assets/css/twenty-seventeen.scss

You should report this in an issue on their GitHub repository and submit a PR for it.

Note: See TracTickets for help on using tickets.