> For the complete documentation index, see [llms.txt](https://docs.maker.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maker.co/maker-greatstore/get-started/installation/woocommerce.md).

# WooCommerce

Add GreatStore to a WooCommerce shop, with product-page questions, on block or classic themes.

This guide is for WooCommerce **8.0 or later** on WordPress **6.3 or later**. WooCommerce runs inside your WordPress theme, so the steps depend on which kind you use:

* **Block themes**: edited in **Appearance → Editor**, with shop pages built from blocks. Twenty Twenty-Four, Twenty Twenty-Five, and WooCommerce's own block themes.
* **Classic themes**: shop pages built by the theme's templates. Storefront, and many established commercial shop themes.

## Add the script

Adding the script is the same as for any WordPress site: use a plugin, or a few lines in your child theme. Follow [Add the script](/maker-greatstore/get-started/installation/wordpress.md#add-the-script) on the WordPress page, then come back here.

## Add a chat link

For a "Chat with us" item in your header menu or footer, follow [Add a way to open the chat](/maker-greatstore/get-started/installation/wordpress.md#add-a-way-to-open-the-chat). It works the same in a shop.

## Ask about a product

On a product page, a button that asks about *that* product gets shoppers talking faster than a generic one.

### Block themes

{% stepper %}
{% step %}

#### Open the product template

Go to **Appearance → Editor → Templates → Single Product**.
{% endstep %}

{% step %}

#### Add a Custom HTML block

Below the **Add to Cart with Options** block, add a **Custom HTML** block and paste:

```html
<button
  type="button"
  class="wp-element-button"
  onclick="GreatStore.sendMessage('Tell me more about ' + document.querySelector('.wp-block-post-title').textContent.trim())"
>
  Ask about this product
</button>
```

{% endstep %}

{% step %}

#### Save

Click **Save**. The button appears on every product page and asks about whichever product is showing.
{% endstep %}
{% endstepper %}

### Classic themes

Add this to your **child theme's** `functions.php`, or as a PHP snippet in WPCode (**Code Snippets → + Add Snippet → Add Your Custom Code → PHP Snippet**). It places the button right after **Add to cart**:

```php
add_action( 'woocommerce_after_add_to_cart_button', function () {
	global $product;
	$message = sprintf( 'Tell me more about %s', $product->get_name() );
	printf(
		' <button type="button" class="button alt" onclick="%s">%s</button>',
		esc_attr( 'GreatStore.sendMessage(' . wp_json_encode( $message ) . ')' ),
		esc_html__( 'Ask about this product' )
	);
} );
```

## Tell the assistant what the shopper is viewing

With this in place, a shopper can ask "does this come in blue?" without naming the product. It works with both kinds of theme. Add it to `functions.php` or as a WPCode PHP snippet:

```php
add_action( 'wp_footer', function () {
	if ( ! is_product() ) {
		return;
	}
	$product = wc_get_product( get_queried_object_id() );
	if ( ! $product ) {
		return;
	}
	$context = sprintf(
		'Viewing: %s, %s, %s.',
		$product->get_name(),
		html_entity_decode( wp_strip_all_tags( wc_price( wc_get_price_to_display( $product ) ) ) ),
		$product->is_in_stock() ? 'in stock' : 'out of stock'
	);
	printf(
		'<script>window.addEventListener("load", function () { GreatStore.updateModelContext(%s); });</script>',
		wp_json_encode( $context )
	);
} );
```

## Keeping the chat off checkout

The script loads on every page, checkout included. To leave checkout undisturbed, use the theme-code route to add the script and skip it there:

```php
add_action( 'wp_enqueue_scripts', function () {
	if ( is_checkout() ) {
		return;
	}
	wp_enqueue_script(
		'greatstore',
		'https://{your-address}.greatstore.ai/embed.js',
		array(),
		null,
		array( 'strategy' => 'async' )
	);
} );
```

## Staging sites

The chat works on the **Website** address set under **Configure → Basic**. A staging copy of your shop has its own address, so add it under [Embed origins](/maker-greatstore/configure/security.md#embed-origins) before testing there.

## Troubleshooting

<details>

<summary>The chat doesn't appear, or opens only after scrolling</summary>

Caching and speed plugins are the usual cause. See the [WordPress troubleshooting](/maker-greatstore/get-started/installation/wordpress.md#troubleshooting) steps: clear the page cache, and exclude `greatstore.ai` from any "delay JavaScript" feature.

</details>

<details>

<summary>The "Ask about this product" button doesn't show up</summary>

On a **block theme**, check that you edited the **Single Product** template your products actually use; a product category can have its own template. On a **classic theme**, some themes replace WooCommerce's add-to-cart area and skip the hook the snippet uses; use the block-theme button in a **Custom HTML** widget, or ask your theme developer where add-to-cart is rendered.

</details>

<details>

<summary>The button sends a question with the wrong product name</summary>

On a **block theme**, the button reads the product title from the page. If your template has no **Product Title** block, or has more than one, replace the `document.querySelector(...)` part with the text you want sent.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.maker.co/maker-greatstore/get-started/installation/woocommerce.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.