Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – Why cant I remove this border with CSS?

I have two questions I seek your help with:

  1. I am trying to remove the grey border using CSS but can’t seem to remove it.

    My code is:

    <p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
  <span class="woocommerce-Price-amount amount">
    <span class="woocommerce-Price-currencySymbol">$</span>
    29.00
  </span>
  <a href="?add-to-cart=511" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart"
    data-product_id="511" data-product_sku="plan1" aria-label="Add “Plan 1” to your cart" rel="nofollow">
    Add to cart
  </a>
</p>

    My CSS is:

    p.product.woocommerce.add_to_cart_inline {
  border:0px;
}

span.woocommerce-Price-amount.amount {
  display:none
}

    Here is my JSFiddle.
    Can someone please let me know why my CSS code does not work?

  2. In Chrome developer tools, is there a way to easily copy the CSS selector?

    For example, after pointing out that this is the selector.
    Is there a way to easily copy the “p.product.woocommerce.add_to_cart_inline”?

    Right now I type it out manually myself. I am pretty sure that there should be a way to copy it and paste it directly?

Tags:

4

Answers


  1. 0

    change your HTML code you have inline css for border in html p tag

    <p class="product woocommerce add_to_cart_inline " padding: 12px;"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span><a href="?add-to-cart=511" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="511" data-product_sku="plan1" aria-label="Add “Plan 1” to your cart" rel="nofollow">Add to cart</a></p>

    or you can add important to css like this: 

    p.product.woocommerce.add_to_cart_inline {border:none!important;}
    Login or Signup to reply.
  2. 0

    It’s not working because of css specificity rules

    You are adding border style inline in p tag which has more specificity than css selector.

    To fix this, remove the border style from the inline and apply it using another css selector.

    Here is updated fiddle

    p.product.woocommerce {
  border: 4px solid #ccc;
  padding: 12px;
}

p.product.woocommerce.add_to_cart_inline {
  border: 0px;
}

span.woocommerce-Price-amount.amount {
  display: none
}
    <p class="product woocommerce add_to_cart_inline"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span><a href="?add-to-cart=511" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="511"
    data-product_sku="plan1" aria-label="Add “Plan 1” to your cart" rel="nofollow">Add to cart</a></p>
    Login or Signup to reply.
  3. 0

    Remove border css style from style attribute

    <p class="product woocommerce add_to_cart_inline " style="padding: 12px;"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span><a href="?add-to-cart=511" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="511" data-product_sku="plan1" aria-label="Add “Plan 1” to your cart" rel="nofollow">Add to cart</a></p>
    Login or Signup to reply.
  4. 0

    add !important 

    p.product.woocommerce.add_to_cart_inline {border:none!important;}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search