Title: WooCommerce RTL Support
Last modified: August 22, 2016

---

# WooCommerce RTL Support

 *  Resolved [Updula](https://wordpress.org/support/users/updula/)
 * (@updula)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/woocommerce-rtl-support/)
 * A great number of WooCommerce-powered online stores aren’t in English. We all
   know that WooCommerce community care about internationalization (i18n). Therefore,
   supporting RTL (right-to-left) alignment is quite necessary for languages like
   Arabic, Persian, Urdu, and many others.
 * For a while now, I’ve been working to add this support to WooCommerce, and I 
   would like to show you how would a RTL WooCommerce store will look with and without
   RTL adjustments:
 * Without RTL adjustments (Original WooCommerce Plugin): [http://drp.io/ail/cKc/-/-](http://drp.io/ail/cKc/-/-)
 * With RTL adjustments (Modified WooCommerce Plugin): [http://drp.io/aim/cKn/-/-](http://drp.io/aim/cKn/-/-)
 * As you can see, the Original Plugin doesn’t handle RTL alignment that well. It
   is messy and illogical for RTL readers.
 * Here are the steps I followed to make WooCommerce RTL-ready (After each update,
   ugh…):
 *     ```
       -Download the latest version and replace the old plugin folder with the new one.
       -Add a new folder in assets/css with the name “rtl” and copy all the .css stylesheets into it. (DON'T COPY 'chosen.css', LEAVE IT).
       -Configure CSS loaders to detect RTL language and load the needed stylesheets from assets/css/rtl via “isrtl” function.
       -Edit "class-wc-admin-notices.php” and "class-wc-admin-welcome.php” to load “rtl/activation.css”.
       -Edit "class-wc-admin-assets.php” to load “rtl/admin.css”.
       -Edit "class-wc-frontend-scripts.php” to load “rtl/prettyPhoto.css”.
       -Edit "class-wc-admin-assets.php” to load “rtl/dashboard.css” & “rtl/menu.css”.
       -Edit "class-wc-frontend-scripts.php” and add an array to each .css file in “woocommerceenqueuestyles” with the name “rtlsrc” to load “rtl/{filename.}.css”.
       -Edit the “foreach” for the variable “$enqueuestyles” to load “rtlsrc” if the language is RTL in "class-wc-frontend-scripts.php".
       -RTL each .css file in “assets/css/rtl”.
       -Find and replace “../“ with “../../“ for all .css files in “css/rtl”.
       -Reverse “tabs” style to LTR.
       -Make “.productdimensions” and “.product_weight” classes “dir: ltr”.
       -Edit "my-orders.php” file “text-align: left” to be RTL friendly.
       -Edit all .php files under “templates/emails” text-algin from “left” to “right” if is RTL.
       -Edit “includes/abstracts/abstract-wc-email.php” text-align from “left” to “right” if is RTL.
       -Load “chosen-rtl.js” to the fontend & edit it so it work on the class “.chosen-container”.
       -Replace arrows between the classes ".wc-forward” and ".wc-backward” in “woocommerce.css”
       -Prettify “prettyPhoto.css” & fix its arrows & flip the “close” and “expand” buttons to be at a proper position.
       ```
   
 * (The steps above will add full RTL support to the dashboard, the front-end, and
   the email templates).
 * To try the RTL version of WooCommerce, download it now (2.2.4): [http://cl.ly/4339150E3g35/download/woocommerce.zip](http://cl.ly/4339150E3g35/download/woocommerce.zip)
 * My point of all of this is to explain how RTL support is very important and should
   be integrated with the main plugin. It’s really not that hard to add, and doesn’t
   affect the plugin size what so ever.
 * Thank you.
 * [https://wordpress.org/plugins/woocommerce/](https://wordpress.org/plugins/woocommerce/)

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [menashkes](https://wordpress.org/support/users/menashkes/)
 * (@menashkes)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/woocommerce-rtl-support/#post-5335247)
 * Tried it..
 * Doesn’t work 🙁
 * Are there any other steps that I should follow beyond installing the plugin and
   activate it?
 * Thanks
 *  Thread Starter [Updula](https://wordpress.org/support/users/updula/)
 * (@updula)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/woocommerce-rtl-support/#post-5335248)
 * Hey menashkes
 * Try downloading the latest verstion (currently 2.2.8) from here: [http://ar-wc.com/downloads/outsiders/woocommerce-rtl-latest.zip](http://ar-wc.com/downloads/outsiders/woocommerce-rtl-latest.zip)
 * Install it like you’d install any other plugin, activate it, and make sure you’re
   running your WordPress site on a RTL language (e.g. Arabic) for the RTL support
   to work.
 * If you already installed the official plugin, you can download only the files
   which will add RTL support from here: [http://ar-wc.com/downloads/outsiders/rtl-files.zip](http://ar-wc.com/downloads/outsiders/rtl-files.zip)
 * After that you may upload each file to it’s proper directory using FTP.
 * —
 * If you’d like to make your own RTL version of WooCommerce, follow these instructions:
 *     ```
       - Download the latest version and replace the old plugin folder with the new one.
   
       - Create a new folder in "assets/css" with the name “rtl” and copy all the CSS stylesheets (but not chosen.css) into it.
   
       - Configure CSS loaders to detect RTL language and load the needed stylesheets from "assets/css/rtl" via “is_rtl” function (Steps are below).
   
       - Edit "class-wc-admin-notices.php” & "class-wc-admin-welcome.php” to load “rtl/activation.css”.
   
       - Edit "class-wc-admin-assets.php” to load “rtl/admin.css”.
   
       - Edit "class-wc-admin-assets.php” to load “rtl/dashboard.css” & “rtl/menu.css”.
   
       - Edit "class-wc-frontend-scripts.php” to load “rtl/prettyPhoto.css”.
   
       - Edit "class-wc-frontend-scripts.php” and add a key named “rtl_src” to the array that loads CSS files to load “rtl/{file_name.}.css”.
   
       - In "class-wc-frontend-scripts.php”, edit the “foreach” for the variable “$enqueue_styles” to load “rtl_src” if the language is RTL in.
   
       - RTL each CSS file under “assets/css/rtl”.
   
       - Find and replace “../“ with “../../“ for all CSS files under “css/rtl”.
   
       - Edit "woocommerce.css" and make “.product_dimensions” and “.product_weight” classes “direction: ltr” using the classes ".woocommerce table.shop_attributes td, .woocommerce-page table.shop_attributes td".
   
       - Edit "woocommerce.css" and reverse "margin-right" to "margin-left" for the classes ".woocommerce .widget_price_filter .ui-slider .ui-slider-handle:last-child, .woocommerce-page .widget_price_filter .ui-slider .ui-slider-handle:last-child".
   
       - Edit "woocommerce.css" and replace arrows between the classes ".wc-forward” and ".wc-backward”.
   
       - Edit "admin.css" and fix TipTip position to be RTL friendly by changing "right" to "left" in the id "#tiptip_holder" and adding "right: 50%; margin-right: -6px" in the classes "#tiptip_arrow, #tiptip_arrow_inner".
   
       - Edit "admin.css" and reverse “chosen-rtl” class to RTL via the original "admin.css" file.
   
       - Edit “prettyPhoto.css” and fix its arrows & flip the “close” and “expand” buttons to be at a proper position.
   
       - Edit "my-orders.php” file “text-align: left” to be RTL friendly using this PHP code "<?php if ( is_rtl() ) { echo 'text-align: right;'; } else { echo 'text-align: left;'; } ?>".
   
       - Edit all files under “templates/emails” text-algin from “left” to “right” if is RTL.
   
       - Edit “abstract-wc-email.php” "text-align" from “left” to “right”, and "font-family" from "Arial" to "Tahoma" if is RTL.
   
       - Edit "class-wc-frontend-scripts.php" to load “chosen-rtl.min.js” & edit that file so it work on the class “.chosen-container”.
       ```
   
 * Thank you.
 *  [menashkes](https://wordpress.org/support/users/menashkes/)
 * (@menashkes)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/woocommerce-rtl-support/#post-5335249)
 * Hi Updula
 * Thank you for your detailed reply.
 * Is it ok that I’ve deleted my woocommerce plugin and then installed yours?
 * It messed up my theme a little bit..
 * I thought that because it is RTL the picture in the single product page will 
   be on the right..
 * Is there a way that I can do it?
 * Thanks again 🙂
 *  Thread Starter [Updula](https://wordpress.org/support/users/updula/)
 * (@updula)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/woocommerce-rtl-support/#post-5335271)
 * Problem solved! I made a plugin which will add full RTL support to WooCommerce:
   [https://wordpress.org/plugins/woocommerce-rtl/](https://wordpress.org/plugins/woocommerce-rtl/)

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘WooCommerce RTL Support’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [Updula](https://wordpress.org/support/users/updula/)
 * Last activity: [11 years, 2 months ago](https://wordpress.org/support/topic/woocommerce-rtl-support/#post-5335271)
 * Status: resolved