> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wpos.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# WooCommerce

> Restyle a WooCommerce store from chat: product pages, cart, checkout, and archives, without editing the theme's files.

export const YouTubeVideo = ({id, title, caption}) => {
  const [playing, setPlaying] = useState(false);
  return <div className="demo-embed">
      {playing ? <iframe src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1&rel=0&playsinline=1`} title={title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen /> : <button type="button" className="yt-facade" onClick={() => setPlaying(true)} aria-label={`Play video: ${title}`} title={title}>
          <span className="yt-facade-thumb" style={{
    backgroundImage: `url(https://i.ytimg.com/vi/${id}/maxresdefault.jpg)`
  }} aria-hidden="true" />
          <span className="yt-facade-play" aria-hidden="true">
            <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
              <path d="M8 5.14v13.72a1 1 0 0 0 1.52.85l10.97-6.86a1 1 0 0 0 0-1.7L9.52 4.29A1 1 0 0 0 8 5.14z" />
            </svg>
          </span>
        </button>}
      {caption ? <p className="demo-caption">{caption}</p> : null}
    </div>;
};

On a WooCommerce store, WPOS customizes the store's templates (product pages,
cart, checkout, and archives) from [chat](/operate/chat). It checks how the
store is actually built first, picks the approach that will take effect, and
tells you when an instruction would not have worked.

<YouTubeVideo id="EFYIhOj6shk" title="WPOS Takes Over WooCommerce" caption="One wrong instruction in, the right build out" />

## How WPOS changes store templates

<CardGroup cols={2}>
  <Card title="Classic themes" icon="layer-group">
    WPOS stores its template customizations itself and renders them at
    runtime, so it never edits the theme's files. Update or switch the theme
    and your customizations are unaffected.
  </Card>

  <Card title="Block themes" icon="cubes">
    WooCommerce renders these stores from block templates, so WPOS edits the
    block template, the same way the Site Editor does. A PHP template override
    would not take effect there.
  </Card>
</CardGroup>

## Conflict detection

Something else may already control the store template you want to change:
Elementor Pro's Theme Builder, Divi's Theme Builder, or a block theme's own
WooCommerce templates. WPOS detects this and warns you, instead of making a
change that would never show on the store.

## What it looks like

In the video, WPOS restyles the product page of a small coffee store:

* A larger product gallery, four trust badges under **Add to cart**, and
  related products in a four-column grid.
* Every style is namespaced, so the store restyle cannot leak into the rest of
  the site.
* A "ships in 2 to 3 days" notice for one product category, added as a snippet
  scoped to that category.
* WPOS points out, unprompted, that it invented the badge copy and that it had
  not seen the page render yet, because the store was in coming-soon mode.

```text theme={null}
Restyle the single product page: a larger gallery, trust
badges under Add to cart, related products in 4 columns.
```

<Tip>
  Before you publish, read any copy WPOS wrote for the store, such as delivery
  or returns promises, and check the page in the preview. The agent flags what
  it could not verify; the final check is yours.
</Tip>

<CardGroup cols={2}>
  <Card title="Page builders" icon="cubes" href="/operate/builders">
    How WPOS works in Gutenberg, Elementor, and Divi, with no lock-in.
  </Card>

  <Card title="Styling and brand" icon="palette" href="/operate/styling">
    Pin the brand so every page, including the store, stays on-brand.
  </Card>
</CardGroup>
