The type, before anything else
Arabic set at the line height that suits Latin text looks cramped, because the script's ascenders, descenders and dots occupy vertical space that Latin does not. It also reads comfortably at a shorter measure. On a phone this compounds: a product description at 1.5 line height and full viewport width is the most common reason an Arabic store feels harder to read than its English twin.
- Ship a real Arabic webfont with the weights the design uses. The OS fallback has different metrics and different weights, and it is why the Arabic looks like an afterthought.
- Raise line height for Arabic body text relative to the Latin value.
- Neutralise letter-spacing under [dir="rtl"] — Arabic is a joined script and tracking breaks the joins.
- Expect Arabic headings to read heavier at the same numeric weight; step them down rather than matching the number.
Numerals, and choosing one set
Arabic-Indic numerals are correct Arabic, and Latin numerals are what most Gulf and Egyptian storefronts actually use for prices. Either is defensible. What is not defensible is both on the same screen — a price in one set and a quantity in the other reads as a rendering fault and makes a buyer doubt the number.
Whichever you choose, isolate the run. A price, a phone number or an order reference inside an Arabic sentence will be reordered by the bidirectional algorithm unless it is wrapped, and a reordered order number is a support ticket.
The checkout is a different form here
WooCommerce's default address form is built around a postal system that does not describe how people are found in much of this region. A required postcode, a two-line street address and a state dropdown produce either abandoned carts or fields filled with placeholder text, which is worse — the order is accepted and cannot be delivered.
The Arabic mobile checkout
- Phone field with type="tel", inputmode="tel", the country code visible, and the run isolated LTR.
- Autocomplete tokens on every field — the browser filling the form is the fastest checkout you can build.
- Address fields that match how people describe where they live, with optional rather than required precision.
- Cash on delivery presented as a first-class option where the market expects it, not buried under card fields.
- Apple Pay and local wallets surfaced before the card form, because on a phone they are one tap.
- Error messages in Arabic, written as instructions, next to the field that failed.
- A visible delivery expectation in days, on the checkout, in text.
The thumb is on the other side
Reading direction does not change which hand holds the phone, but it does change where a reader's attention starts. Primary actions belong within a comfortable reach and on the side the eye arrives from; a back gesture and a drawer must open from the inline-start edge; and a sticky cart bar has to clear the home indicator. These are all logical-property decisions, and none of them survive a hand-mirrored stylesheet.
Sources
Related services
Related work
Read next
- RTL & Arabic WebWhy component libraries break in RTL, and what to check firstWhy do component libraries break in RTL?
- WooCommerceWooCommerce checkout: what I look at before adding more pluginsWhat should be fixed in a WooCommerce checkout before reaching for a plugin?
- WooCommerceThe product page, rewritten for a buyer who is asking an assistantHow should a product page be written so an AI assistant can recommend it?
