Add to Basket Button Flashing Purple

This is a fairly complex CSS topic. I’m going to leave it open for a bit to see if anyone is able to chime in to help you out.

Hey @magicalwonders – thanks for the link and the clear description. What you’re experiencing is a variation of the “flash of unstyled content” concept. Here’s a link to a more detailed description of that.

When your style sheets load, they do that from top to bottom. And in this case, the WooCommerce default stylesheet is loaded before the more specific one that is part of your theme. When I look at all the CSS that is targetting this specific button, I do think that just making sure you don’t load all of these styles on that button will make it faster, these are all the different selectors that try to add color to the background:

button (3 different locations)
.btn-primary
.btn.btn-primary (3 different locations)

Link to image: https://cld.wthms.co/aT3zsa

Because that’s one of the few things you can try to do: make your style sheets load super fast so you don’t get to see this.

For example, in the custom CSS you shared, you seem to be having two background colours:

background-color:#1FDE35;
background:rgba(31,222,53,1);

Is there a reason you’re adding these two as it will only be the last one of the two that actually shows up in the final result.

Link to image: https://cld.wthms.co/DJqKQd

Another thing you might want to try is to not just target the specific button CSS you have, but target the WooCommerce specific ones. In that case you’d make it something like:

.btn-default, 
.btn-default:focus, 
button, 
.button, 
.button-primary, 
input#submit, 
.btn-primary,
.btn.btn-primary,
.woocommerce a.button, 
.woocommerce input.button, 
.woocommerce .checkout-button.button, 
.woocommerce #respond input#submitwoocommerce-Button {
  background:rgba(31,222,53,1);
}

The reason that might work is that you’re not just targetting a selector in your theme that’s more specific than the WooCommerce selector, you’re also targeting the original WooCommerce selector and overriding it.

I’ve excluded these selectors for now because I’m not sure how they work exaclty with your theme (also the fact that your theme is using IDs [#] instead of classes [.] isn’t really that optimal):

#ttr_content .woocommerce input.button, 
#ttr_content ul.products li a.button, 
#ttr_content .button:visited, 
#ttr_content p.add_review a, 
#ttr_content p.add_review a:visited, 
#ttr_content a.button, 
#ttr_content a.button:visited, 

Hey Job & Hannah,

Many thanks for your assistance. Loving the title “Happiness Engineer”! ??

I tried removing the rgba colour, leaving just the hex code, but it made no difference. I also used the specific button CSS in my child theme, but that didn’t have any effect either.

What is strange, is that my original theme using an earlier version of the theme creation software doesn’t exhibit this “flash” issue. You can see how it works here – https://internetsquad.co.uk/product/21st-century-card-trick/

I know that the software vendor completely revamped how their generated themes handle WooCommerce in their latest version, and it would seem that this has not been without issue.

For the moment, I’ve installed my older theme – https://www.internetsquad.co.uk/testsite/product/21st-century-card-trick/ and am tweaking the CSS manually to get the changes I want. I’ll have a word with the software developers and see if they can fix the issue for future versions.

Having reverted to my original theme, and eliminated the purple flash, I’m only stuck on one edit. I’m trying to reduce the space between the product name and the price by a couple of pixels, but nothing I try seems to make a difference.

My latest attempt is the following CSS in my child theme –

.woocommerce div.product p.price, .woocommerce div.product span.price {
    color: #000000;
    font-size: 16px;
    margin: 12px ! important;
}

When I upload and view using Web Developer / Inspector, the “margin” doesn’t even appear as part of the CSS. So I guess using “margin” is not the method to achieve what I’m looking for?

If you can point me in the right direction to edit the gap between product title and price, I’ll be very grateful, not to mention a happy camper!

• This reply was modified 5 years, 10 months ago by magicalwonders.

I got it working! I think my code had spaces where there shouldn’t be!
So, this now works as expected – ??

.woocommerce div.product p.price, .woocommerce div.product span.price {
    color: #000000;
    font-size: 16px;
    margin: 3px 0px 0px 0px !important;
}

Hey @magicalwonders thanks for the response. We like the title “Happiness Engineer” a lot too.

Given that it doesn’t give problems with your old versioned theme and does with the newer version is a clear indication that your theme is causing this problem. If it’s persistent, I’d advise getting in touch with them for help.

Given that the other aspects seem to be working now, I’ll mark this thread as resolved. If you have other support questions, please open a new thread.

We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Sure Hannah. As previously mentioned, I managed to find a solution to this issue. Job said he would mark the thread as resolved. I appreciate the help. ??