Unique customized css for ltr and rtl pages

[omid020]

Hi

Could you please guide me how can I have different customized CSS rules for the same elements?

I needed to customize Woocommerce cart page and used this CSS code to have two columns cart page:

/* Two Columns Cart Page Modifications */

.woocommerce-cart .woocommerce {
  display: flex;
}

/* The table containing the list of products and our custom elements */
.woocommerce-cart .woocommerce-cart-form {
  flex: 1 0 75%; /* 100% at small screens; 70% on larger screens */
  margin-right: 2rem;
}

/* The element that contains the cart totals */
.woocommerce-cart .cart-collaterals {
  flex: 1 0 25%; /* 100% at small screens; 30% on larger screens */
  margin-right: 2rem;
}

/* Some minor tweak to make sure the cart totals fill the space */
.woocommerce-cart .cart-collaterals .cart_totals {
  width: 100%;
  padding: 0 20px 70px;
  border: 2px solid darkslategray;
  margin: 0px 0px !important ;
}

Above parameters work good on LTR page but for the RTL page I need to replace margin-right: 2rem; with margin-left: 2rem; to gain better result. Is there any solution for it?

Thanks in advance
Omid

[ruenel]

Hello Omid,

Thanks for writing in!

By the default, most of WP sites are LTR. As soon as you select other RTL languages, it will be set to RTL and then in the body class of the WP site will have rtl in it.

And with this new body class, you can use to target specific elements to have a different styling when the page is in RTL. Perhaps you can have something like this:

/* For LTR */
.element-class {
  // some styling here
}

/* For RTL */
.rtl .element-class {
  // another  styling here
}

The code above is given as a example to get you started with your own Custom CSS.

Hope this explains it briefly.

[omid020]

Hi @ruenel

Thanks for your reply. Honestly I had been tried using .rtl class before but it doesn’t work.

For example:

.rtl .woocommerce-cart .woocommerce-cart-form {
  margin-left: 2rem !important;
}

 .rtl .woocommerce-cart .cart-collaterals {
  margin-left: 2rem !important;
}

does not affect the output and also I can’t find above parameters in Browser Inspect Element.

[christian]

Hey Omid,

It will work as long as your CSS targets the correct elements or you’re using the correct selectors. Looking at your CSS, it’s incorrect. woocommerce-cart is a body class as well as rtl. Please have a developer correct your CSS code for you as correcting custom code is beyond the scope of our theme support.

Thank you for understanding.