# Using WooCommerce Catalog with Checkout Page

{% hint style="info" %}
To sync your WooCommerce products, please follow [this](https://help.checkoutchamp.com/funnel-builder/redirect-storefront-to-checkoutchamp/woocommerce-plugin) article.
{% endhint %}

{% hint style="info" %}
Follow this article if hosting your own page and connecting to CheckoutChamp via Direct API.  If you are using CheckoutChamp hosted pages then please follow [this](https://help.checkoutchamp.com/funnel-builder/redirect-storefront-to-checkoutchamp/woocommerce-plugin/woocommerce-checkout-redirect) article.
{% endhint %}

***

To make a WooCommerce catalog page work with a CheckoutChamp shopping cart, you will add links to your checkout page Add To Cart buttons.\
\
The links will have the productId parameter in the query string equal to the desired CheckoutChamp campaign product ID.

Examples:

a link

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

a button img

```
<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">
```

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

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F8gpA57OEQq0tFQ3oCVYs%2Fimage.png?alt=media&#x26;token=1c8c40f8-b0a4-4c58-805a-175f613ba12d" 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="#usingwoocommercecatalogwithkonnektivecheckoutpage-directapi" id="usingwoocommercecatalogwithkonnektivecheckoutpage-directapi"></a>

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

```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));
}
```

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.

<br>