Amato Il Ciabattaro Amato Il Ciabattaro - 2 months ago 11
CSS Question

Modify CSS of element in wordpress

I'm trying to modify a WordPress website, with WooCommerce. There is an element that is the "add to cart button" from WooCommerce where I can not find where to modify the CSS. When I inspect the item, here is what I get:

<p class="product woocommerce add_to_cart_inline " style ="border:4px; padding:12px;">


Where can I modify and save the css for this one specifically?
What I want to have is the following:

<p class="product woocommerce add_to_cart_inline " style ="border:0px; padding:0px;">

Answer

Just go to Appearance -> Editor and add the following line to the end of your main stylesheet (style.css):

.add_to_cart_inline {
    border: 0!important;
    padding: 0!important;
}

Because the style attribute is used on the element, the only way to override that style via CSS is to use !important. It's not a good practice to use it, but it seems like you have no other choice in this case (I'd assume that the style attribute is generated via JavaScript). Unless you want to edit the template / JavaScript for this element, !important is the way to go.