Style of product page broke

I found example how the buttons should look. this is how it looks before:

https://ibb.co/5BxrFcN

Hi @gileli121 ,

Thanks for sharing the screenshots and detailed information about what you’re experiencing.

It looks like the recent update to version 9.4.1 has caused some styling issues with your “Payments” menu and buttons on your site. This could be due to a conflict with your theme or other plugins.

First, try clearing your cache to ensure you’re seeing the latest version of your site (both site and browser). If that doesn’t resolve the issue, check if your theme and other plugins are up to date as they might also need to be compatible with the latest WooCommerce update.

For a closer look, you might also want to reach out to your theme’s support to check if others have experienced the same concern.

Please keep us posted on your progress.

exactly same problem here!

it seems that this part of css is no longer there compared to 9.3.3

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt {
background-color: #7f54b3;
color: #fff;
-webkit-font-smoothing: antialiased;
}

Hey @frykky ,

I’m sorry to hear that you’re experiencing the same issue!

Since each sites setup differs, and in order to align with the?forum guidelines, would you?please?start your own topic?

We’ll be more than happy to help there. ??

Cheers!

@beautyofcode

I maintain my theme, and you mentioned that there might be a style conflict with it. To rule this out, I removed all the content from the main theme style file (style.css) located in the theme folder. However, even after completely removing the theme’s styles, I still encountered the same issue.

Interestingly, when I added the styles that @frykky posted to this file, the issue was resolved. This suggests that @frykky faced the same problem, as adding the provided code also fixed it for them.

That being said, this is merely a workaround, and a proper fix should be implemented on your end.

Reverting to version 9.3.3 does indeed resolve the problem.

However, the styles that @frykky suggested aren’t an exact match, as the buttons still do not appear exactly as they did before. I’m now working on pinpointing the exact style code that needs to be added to fully restore the previous appearance.

But it currently something that I do as workaround. I expect it to be fixed

OK, so after checking more, need to add these styles to theme style file.
I copy these classes from 9.3.3

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button {
    font-size: 100%;
    margin: 0;
    line-height: 1;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    overflow: visible;
    padding: .618em 1em;
    font-weight: 700;
    border-radius: 3px;
    left: auto;
    color: #515151;
    background-color: #e9e6ed;
    border: 0;
    display: inline-block;
    background-image: none;
    box-shadow: none;
    text-shadow: none
}


.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt {
    background-color: #7f54b3;
    color: #fff;
    -webkit-font-smoothing: antialiased
}

There are the specific styles that need to add to make it work.
I isolated it to these classes.

The question is if it is a workaround or a final solution.
Is this change in WooCommerce is considered as a bug?

Hello gileli121,

Thank you for your reply.

WooCommerce 9.4.2 was released recently.
Could you please check if the buttons are still appearing the same way?

Looking forward to your response. ??

@doublezed2

I tested again. I have 9.4.2 installed and it still not working right without the workaround

gileli121 do you use sage?

Hi there!

I tried to replicate the issue on my test site, and I can see the button styles are appearing fine on our end. Additionally, the classes you mentioned are not appearing on my test site, but the buttons still look fine.

For testing purposes, could you please activate a default WordPress theme like Storefront or Twenty Twenty-Four and check if you’re still facing the issue?

We suggest changing the theme because if the issue is related to the code you’re referring to, it should create issue on all sites, including my test site.

Let me know how it goes!