[Resolved] Unable to override CSS of [wpv-woo-buy-or-select] Button

[Author]

Posts

[jonB-5]

I had previously been using [wpv-woo-buy-or-select show_quantity_in_button='yes' add_to_cart_text='Add to Basket'] with:
1) AJAX Add to Cart ENABLED; and
2) Redirect to Cart on successful addition DISABLED

I was using the above in conjunction with the styling below, which was working as expected.

button.add_to_cart_button {
	background-color: var(--success) !important;
	color: white !important;
	padding: 8px 20px;
	border: none;
	font-size: 1em;
}
button.add_to_cart_button:hover {
  background-color: #00529f !important;
}

I am now using [wpv-woo-buy-or-select show_quantity_in_button='yes' add_to_cart_text='Add to Basket'] with
1) AJAX Add to Cart DISABLED; and
2) Redirect to Cart on successful addition ENABLED.

This has changed the classes of the Add to Cart button (see screenshots, it now has .button .alt NOT button.add_to_cart_button) and I have been unable to target it with CSS.

I have tried a number of combinations of the below CSS in both style.css and woocommerce.css but with no luck.

form > button { 
  background-color: #1da647 !important;
  color: white !important;
  padding: 1rem !important;
  border-radius: 5px !important;
}
form.cart > button { 
  background-color: #1da647 !important;
  color: white !important;
  padding: 1rem !important;
  border-radius: 5px !important;
}

Please can you advise on how I can customise the style of this button.

[jonB-5]

I am able to fix this issue by adding the class .add_to_cart_button directly in the WooCommerce Views plugin file, because creating an override copy in my theme did not work.

Is there a way to do this without directly editing the WooCommerce Views plugin file?

[Luo Yang]

Hello,

I don't think you need to hack plugin files, you can try below CSS selector:

button.button.alt {
/** here setup your custom CSS codes **/
}
button.button.alt:hover {
/** here setup your custom CSS codes **/
}