[Resolved] Help styling [wpv-woo-buy-or-select] button

[Author]

Posts

[liatG]

Hello,
Can I change the look of the [wpv-woo-buy-or-select] button?

Here is a link to the page it is displayed on (shop page): hidden link
Here is the loop content for the view:

<p style="text-align: center;"><a href="[wpv-post-url]">[types field='product-image' title='[wpv-post-title]' alt='%%ALT%%' align='center' size='custom' height='200' resize='proportional'][/types]</a><b><a href="[wpv-post-url]">[types field='short-title'][/types]</a></b><br />$[types field='views_woo_price'][/types]<br><br>[wpv-woo-buy-or-select]</p>

I would like to use CSS to make the button narrower and have a different initial (non-hover) color. Right now the button is quite distracting.

I tried [wpv-woo-buy-or-select class="narrow"] with custom CSS for "narrow" but nothing changed.

Thank you!
Liat

[Luo Yang]

Hello,

Shortcode [wpv-woo-buy-or-select] does not support "class" attribute, see our document:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-buy-or-select

In your case you can setup the CSS codes like this:

a.ajax_add_to_cart{
/* here setup your custom CSS codes*/
}

[liatG]

Thanks Luo.

I was able to use the Firefox "Inspect Element" feature to find the CSS that was being applied to the button.
I added this to my CSS code:

.woocommerce a.button {
padding: .5em .6em;
margin-top: .2em;
}

I'm learning!! 😀
Thanks,
Liat