Example: Integration of Cart Widget in Wordpress

Open the page where you want to integrate the Cart Widget in your Wordpress backend.
Switch to the HTML editor.

Add the following stylesheet and script at the top:

<link rel="stylesheet" href="https://secure.affilibank.de/apps/widget/dist/affilicon.cart-widget.min.css">

<script src="https://secure.affilibank.de/apps/widget/dist/affilicon.cart-widget.min.js"></script>

Directly below add the script to configure your widget.

In our example we only used 'countryId', 'locale' and 'vendor'.
You can use more options, e.g. 'cartMaxWidth'. (You find all configuration options here: Shop Cart Widget technical integration.)
```
<script>
 window.affilicon = {
```
countryId: 'de',
locale: 'de_DE',
vendor: 'sebi'
}
```
</script>
```

Add an image of your product and a description of your product with regular HTML.

<img class="alignnone wp-image-14336 size-thumbnail" src="https://www.affilicon.net/wp-content/uploads/2017/03/umrella-dots-15833_640-150x150.jpg" alt="Pinker Regenschirm mit Punkten" width="150" height="150" />
<strong>Pinker Regenschirm (Beispiel-Produkt)</strong>
<p style="text-align: center;">39,90 €</p>

Combine your product with the "Add to cart"-Button. It is very important that you use the right product ID. Otherwise clicking the button adds the wrong product or no product at all to the shopping cart.
Your button ID is defined in your affilicon account. In our example the price on the website is '39,90 €'. Always keep in mind: the product price you configure in your account and the product price on your website has to be equal.
The price you have defined in your account will be shown in the shopping cart and will be charged.
```
<add-to-cart-button product-id="15558"></add-to-cart-button>
```
Repeat step 5 and 6 as often as you need, to add your products to your website.
Add the cart container at the bottom of your source code:
```
<cart-container></cart-container>
```

TechWiki

Example: Integration of Cart Widget in Wordpress

Analytics

Related content