How to Add Alt Text to Product Images in Shopify and WooCommerce (No Developer Required)

Quick answer: In Shopify, alt text is added per image from the product’s media preview screen — go to Products, open a product, click a photo to open its preview, click Add alt text, type it, and click Save alt text (512 characters max, 125 or fewer recommended). In WooCommerce, there’s no separate “alt text” panel on the product screen at all — alt text lives in the WordPress Media Library’s Alt Text field, the same picker that opens when you click Set product image or Add product gallery images. Neither platform requires touching code or hiring a developer. Both are commonly skipped anyway, because neither one makes the field obvious.

This article is general accessibility information, not legal advice. Meeting WCAG 2.1 AA does not guarantee legal compliance with the ADA or any other law. Consult qualified counsel for legal risk questions.

Why this is worth five minutes per product

WCAG Success Criterion 1.1.1 Non-text Content (Level A) requires that “all non-text content that is presented to the user has a text alternative that serves the equivalent purpose.” For a screen reader user, a product photo with no alt text is a gap in the page — no name, no description, nothing to indicate what’s being sold. The WebAIM Million 2026 report, an annual automated scan of the top one million home pages, found that 53.1% of home pages had at least one image missing alt text — one of the most common accessibility failures on the web, and one that costs nothing to fix once you know where the field actually is.

Quietramp’s own guide to writing alt text that passes a manual review covers what to actually type — decorative versus functional versus informative, and why “product image” or a filename doesn’t count. This article is the other half of that problem: the specific screen, in the specific admin panel, where that text actually goes.

Shopify: the media preview screen

Shopify’s own documentation gives the exact path:

1. From your Shopify admin, go to Products.
2. Click the name of the product you want to edit.
3. On the product details page, click a product photo to open its Preview media page.
4. Click Add alt text.
5. Type the alt text, then click Save alt text.
6. Click the X to exit the preview page.

This is per-image, not per-product — a product with six gallery photos needs alt text set on each one individually if each shows something different (a front view, a close-up of stitching, a size comparison). Shopify caps alt text at 512 characters but recommends 125 or fewer, which matches general screen-reader guidance to keep image descriptions brief rather than exhaustive.

For stores with a large catalog, re-entering alt text one image at a time isn’t realistic. Shopify’s documentation also confirms a bulk path: alt text can be included as a column in a product CSV file and uploaded through the same Products import screen used for bulk price or inventory updates — worth using if you’re clearing a backlog of untagged images rather than fixing them as you go.

WooCommerce: it’s the Media Library, not the product screen

This is the part that trips people up, because WooCommerce’s own product image documentation doesn’t walk through it directly. Product photos in WooCommerce are added from WooCommerce > Products, editing a product, and using two boxes in the right-hand sidebar:

• Product Image — click Set product image for the single main photo.
• Product gallery — click Add product gallery images for additional photos, which can be reordered by dragging and removed by hovering over a thumbnail and clicking the red X.

Both buttons open the same thing: the standard WordPress Media Library picker. That’s where alt text actually lives — not on the product edit screen itself. According to WordPress’s own accessibility team documentation, “an alternative text can be inserted in the Alt Text-field” in the Media Library’s attachment details panel, which appears when you select or upload an image there. Click into that field, either while adding the photo to a product or later via Media > Library, type the description, and it’s saved to that image file.

That last point matters for troubleshooting: since alt text belongs to the media attachment, not the product, editing it later (via Media > Library, selecting the image, and updating Alt Text) updates it everywhere that photo is used — including on the product page — without needing to re-open every product it appears on.

One gap worth naming plainly: WooCommerce’s own documentation gives explicit alt text guidance for video posters in a product gallery — “give the poster alt text so screen readers can describe the video; without it, WooCommerce uses the video’s title, for example ‘Video: Backpack side pockets’” — but says nothing about alt text for ordinary product photos in the same document. The field exists and works the same way for both; it’s just under-documented for the more common case.

A mistake specific to WooCommerce stores

WordPress’s guidance is explicit about what happens if the field is left blank: “if an alt attribute is not inserted in the Media Library, this will be interpreted as alt=\"\" in the front end” — an empty string, which is the correct markup for a genuinely decorative image, but wrong for a product photo that’s the only thing on the page identifying what’s for sale. The handbook’s guidance for decorative images is the same principle in reverse — “give any decorative images an empty alt attribute,” using CSS instead of an <img> tag where possible for things like dividers or ornamental icons — which is a useful check in the other direction: if an image genuinely adds nothing (a spacer graphic, a repeated background flourish), leaving it out of the accessibility tree entirely is correct, not an oversight to fix.

A separate, common WooCommerce pattern worth checking for: some stores or plugins auto-fill every gallery image’s alt text with the product title, which technically fills the field but produces identical text across six different photos of the same item — better than nothing, but not a real description of what’s actually different between a front view and a close-up. If your alt text is auto-generated, spot-check a product with multiple angles before assuming it’s done.

FAQ

Does alt text on a product image affect SEO too? It can — search engines use alt text as a signal for image search relevance — but that’s a secondary benefit. The field exists for accessibility first; treat it as one, not a keyword-stuffing opportunity, since dense or repeated alt text is worse for screen reader users without meaningfully helping search ranking.

Do I need alt text on every single product photo, including extra angles? Yes, if each photo shows something a shopper would actually look at separately — a size comparison, a stitching detail, a color close-up. A single “Blue canvas tote bag” alt text repeated on all six angles of the same product is more useful than nothing, but doesn’t tell a screen reader user which photo is the close-up they might specifically want.

Can a plugin or app handle this automatically? Several third-party apps generate alt text automatically, including AI-based ones. That can be a reasonable starting point for a large catalog, but automated text still needs the same manual spot-check any alt text does — see our guide on what a manual alt text review actually catches that automated generation can’t.

Get a full audit, not just an image-by-image check

Alt text is one field among dozens an audit checks — and knowing where the field lives doesn’t tell you whether the text in it is actually useful. Quietramp’s audits pair an automated scan with a manual review of exactly this kind of gap, delivered as a prioritized, developer-actionable PDF report. See a real sample report or check pricing — $890 one-time, $99/month for ongoing re-checks after fixes ship.

---

This is educational content about technical accessibility practice, not legal advice. Meeting WCAG 2.1 AA does not guarantee legal compliance with the ADA or any other law, and nothing here should be read as a compliance guarantee. Consult qualified counsel for legal risk questions.

Quietramp is an AI-operated agency with human oversight — this article was drafted by our Content/SEO writer role.