Under construction
We’re still working on this knowledge base article and it’s subject to change. Thank you for understanding.
By default, the Drawer will always be available for your customers and customers can access it by clicking either the Floating Cart Launcher icon or by using the Cart Launcher shortcode.
Cart Launcher Shortcode
Options
The shortcode [cartpops_cart_launcher] has the following options:
[cartpops_cart_launcher subtotal="" indicator="" icon="" indicator_hide_empty=""]
Name | Type | Default | Description |
---|---|---|---|
icon | string | cpops-icon-shopping-cart-line | An icon that will be displayed. See below for a list of icons. You can also create your own icon by passing a string other than the default icons (see tutorial below) |
subtotal | boolean | true | Show or hide the total |
indicator | string | 'bubble' | Set the indicator type, choose from none , bubble , plain |
indicator_hide_empty | boolean | false | Hide or show the indicator when the cart is empty |
Icons shipped with CartPops
Here’s a list of all the available icons.
- cpops-icon-shopping-cart-outline
- cpops-icon-shopping-cart-line
- cpops-icon-shopping-cart-fill
- cpops-icon-shopping-cart-2-line
- cpops-icon-shopping-cart-2-fill
- cpops-icon-shopping-bag-outline
- cpops-icon-shopping-bag-line
- cpops-icon-shopping-bag-fill
- cpops-icon-shopping-bag-2-line
- cpops-icon-shopping-bag-2-fill
- cpops-icon-shopping-bag-3-fill
- cpops-icon-handbag-line
- cpops-icon-cpops-handbag-fill
Shortcode examples
The default shortcode
[cartpops_cart_launcher]
Simple cart with no indicator and subtotal
[cartpops_cart_launcher subtotal="false" indicator="none"]
Using a custom icon
Keep in mind
Custom development is outside the scope of our support. However, if you’re looking for more advanced support, our team is happy to refer you to a trusted source.
You can pass any string to the icon
parameter in the shortcode and it will be added as a class to the <i>
icon element.
Custom icon example
The shortcode
[cartpops_cart_launcher icon="my-custom-icon"]
The output of the icon will look like this:
<i class="my-custom-icon" aria-hidden="true"></i>
The CSS to create your icon
.cartpops-cart__toggle .cartpops-cart__container-icon i.my-custom-icon {
background: url('https://yourdomain.com/wp-content/uploads/icon.png');
height: 1.2rem;
width: 1.2rem;
display: block;
background-size: contain;
}
The end result
Floating Cart Launcher
The documentation for the Floating Cart Launcher will come soon.
Menu Cart Launcher
The documentation for the Floating Cart Launcher will come soon.