[Gelöst] Changing the Woocommerce add to cart button colour within a view

[Author]

Artikel

[barryG-4]

Tell us what you are trying to do?
I have created a set of views for displaying Woocommerce products with a query set to show only products with a custom post type relationship. I’m very happy with how things look but I’ve just had to add a WooCommerce Rental plug in and when products are set to ‘Rental Only’ within WooCommerce, the code for the add to cart button changes. I used the following toolset field for the button: [wpv-woo-buy-or-select add_to_cart_text="Add”]. I used view page source to see the class of the original button (when all products were not rentals) and it is as follows:

<span class='bgpcCart'>Add</span>

To make the button background a black colour I used the following in my theme’s Custom CSS section:

.button.product_type_simple.add_to_cart_button.ajax_add_to_cart{background-color:black;}

This doesn’t work with the rental only products though. They still show as the default blue colour.

This is the add to cart button code when products are set to rental only:
<span class='bgpcCart'>versteckter Link" class="button product_type_simple">Dates</span> (I changed the button text from Add to Dates but nothing else).

Therefore I tried adding this to css within the view and alternatively in the theme’s Custom CSS section but nothing changes:
.button.product_type_simple{background-color:black;}

Can you help. Is there something I can write within the view code itself to force the button to change colour or is there anything else you can think of?

The non rental page that shows the button colour correctly is:

versteckter Link

And the incorrect blue button for rental only products is here (currently set to home page):

versteckter Link

Many thanks,
Barry.

Is there any documentation that you are following? No

Is there a similar example that we can see? No

What is the link to your site? versteckter Link

[Shane]

Hi Barry,

Thank you for getting in touch.

Try using this css below.

.bgpcCart a{
background-color: black !important;
}

Please let me know if this forces the button to change its background color to black.

Thanks,
Shane

[barryG-4]

Hi Shane,

Thank you so much for doing this so quickly. I'm annoyed I had to bother you with it as now I can see the answer I think I could have tried it myself but I wouldn't have known to add the !important; bit.

Many thanks,
Barry.