Page Comparison

...

Single Product Landers

To make a WooCommerce catalog page work with a Checkout Champ shopping cart, you will add links for your Checkout Champ checkout page to the buttons on your WooCommerce catalog.

The links will have the productId parameter in the query string equal to the desired campaign productId (productId is the Checkout Champ campaign product id found inside the campaign).

...

<a href="https://yourwebsite.com/checkout/?productId=12">Add>Buy to Cart<Now</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/addbuy-to-cartnow.png">

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

...

If your product has variants then use “products” instead of “productId”. Then add Add both productId and variantDetailId separated by a period, a colon, and the quantity.

<a href="https://yourwebsite.com/checkout/?products=12.142:1">Add>Buy to Cart<Now</a>

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

Multiple Product Shopping Sites

If a button or link is not tied to a specific product or variant (such as a shopping cart page or a catalog page with multiple product selections) then you will need to write script to read the product selection(s) before redirecting to the Checkout Champ checkout page.

<script>
function fetchProducts() {
    var redirectRoute = "https://checkout.mystoresite.com?products="
    var products = "";
    //write code specific to your page to find all selected products
    //add products to redirectRoute in the following format
    //productId.variant:quantity
    //productId = CheckoutChamp campaign product ID (required)
    //variant = CheckoutChamp variant ID (optional, skip the period if no variant)
    //quantity = the quantity ordered (required)
    //separate multiple products with a semi-colon
    //example:
    //products = "125.42:1;126:2";
    
    window.onbeforeunload = null;
    if (window.location !== window.parent.location) {
        //  Inside IFrame
        window.parent.location.href = redirectRoute + products;
    } else {
        window.location.href = redirectRoute + products;
    }
}
</script>
<a onclick="fetchProducts()">Buy Now</a>

Please view this guide for more details on building the redirect urls.

...