How to set a manual selector for the cart drawer

This section can be found within the Widget placement page when the widget is set to be displayed on the cart page and drawer.

Placing the widget manually

Although Buunto will automatically detect the cart drawer in most themes, it may happen that you’re using a custom theme or simply it doesn’t recognize it in the one you’re currently using.

If that’s the case, you need to provide the location of a reference element in the cart drawer via a CSS selector, where you want to place the date picker relative to that element (Before/After the element or within the element at the beginning or the end.

Ensure you're providing a selector that always finds a single element. Here is an example of how to do this, but there is a multitude of cases. It might be a bit difficult to do if you don't have a technical background:

1. Open the cart drawer. We want to add the date picker below the cart items in our example.

2. With Google Chrome, we right-click on the cart items element and then click Inspect.

   

3. In the DOM inspector on the right, you should be able to find out if there are any classes or IDs on that element. In our case, we can see that we should be able to use the CartDrawer-Form ID as a unique way to identify that element. So our CSS selector is: #CartDrawer-Form

   

4. We can now set our CSS selector and then select the appropriate option for the Widget position.

   

5. Here is the final result

   

If you prefer, contact us, please contact our support team at support@buunto.com. We’ll be happy to set this up for you.