WooCommerce & Prophoto theme – change colours of price & add to cart button etc

Ok quick update – I used the code below and it changed the price colour on the page for the individual page:

https://www.waniolatundeportraits.com/product/photoshoot-voucher-50000/

but not on the SHOP / collective page:

https://www.waniolatundeportraits.com/shop/

CODE USED (found on this site):

.product_item .product_price > ins span {
color: green !important;
}

span.woocommerce-Price-amount.amount {
color: #bc2477;
}

Try this custom css:

.woocommerce ul.products li.product .price {
  color: #000 !important;
}
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  color: White !important;
  background-color: #bc2477 !important;
}

Custom css can be entered at:
Dashboard > Appearance > Customise > Additional CSS

Ooh thanks so much – progress. ??

The only add to basket button has now changed.

But the “proceed to checkout” https://www.waniolatundeportraits.com/basket/

and “place order” https://www.waniolatundeportraits.com/checkout/

buttons still the same.

Any suggestions for changing those?

Also still no joy on the SHOP page – text is still green: https://www.waniolatundeportraits.com/shop/

Ooh thanks so much – progress. ??

The “add to basket” button has now changed – yay! .

But the “proceed to checkout”and “place order” buttons still the same.

“proceed to checkout” button here: https://www.waniolatundeportraits.com/basket/
“place order” button here: https://www.waniolatundeportraits.com/checkout/

Any suggestions for changing those?

Also still no joy on the SHOP page – text is still green: https://www.waniolatundeportraits.com/shop/

Thank you in advance. ??

Custom code currently:

.product_item .product_price > ins span {
color: green !important;
}

span.woocommerce-Price-amount.amount {
color: #bc2477;
}

.woocommerce ul.products li.product .price {
color: #000 !important;
}
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
color: White !important;
background-color: #bc2477 !important;
}

The css is not loaded into the page. Please deactivate W3 Total Cache until everything is working.

I deactivated it now and saved the css code again.

Will it take some time to work its way through?

No, now that you have deactivated W3 Total Cache, changes will be instant.

I still can’t see any of the css in the page where it should be. Did you put it at:
Dashboard > Appearance > Customise > Additional CSS
If not, where did you put it?

Do you have another plugin which is minifying the css? It should have a “flush” button or similar.

I’m using the prophoto theme – so it leads me to their customiser and I put the CSS in there.

Doesn’t look like I can send you an attachment / picture.

But when I go to Appearance and Edit CSS – it leads me to their customiser.

Does that mean the code may not work?

Minifying? Not sure what that means – sorry #supernontechy ??

But the area I’m inputing the code was as directed by the Prophoto theme developer but he didn’t know what specific code to enter to change the WooCommerce features. So I believe I’m in the right place – just haven’t found the right code yet – sigh

We don’t know whether the code is right or not yet. The code is not in the page, so its not been tried. If you go to:
https://jigsaw.w3.org/css-validator/
and put in your shop page url, the service will list all the styles that are in the page, wherever they come from. Ctrl-F and search the whole page in a moment for #bc2477 and its not there.

At that point I’m stuck because ProPhoto is a commercial theme and www.ads-software.com forum members don’t have access to commercial themes. I don’t know how they are handling custom css.

I think you could go back to the theme support and report that you now have some custom css to try, you’ve put it in their customizer, but its not in the page. The support tech may be able to tell you that the theme has a reset styles or flush styles button somewhere.

If you don’t want to do that, there is something else you can try. Load up this plugin:
https://en-gb.www.ads-software.com/plugins/simple-custom-css/
and put the custom css in there. See if it works. This is a great plugin but its not been used much since a custom css facility was incorporated into WordPress core. However in your case it sounds like the WordPress custom css facility at:
Dashboard > Appearance > Customise > Additional CSS
is being intercepted somehow by your theme.

You could try the plugin and come back. If we can get the custom css into the page, it will either work or, if not, it can be debugged.

Ok thanks Lorro – still working through this with my theme guys – I’ll let you know how it goes.

Thanks a lot for your help. ??

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.