Apply woocommerce coupon only to the cart total, not to the tax line

I am working on a WooCommerce site. When I apply a coupon on the checkout page, it automatically applies to the tax as well.

I only want the coupon code to apply to the cart total. I have searched through google for a related hook or plugin, but can not find a working solution.

This is my current code hook in my functions.php, but it doesn't work as expected.

add_action('woocommerce_product_tax_class', 'set_tax_class');
function set_tax_class () { 
    if (!empty($woocommerce->cart->applied_coupons)){
        $tax_class = 'gratuty';
    }
    return $tax_class;
}

I have also tried the woocommerce_cart_calculate_fees hook too, but it did not work.

Which hook should I use to update cart, when coupon is applied, without changing the tax?

.modal-content for different Modals (react-bootstrap)

I'm using the Modal-component from react-bootstrap.

I have two different Modals in my application and I want one of them to have an orange background color.

I can achieve the orange background color by doing:

.modal-content {
  background: #FF8C0A;
}

However, this will make both of the modals in my application orange. I can't find a way to label the modal-content with an unique ID to edit just one of them. Can the "dialogClassName" prop maybe be used in some way?

Note: I've already tried giving the head and body IDs and making their background color orange. This works on desktop, however, on mobile devices there is a transparent line between the header and body in which doesn't look good.

Thank you!

Screenshot of the implementation of the Modal

Solved

You can use CSS nesting to target children of the components, For eg, In your case,

You named your modal using dialogClassName prop to info-modal, you can use this in ur CSS

info-modal .modal-content {
  background: #FF8C0A;
}

Similarly for other modals, you can pass different name using dialogClassName prop

other-modal-1 .modal-content {
  background: red;
}

other-modal-2 .modal-content {
  background: green;
}

You can use "CSS modules" package for achieving this.

There are useful links for learning and implementing CSS modules..

• https://www.javascriptstuff.com/css-modules-by-example/
• https://css-modules.github.io/webpack-demo/

JS - split an array string and pass both parts as arguments to a method

So, I've got a method to grab particular DIV from x, y coordinates:

this.getCell = function (x, y){
      this.index = x + y * this.width;
      return this.cells[this.index];
}

I want to use my method with another one:

this.computeCellNextState = function(x, y){

      var nearbies = ['x-1,y-1','x,y-1','x+1,y-1'];
      var splitter = nearbies[0].split(',');

      console.log(this.getCell(splitter[0],splitter[1])); // returns undefined

}

What I want to achieve:

this.getCell(x-1,y-1)

x-1,y-1 are from nearbies[0]

I want to split one string of 'nearbies' and use as 2 parameters.

Solved

'x-1,y-1' etc are just strings, they don't mean anything for getCell. You have to work with actual expressions in computeNextState, e.g.

this.computeCellNextState = function(x, y){

      var nearbies = [[x-1,y-1],[x,y-1],[x+1,y-1]];

      console.log(this.getCell(...nearbies[0]))

}