=== WS Scale Ring Size ===
Contributors: hassantafreshi
Donate link: https://tafreshi.art/scale-ring-size/
Tags: ring size, ring sizer, jewelry, woocommerce, size guide
Requires at least: 6.1
Tested up to: 7.1
Requires PHP: 7.4
Stable tag: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

A ring size finder that sizes itself to the visitor's screen, so the circle it draws is a real millimetre measurement.

== Description ==

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.

== Installation ==

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.

== Frequently Asked Questions ==

= Do visitors have to calibrate anything? =

No. The sizer works out the screen density from what the browser reports about the device, so there is no setup step at all.

= What happens on a device you do not recognise? =

The density is worked out from the screen resolution instead, which is usually within a few per cent. Under **Tools → Ring Sizer → Flow & steps** you can choose to hide the circle on those devices and offer the thread method only.

= Does browser zoom break it? =

Desktop page zoom is folded into the device pixel ratio, so it cancels out of the calculation. Pinch zoom on a phone is corrected separately. The visitor is still warned when they are not at 100%, because a zoomed page can crop the circle.

= Does it work in Persian or Arabic? =

Yes. The layout is right-to-left aware and digits can be rendered as Persian or Arabic-Indic numerals, automatically or by choice.

= Does it need WooCommerce? =

No. WooCommerce is optional; when it is active the JSON-LD picks up the store currency.

= Can each page look different? =

Yes. The block, the Elementor widget and the WPBakery element can each override the steps, the wording, the call-to-action and the accent colour.

= Will the schema clash with my SEO plugin? =

On a product page the sizer references the Product node your store already publishes rather than emitting its own, and the questions are attached to that item instead of declaring the page an FAQPage. If your SEO plugin already outputs an FAQ block, turn the FAQ off under **Tools → Ring Sizer → Schema**.

== Screenshots ==

1. The guided flow, with the screen detected automatically.
2. Measuring with a ring on the screen.
3. The result step with size conversions.
4. The settings screen with its live preview.

== Changelog ==

= 1.0.0 =
* First release.

== Upgrade Notice ==

= 1.0.0 =
First release.
