Problems with CSS in Single Product Layout

Hi Aizaz, hope you are doing well. I am having a problem I can’t figure out. I added custom CSS to the single product attribute text buttons, I also removed the ” : ” after the attribute name. For example instead of ” Color: ” it now says “Color”

The problem I have is that when the page loads, the CSS doesn’t apply, I have to refresh the screen one or two times and then I see the custom CSS in action.

What could be causing this behavior? I added the custom CSS to the add to cart widget in the single product layout. I tried adding the custom CSS to the woodmart settings custom CSS, I also tried adding it to elementor custom code section but I get the same issue. Is there a way to fix this or to add the custom CSS to be native? Attaching screenshots and links.

Attachments:

You must be logged in to view attached files.

Hello,

Thank you for your message. I’ve checked your site and tested this. After clearing the object cache, your CSS is now working correctly and applies immediately on page load.

See video for clarification: https://jumpshare.com/s/TsMei93mFJocqigUcigU

Please make sure to clear your object cache and any caching plugins after adding or updating custom CSS.

Best Regards,

Thank you for your response Aizaz, When I clear the object cache it works but not for all products, when I open other products in an incognito browser, the buttons look normal without the CSS.

Is there another way? Any way of changing that CSS without adding it as custom? That way it can pull it correctly

I appreciate your help.

Hello,

Please clear your site cache, browser cache, and check the site in incognito mode / another browser to confirm if the issue persists. I have added the css code in theme settings > custom cs code and checked it is working fine.

Best Regards,

HI Aizaz,

Thank you for all of your time and help. The issue persists, I cleared the object cache, browser cache and as soon as you change products, the buttons go back to the bad form.

Is there another solution? I was thinking…….can I add that custom CSS to the styles always load part on the woodmart performance CSS settings? Do you think there’s a way to somehow include it there so that those CSS rules load all the time? See screenshot.

Attachments:

You must be logged in to view attached files.

Hello,

This is not related to where the CSS is added, and adding it to “Always load styles” will not fix the issue.

The problem is caused by CSS optimization or caching serving an old compiled CSS file when switching products.

Please Keep the CSS only in Theme Settings > Global Custom CSS and Go to Elementor > Tools > Regenerate CSS & Data

Then Clear all cache (object cache, page cache, CDN if any), If the issue remains Temporarily disable the CDN and check how it works.

Best Regards,

[J6SE]

No brother, doesn’t work. I tried clearing the elementor outdated CSS files and cached data in the database……disabled the cache etc but nothing works on picking up the custom css on first load.

Based on your experience with the theme, what can I do? Can I add the style directly to the theme somehow?

• This reply was modified 4 months, 1 week ago by J6SE.

[J6SE]

Hi Aizaz, please see private content for elementors response.

• This reply was modified 4 months, 1 week ago by J6SE.

Hello,

Override the rule with higher priority Add this in Theme Settings > Custom CSS > Global Custom CSS:

.wd-swatch.wd-text .wd-swatch-text {
    padding: 0 !important;
    font-size: 14px !important; /* adjust if needed */
}

Best Regards,

Thank you Aizaz, I was finally able to make it work…..the custom CSS with !important rule under settings – custom CSS didn’t work but when added to the single product layout works perfectly. You can close this ticket….I appreciate your help

Hello,

You’re welcome! I’m glad to hear that you were able to get it working by adding the CSS directly in the Single Product Layout.

Thank you for the update and for confirming the solution. If you need any further assistance in the future, feel free to open a new topic.

Have a great day!

Best Regards,

[Author]

Posts