When you embed Digistore24 Shopping Cart in your website, your customers gain the possibility of putting multiple products into the Shopping Cart before they 'proceed to checkout'. Using the Digistore24 order form, they pay for all products in the Cart with a single payment.
Below, we present an overview of the functionality, including installation guide, description of available options, as well as tips for the smooth functioning of the Shopping Cart feature on your website.
1. How the Digistore24 shopping cart works
Step 1: Customer clicks on one of your buy buttons
When someone clicks on the buy button, a confirmation message will appear indicating that the product has been added to the shopping cart. The subtotal and the number of products in the shopping cart are displayed. The customer can close the window in two ways: either by clicking on the button Continue shopping or by clicking on the cross in the upper right corner. More products can now be added to the cart in the same way. Finally, if the customer clicks the button Go to checkout, then they will be redirected to the Digistore24 order form.
Step 2: Show shopping cart in the purchase process
You can embed a shopping cart link (e.g. in your menu or as a shopping cart icon) into your page. If the customer then moves the mouse over this link (or this icon), the detailed view of the shopping cart will automatically appear. Customers using a smartphone or tablet need to tap the shopping cart link with their finger.
Step 3: Pay by clicking on the button Go to checkout
After clicking on the button Go to checkout, the Digistore24 order form will appear. This now displays all the goods that the customer has previously placed in the shopping cart. Now the customer can pay for these products in just one sales process.
2. Installing the Digistore24 shopping cart
Step 1: Embed the shopping cart onto your website
Insert the downloaded file into your WordPress account under Plugins > Install > Upload plugin, and make sure that the plugin is activated. After that, you can embed the shopping cart onto your page using the shortcode below. Insert the shortcode where you would insert normal text or HTML code.
Do not be surprised if you do not see the shopping cart on your website after completing this step. The shopping cart is already embedded onto your page, but it will not appear until you include the following links and use it on your website.
Step 2: Set up buy buttons
The buy URL for the shopping cart is as follows: https://www.digistore24.com/add/123 (123 stands for the product ID here).
If you use page builders such as OptimizePress, it is sufficient to embed this link with the product ID into your buttons, images or your text in the desired places.
Please always only use the classic HTML-a-tag for the buy link. Otherwise, Digistore24 will not recognize the buy button correctly.
Please assemble the link correctly, as demonstrated in the following examples:
Code for a text link:
<a href="https://www.digistore24.com/add/123">Link Text</a>
Code for an image link:
<a href="https://www.digistore24.com/add/123"><img src="button-image-url"/></a>
Please replace the placeholder URL_TO_BUTTON_IMAGE with the URL of the image you want to use for the image link.
Step 3: Embed shopping cart link/shopping cart button
You can embed a shopping cart link or button into your website that allows the customer to call up their current shopping cart status. If they move the mouse over it (or tap the link on a smartphone/tablet), the shopping cart window will appear.
Another URL is required for this link: https://www.digistore24.com/cart
If you use a page builder e.g. OptimizePress, you can take this link as it is and embed it into a button.
Please also assemble this link correctly, as demonstrated in the following examples:
<a href="https://www.digistore24.com/cart">Link Text</a>
Code for an image link:
<a href="https://www.digistore24.com/cart"><img src=URL_TO_BUTTON_IMAGE/></a>
Please replace the shortcode URL_TO_BUTTON_IMAGE with the URL of the image you want to use for the image link.
3. The settings options of the Digistore24 shopping cart
In the WordPress shortcode: [digistore_cart Option1 Option2]
If there are several settings options for an option, then place the settings options before an equals sign:
In WordPress Shortcode:
[digistore_cart Option1 Option2]
A concrete example of a WordPress shortcode that causes the Added to shopping cart message to appear at the bottom of the browser window:
Possible settings and the associated options
Determines where the info message Added to shopping cart is displayed.
top (default): The message is displayed right at the top of the browser window.
bottom: The message is displayed right at the bottom of the browser window.
Number (e.g. 50): The message is displayed with this number of pixels below the top of the browser window.
If set, then the bar with the checkout button will allways be shown fixed at the window border.
|brutto||All prices in the shopping cart are displayed with the VAT included. If not explicitly defined in the code or shortcode, the default setting for all other products is the setting of the first product in the shopping cart.|
|netto||All prices in the shopping cart are displayed as net prices plus VAT. If not explicitly defined in the code or shortcode, the default setting for all other products is the setting of the first product in the shopping cart.|
Selects the order form to be displayed after clicking on Go to checkout. If not explicitly defined in the code or shortcode, the default setting for all other products is the setting of the first product in the shopping cart.
To get an overview of the IDs of the order forms you have created, go to Account > Order forms in the vendor view.
|return_url=https://xyz||Defines where the customer is redirected when they click on the link Add more products on the order form. The HTTP referrer is used by default i.e. returned to the last accessed page.|
|thankyou_url=https://xyz||After the purchase the buyer is redirected to this url.|
|no_return_button||The link Add more products is hidden on the order form.|
|currency_symbol||Instead of using the currency abbreviation on the order form, the currency symbol is displayed (e.g. EUR → €).|
Defines whether and how upsells are displayed in the order flow.
Important: The free upsell flow must be activated for all the products listed. To do this, go to the tab Upsells in the product properties and set these options:
Here are several examples of possible settings options:
|upsell=any||Digistore24 selects the upsells from the first product in the cart that has upsells. This is the default setting.|
|upsell=1234||Displays the upsells of product 1234 after the initial purchase.|
After the initial purchase, it shows the upsells from product 12 if it is in the shopping cart. Otherwise, the upsells of product 34 are displayed if it is in the shopping cart etc. If none of the listed products have been placed into the cart by the customer, the upsells of the last product ID of the list are displayed (in this example, product ID 12). This ID can be a duplicate ID, but it doesn’t have to be.
|upsell=123,any,456||Displays the upsells of product 123 after the initial purchase, provided product 123 has been placed in the shopping cart by the customer; otherwise the upsells of any other product in the shopping cart (if upsells are available); and otherwise the upsells of product 456 (even if product 456 is not in the shopping cart, its upsells will be displayed after the initial purchase).|
|upsell=123,456,none||If product 123 is in the shopping cart, then the upsells of product 123 will be displayed after the initial purchase. If product 456 is in the shopping cart, then the upsells of product 456 will be displayed after the initial purchase. If none of the listed products have upsells, then no upsells will be displayed after the initial purchase and the customer will be forwarded directly to the thank you page.|
|upsell=none||Completely disables the display of upsells, regardless of whether the products in the shopping cart have upsells or not.|
|upsell=first||Only displays the upsells of the first product in the shopping cart. This is the default behaviour for sales that are not made using a shopping cart.|
|language=en||Changes the language to English. The language of the first product in the shopping cart is used by default. At the moment, possible languages are: en (English) and de (German)|
|orderform_as_popup||When the buyer clicks Go to checkout, the Digistore24 order form will open in a new window.|
tracking=’Your tracking key‘
Adds the specified tracking key to the purchase (just like the GET parameter ds24tr would otherwise do).
If the tracking key contains spaces, please use quotation marks (i.e. tracking=’my Key‘).
|currency=USD||The specified currency is used in the shopping cart. Possible values are: EUR, USD und CHF. For this shortcode to be effective, go to Account > Products and click on the pencil icon of the relevant product. Change to the tab Payment plans and in the Settings window you can activate your desired currency. In addition, you should have already created a payment plan in the respective currency. Otherwise, the currency is converted into other currencies using other payment plans at the exchange rate for that day. If you have not activated the corresponding currency in the tab Payment plans, then the currency is displayed in the shopping cart pop-up, but not when you move to the order form.|
|quantity_readonly||The buyer cannot change the quantity on the Digistore24 orderform. He also cannot remove products.|
|show_total_amount=some_name||Shows the total amount of the cart in the html elements with the given id or css class or name. E.g. add an html code like: <span class=”some_name”>0 USD</span> – 0 USD will always be replaced by the actual total amount of the cart. If the buyer changes products or quantities in the cart, the amount is updated automatically.|
|show_cart_items=some_name||Shows the contents of the cart in the html elements with the given id or css class or name. E.g. add an html code like: <div class=”some_name”></div> – it always shows the cart content and is automatically updated.|
|Add the discount voucher some_voucher_code to the order. The discount is applied on the order form. Make sure, that the discount voucher is valid for any product the user might add to the shopping cart.|
|theme=modern||Select a mordern theme for the cart display. To select the classic theme, use theme=classic or omit this parameter.|
digistoreCart("language=en netto tracking='campaign 1'");
In WordPress Shortcode:
[digistore_cart language=en netto tracking="campaign 1"]
4. Tips and tricks for the Digistore24 shopping cart
Tip 1: Adjust payment plans of all products to each other
If you sell products by subscription or installment payments, you must choose the same billing intervals, e.g. monthly or yearly. This results in a lower number of direct debits to the customer, which leads to greater satisfaction.
Otherwise Digistore24 selects the billing interval that is most frequently used:
Product 1 has annual payment (first interval) and monthly payment (subsequent intervals).
Product 2 has annual payment (first interval) and two-year payment (subsequent intervals).
Product 3 has a single payment only.
=> The buyer can only pay per year.
If the products have test periods, the shortest test periods of the selected products are used.
In order for the debits to be made at the same time, it must also be decided for all products (including single payments) whether VAT is included in the price or not.
You can set all these settings under Account > Products in the product details in the tab “Payment plans”.
Tip 2 (for your web designers): Permanently display windows
You can permanently display the various windows to make them easier to rearrange. To do this, add the following option to the URL with which the shopping cart was installed: ?ds24debug.
ds24cart_add( 123 ); // inserts product no. 123 to the shopping Cart
ds24cart_add( 123, 3 ); // inserts product no. 123 three times
To show the shopping cart, use ds24cart_show( button ).
<button onclick="return ds24cart_show(this);">Show shopping cart</button>