Skip to main content

Shortcodes

CartPops shortcodes make it easier to integrate CartPops in your theme, and create a seemless experience for your customer.

Here's a list of included shortcodes:

Cart Shortcode​

The Cart shortcode is an icon that displays the number of items in the cart along with a few other options. It's simliar to how themes display the cart in the menu, but it's more flexible.

[cartpops_cart_launcher subtotal="" indicator="" icon="" indicator_hide_empty=""]

Cart Shortcode options​

The shortcode [cartpops_cart_launcher] has the following options:

ParameterTypeDefaultDescription
iconstringcpops-icon-shopping-cart-lineAn icon that will be displayed. You can find list of icons here. You can also use your own icon by passing your own string, check out this tutorial for more instructions.
subtotalbooleantrueShow or hide the total
indicatorstringbubbleSet the indicator type, choose from none, bubble or plain
indicator_hide_emptybooleanfalseHide or show the indicator when the cart is empty

Cart Shortcode icons​

Here’s a list of all the available icons.

note

We're still working on a visual representation of these icons. In the meantime, the easiest way to check icons is by using the icon paremeter in your shortcode and trying them out one by one. Please refer to the examples below to learn how to use these parameters.

  • 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

Cart Shortcode examples that you can copy and paste​

👇 Default shortcode​

[cartpops_cart_launcher]

👇 With no indicator and no subtotal​

[cartpops_cart_launcher subtotal="false" indicator="none"]

👇 With no indicator and subtotal​

[cartpops_cart_launcher indicator="none"]

How to use a custom icon with the Cart Shortcode​

To use a custom icon, you need to pass your own string to the icon parameter. This can be anyting, as long as it's not a string that conflicts with the icons in this list.

caution

This is a guide for more advanced users. We don't provide support for custom icons as it's 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.

1. Add the following shortcode.​

[cartpops_cart_launcher icon="my-custom-icon"]

This will output the following HTML on the frontend. Keep in mind though that this is an excerpt of all the HTML that will be outputted.

As you can see, this now includes your custom class my-custom-icon.

<i class="my-custom-icon" aria-hidden="true"></i>Copy to Clipboard

2. Add the following CSS to your theme​

Make sure to replace the URL to your custom icon path. You can play around with the height and width to your desire.

.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;
}