> For the complete documentation index, see [llms.txt](https://help.konnektive.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.konnektive.com/konnektive-crm/crm-setup/campaign-setup/landing-page-setup-form-code/wordpress-plugin-setup/using-woocommerce-catalog-with-funnelkonnekt-checkout-page.md).

# Using WooCommerce Catalog with Konnektive Checkout Page

{% hint style="warning" %}
If you are using form-code to connect your lander to Konnektive, please follow [this](/konnektive-crm/crm-setup/campaign-setup/landing-page-setup-form-code/wordpress-plugin-setup.md) article.
{% endhint %}

***

To make a WooCommerce catalog page work with a Konnektive shopping cart, you will add your Konnektive checkout page link(s) to the add to cart buttons inside WooCommerce.\
\
The links will need to have the productId parameter in the query string equal to the desired Konnektive campaign product ID.

Examples:

a link

```html
<a href="https://yourwebsite.com/checkout/?productId=12">Add to Cart</a>
```

a button img

{% code overflow="wrap" %}

```html
<img onclick="window.location='https://yourwebsite.com/checkout/?productId=12'" src="https://www.elshop.org/wp-content/plugins/Konnektive/resources/images/add-to-cart.png">
```

{% endcode %}

The link will take you to the checkout page with that product added to the shopping cart with quantity 1.

<figure><img src="/files/O7QqIj8pZ2LCWn4b3sOn" alt=""><figcaption></figcaption></figure>

**This method is intended to be used with a separate checkout page than your WooCommerce checkout page.**

### Direct API -  <a href="#direct-api" id="direct-api"></a>

You’ll need to add this script to the page parse the input and cache the products into the product array-

{% code overflow="wrap" lineNumbers="true" %}

```javascript
const urlParams = new URLSearchParams(location.search); if 
(urlParams.has("products")){ const urlProducts = 
urlParams.get("products").split(";"); for(const product of urlProducts){ const 
pos = product.indexOf("."); const splitChar = pos > 0 && pos < 
product.indexOf(":") ? "." : ":"; const productData = 
product.split(splitChar); myCart[productData[0]] = productData[1]; } 
sessionStorage.setItem("myCart",JSON.stringify(myCart)); }
```

{% endcode %}

When making the Import Order API call, parse myCart into product{i}\_id, product{i}\_qty, and variant{i}\_id (if applicable). Increment {i} for each product, starting with 1.