Fix Filter by Price slider color to use current in RTL languages instead of hardcoded purple #57687

amitraj2203 · 2025-05-02T10:42:07Z

Submission Review Guidelines:

I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
I have checked to ensure there aren't other open Pull Requests for the same update/change.
I have reviewed my code for security best practices.
Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

This PR fixes an issue where the Filter by Price Controls block's slider color is hardcoded to purple in RTL languages, instead of inheriting the current font color as it does in LTR languages.

Closes #54148

Screenshots or screen recordings:

Before	After

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Create a page and add the Product Collection blocks.
Switch to Code editor mode.

Copy and paste the following code to add the Filter by Price Controls block, then return to Visual editor mode.

Filter by Price Controls Block

<!-- wp:woocommerce/filter-wrapper {"filterType":"price-filter","heading":"Filter by price"} -->
<div class="wp-block-woocommerce-filter-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Filter by price</h3>
<!-- /wp:heading -->

<!-- wp:woocommerce/price-filter {"heading":"","lock":{"remove":true}} -->
<div class="wp-block-woocommerce-price-filter is-loading"><span aria-hidden="true" class="wc-block-product-categories__placeholder"></span></div>
<!-- /wp:woocommerce/price-filter --></div>
<!-- /wp:woocommerce/filter-wrapper -->

Save the page.
Go to Settings > General > Site Language and change language to a RTL language (ie: Arabic).
Verify on frontend by viewing the page that now the slider color is picking the theme's the font color.
Verify by changing the global color of site from Appearance > Editor > Styles > Color > Palletes
and choosing any other color

Changelog entry

Automatically create a changelog entry from the details below.

This Pull Request does not require a changelog entry. (Comment required below)

Changelog Entry Details

Significance

Patch
Minor
Major

Type

Fix - Fixes an existing bug
Add - Adds functionality
Update - Update existing functionality
Dev - Development related task
Tweak - A minor adjustment to the codebase
Performance - Address performance issues
Enhancement - Improvement to existing functionality

Message

Changelog Entry Comment

Comment

…tter theming support

Aljullu

Thanks for working on this, @amitraj2203! It's testing as described and it fixes the issue:

Before	After

I just left one comment inline, as I think we can take the opportunity to clean up a couple of CSS lines.

Testing environment

WordPress 6.8 local dev environment
Plugins: WooCommerce Beta Tester
Theme: Twenty Twenty-Five
Store creation: April 24th 2025
Store size: small

Aljullu · 2025-05-02T12:49:59Z

plugins/woocommerce/client/blocks/assets/js/base/components/price-slider/style.scss

@@ -260,7 +260,7 @@
 .rtl {
 	.wc-block-components-price-slider__range-input-progress {
 		--track-background: linear-gradient(to left, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;
-		--range-color: #{$studio-woocommerce-purple-30};
+		--range-color: currentColor;


I believe we can remove this line altogether, as we will inherit the color from here:

woocommerce/plugins/woocommerce/client/blocks/assets/js/base/components/price-slider/style.scss

Line 112 in ca19d38

--range-color: currentColor;

And while not related to the issue, we could go a step further and also remove these ones:

woocommerce/plugins/woocommerce/client/blocks/assets/js/base/components/price-slider/style.scss

Lines 275 to 277 in ca19d38

.wc-block-components-price-slider__range-input-progress {

--range-color: currentColor;

}

I didn't test yet, but I think they aren't needed either.

Thanks for the review, @Aljullu.
I've removed those and tested in TT, TT1, and TT5 — it's working fine. However, in the Storefront theme:

With an RTL language, both the editor and frontend are still picking up the purple color.

For LTR language in the editor, it's also still picking up the purple color, probably due to this rule.

I'm wondering if the scope of this change is limited to only the TT themes, or if we should also update the CSS in the Storefront theme.

Heading Image

Storefront Frontend RTL

Storefront Editor RTL

Storefront Editor LTR

Good catch with that issue in Storefront, @amitraj2203! In Storefront it's expected that the slider follows the accent color. For example, this is how it looks if I set the color to green in the Customizer:

LTR RTL

So in this case, the issue is with LTR languages because the accent color is not properly applied. Apparently, we need to increase the specificity of this selector so it 'wins' over the WC core selector. I think adding the tag name would be enough (div.wc-block-components-price-slider__range-input-progress { ... }). Do you want to open a PR for that? 🙂

Yes @Aljullu, just to confirm—I'll need to create the issue and PR in this repo, right?

Yes, please! 🙇

Aljullu · 2025-05-02T12:50:53Z

(Ups, sorry, I approved the PR by mistake, I think we should try to implement the changes I suggested before merging 😅 )

github-actions · 2025-05-03T10:13:55Z

Testing Guidelines

Hi ,

Apart from reviewing the code changes, please make sure to review the testing instructions (Guide) and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed.

Reminder: PR reviewers are required to document testing performed. This includes:

🖼️ Screenshots or screen recordings.
📝 List of functionality tested / steps followed.
🌐 Site details (environment attributes such as hosting type, plugins, theme, store size, store age, and relevant settings).
🔍 Any analysis performed, such as assessing potential impacts on environment attributes and other plugins, conducting performance profiling, or using LLM/AI-based analysis.

⚠️ Within the testing details you provide, please ensure that no sensitive information (such as API keys, passwords, user data, etc.) is included in this public issue.

Aljullu

This looks perfect, @amitraj2203! Thanks for your help with another fix! 🙌

amitraj2203 added 2 commits May 2, 2025 15:49

fix: Update price slider range input color to use currentColor for be…

b4c9edb

…tter theming support

feat: Add changelog file

2703a56

github-actions bot added type: community contribution plugin: woocommerce Issues related to the WooCommerce Core plugin. labels May 2, 2025

amitraj2203 marked this pull request as ready for review May 2, 2025 11:38

amitraj2203 mentioned this pull request May 2, 2025

Filter by Price slider uses current color in LTR languages but it's purple in RTL languages #54148

Closed

Aljullu approved these changes May 2, 2025

View reviewed changes

fix: Remove redundant styles from price-slider

73b19f0

amitraj2203 requested a review from Aljullu May 3, 2025 10:13

Aljullu approved these changes May 5, 2025

View reviewed changes

Aljullu merged commit be1891e into woocommerce:trunk May 5, 2025
35 checks passed

github-actions bot added this to the 9.9.0 milestone May 5, 2025

github-actions bot added the needs: analysis Indicates if the PR requires a PR testing scrub session. label May 5, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix Filter by Price slider color to use current in RTL languages instead of hardcoded purple #57687

Fix Filter by Price slider color to use current in RTL languages instead of hardcoded purple #57687

Uh oh!

amitraj2203 commented May 2, 2025 •

edited

Loading

Uh oh!

Aljullu left a comment

Uh oh!

Aljullu May 2, 2025

Uh oh!

amitraj2203 May 3, 2025 •

edited

Loading

Uh oh!

Aljullu May 5, 2025

Uh oh!

amitraj2203 May 5, 2025

Uh oh!

Aljullu May 5, 2025

Uh oh!

Aljullu commented May 2, 2025

Uh oh!

github-actions bot commented May 3, 2025

Uh oh!

Aljullu left a comment

Uh oh!

Uh oh!

Uh oh!

	.wc-block-components-price-slider__range-input-progress {
	--range-color: currentColor;
	}

Heading	Image
Storefront Frontend RTL
Storefront Editor RTL
Storefront Editor LTR

Fix Filter by Price slider color to use current in RTL languages instead of hardcoded purple #57687

Fix Filter by Price slider color to use current in RTL languages instead of hardcoded purple #57687

Uh oh!

Conversation

amitraj2203 commented May 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Submission Review Guidelines:

Changes proposed in this Pull Request:

Screenshots or screen recordings:

How to test the changes in this Pull Request:

Changelog entry

Significance

Type

Message

Comment

Uh oh!

Aljullu left a comment

Choose a reason for hiding this comment

Uh oh!

Aljullu May 2, 2025

Choose a reason for hiding this comment

Uh oh!

amitraj2203 May 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Aljullu May 5, 2025

Choose a reason for hiding this comment

Uh oh!

amitraj2203 May 5, 2025

Choose a reason for hiding this comment

Uh oh!

Aljullu May 5, 2025

Choose a reason for hiding this comment

Uh oh!

Aljullu commented May 2, 2025

Uh oh!

github-actions bot commented May 3, 2025

Testing Guidelines

Uh oh!

Aljullu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

amitraj2203 commented May 2, 2025 •

edited

Loading

amitraj2203 May 3, 2025 •

edited

Loading