WS Scale Ring Size

WS Scale Ring Size adds an on-screen ring sizer to any page, post or product. The visitor lays a ring they already own on the screen, shrinks the circle to the inside edge of the band, and reads their size. There is nothing to set up and nothing for them to calibrate.

Why on-screen sizers are usually wrong, and how this one is not

Most of them assume one CSS pixel equals 1/96 inch. That is only true on a classic desktop monitor. On a phone the viewport is scaled for reading distance, so the same circle renders about 40% smaller than intended — enough to be several sizes out.

WS Scale Ring Size instead reads what the browser really does report: the size of the screen in CSS pixels and the device pixel ratio. Together those identify the handset, and a built-in profile table turns that into the panel’s pixels per inch. From there:

pixels per mm = pixels per inch / 25.4 / device pixel ratio

Known devices are exact. Anything else is derived from the screen resolution against a typical diagonal for that class of device, which is usually within a few per cent. Browser zoom is folded into the device pixel ratio and cancels straight back out of that formula, and pinch zoom is corrected separately, so the circle stays true — the visitor is still told when they are not at 100%, because a zoomed page can crop it.

Features

• Gutenberg block, Elementor widget, WPBakery element and a shortcode — all driven by the same settings.
• No calibration step, no card, no ruler. The sizer configures itself from the device.
• Two measuring methods: place a ring on the screen, or measure the finger with thread and type the millimetres.
• Choose between a guided multi-step flow and a compact measuring-only widget for product pages.
• Decide what happens on an unrecognised device: show the circle from an estimate, or offer the thread method only.
• Full design control from one settings screen: colours, ring outline thickness, board style, radius, spacing, font sizes and line height, with a live preview.
• Size systems: ISO/EU (also used in Iran), US, UK, Japan and Switzerland — pick the primary one and any number of secondary ones.
• Latin, Persian or Arabic-Indic digits, following the site language by default.
• Structured data that adapts to the page. On a WooCommerce product the tool and its questions attach to the Product your store already publishes; on a guide page it is described in its own right as a WebApplication with a HowTo and an FAQ.
• Optional credit line linking back to the plugin.
• Right-to-left ready; the stylesheet uses logical properties throughout.
• No tracking, no external requests, no cookies, no browser storage. Everything happens in the page.

Adding your own device

Densities come from a filterable table, so an unusual handset can be pinned down exactly:

add_filter( 'srsz_device_profiles', function ( $p ) { $p['generic']['360x772@3'] = 409; return $p; } );

The key is the CSS portrait viewport and the device pixel ratio; the value is the panel density in pixels per inch.

1. Upload the ws-scale-ring-size folder to /wp-content/plugins/, or install the ZIP from Plugins → Add New → Upload Plugin.
2. Activate the plugin.
3. Open Tools → Ring Sizer to set colours, steps and size systems.
4. Add the Ring Sizer block, the Elementor or WPBakery element, or the [ws_scale_ring_size] shortcode to a page.