clear button on single product page not formated correctly

Hello brucemacg,

Thank you for contacting WooCommerce support.

I understand you noticed the “Clear” button on your single product page now looks different after the upgrade, as shown in the screenshot.

Please note, that this is the default button style for the Storefront theme.
The previous style might have been added through custom code or a plugin.

I suggest contacting the Variation Swatches for WooCommerce team to confirm if any CSS changes are not being applied.

Let me know what they say, I am here to assist you. ??

Best regards.

I initially contacted Variations swatches. It’s not them, I deactivated their plugin and the problem persists.

This is what they said, when I asked for their view “

“Perhaps recently WooCommerce changed the clear markup from <a> to <button>.

The style comes from the theme as they added CSS for the <button> markup.”

They are correct. I did an inspect on new and old versions and copied part of the element…

NEW.i.e. Plugins upgraded to latest version. (Caching plugin disabled, hence spaces ..?)

</span></div></li></ul> </td>

</tr>

<tr>

<td colspan=”2″>

<button class=”reset_variations” aria-label=”Clear options” style=”visibility: visible;”>Clear</button>

OLD .i.e. Plugins on my live site, obviously all not up to latest version

</span></div></li></ul><a class=”reset_variations” href=”#” style=”visibility: visible;”>Clear</a>

cheers, Bruce

Hi @brucemacg,

Thank you for pointing that out. I’ve checked on my end as well, and the ‘clear’ action text now appears as a button, which is why it adopts your theme’s button styling.

This behavior is the default for WooCommerce, and the button style is pulled directly from your theme, whether it’s Storefront, Astra, or another theme.

If you want to make it smaller or style it differently, you can achieve this with custom code. Depending on the look you want, you can use CSS alone or a combination of CSS and JavaScript to restore the previous appearance. For assistance, you can hire an expert from codeable.io or visit https://jobs.wordpress.net/.

no. can’t be. You’ve gone from, a small subtle stand alone “clear” and suddenly decided it’s a button. Now it’s my theme’s problem? Buttons, by their nature are prominent and stand out. I mean apply a bit of reason, do you really want the “clear your options” and the “add to cart” to be next to each other and to look identical. Clearly “add to cart” should be given priority / prominance.

So, bad idea allround.

And now, you make an “update change” to woocommerce, which completely messes up my site, and I need to hire a developer to make right. Come on, unacceptable

cheers, Bruce

Hi there!

I understand your frustration. I have checked the issue on my test site and noticed that the “Clear” text previously appeared in an <a> tag. After updating to the new version, the “Clear” text now appears in a <button> tag, which makes it a button and applies the button style from your theme.

To show the clear button different from other buttons, you can use the following CSS code:

.single-product table.variations  button.reset_variations,.single-product table.variations  button.reset_variations:hover {
    background-color: transparent;
    color:#6d6d6d;
    padding: 0px !important;
}

Please note that we generally do not provide custom CSS code as it is outside the scope of our support. However, as an exception, I have shared the CSS code with you.

Additionally, you can create a thread on GitHub to request a review of these changes. Our developers will look into it, and if feasible, they may revert the changes.

Thank you.

Hi Thanks for that.

I have raised the issue on Github, as I’m still not really happy.

The CSS changes the colours, etc, all good. However I can’t easily get it to line up directly under the list of variations, so it looks a little lost (and lacks context) where it currently sits.

I also really like the little graphic next to the clear, which adds the context that this will “clear” your variations…

I appreciate you are moving towards blocks, blocks and more block themes, which is what may be the reasoning behind the change, but surely this will break a lot of sites…

cheers, Bruce

Hi there!

Thanks for your feedback, and I appreciate the time you took to raise the issue on GitHub.

I understand your concern about the placement and visual context of the “Clear” button, as well as the missing graphic that provided additional clarity. These kinds of changes can indeed affect the look and feel of many sites, and I can see how this might be frustrating.

Our developer will review your feedback, and if a broader solution is warranted, they may consider adjustments in future updates.

Thank you