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

How to target woocommerce element?

I want to target some woocommerce elements on my website and change color and make some css changes. When using the inspector on my website I find:

<div class="woocommerce-form-coupon-toggle">

and assume I could write the following as a css code in wordpress

.woocommerce-form-coupon-toggle {
    background-color #000000 !important;
}

When doing this, nothing happens.

Tags:

3

Answers


  1. 0

    The property and value in CSS should be separated by a colon :. Like the following:

    .woocommerce-form-coupon-toggle {
    background-color: #000000 !important;
}
    Login or Signup to reply.
  2. 0

    Try to check for the whole tree, class by class. it should become a larger property, but would work.

    body class1 class2 .woocommerce-form-coupon-toggle {
    background-color: #000000 !important;
};
    Login or Signup to reply.
  3. 0

    I assume you are styling the toggle coupon form in the checkout form. See image checkout page

    You should be styling the .woocommerce-form-coupon-toggle .woocommerce-info not the .woocommerce-form-coupon-toggle alone.
    To do this try this code.

    .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info{
   background-color: #000000 !important;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search