Shopping Cart Element
Last updated
Last updated
The shopping cart elements are used to dynamically display the customer’s chosen product details and the corresponding prices and amounts. The shopping cart element blocks are also sometimes known as an “order summary”, but the elements in the builder are labeled as a “Shopping Cart”.
The Legacy Shopping Cart element displays the chosen product details, including a per unit price* for each product in the table and can be found under the Forms section of the Building Block elements.
*See instructions below to make the price in the table reflect the quantity chosen.
This element comes with two options for displaying the quantity. You can remove either the quantity bubble or the entire quantity column (both parts).
If you decide to use the quantity column, this provides the customer with the ability to adjust the quantity of the products the chose by default, but these buttons can be removed if you don’t want the customer to adjust the quantity.
*The table can be adjusted so the price on the table reflects the quantity chosen.
To do so, open the code editor inside the page and perform a CTRL+F for “Price”.
Find the section that looks like the screenshot below where you can see the table headers for Item, Quantity (if not removed), and Price.
Go to the title within this table which is defined as “Price” and change “Price” to “Total”
Once that is changed, be sure to save the editor, then save the page and publish the funnel.
If product photos are stored in Checkout Champ CRM, when a shopping cart element with an image is added to a page, the CRM image will display on the page when the product is selected.
Make sure your base product has an image under CRM→Products .
Once your page is previewed or published and the product is selected, the image will be presented from CRM:
Our Shopping Cart element comes with all of the features and data of the Legacy cart. However, the Shopping Cart element has more flexibility when it comes to styling. The cart is built on Bootstrap rows and columns which allows users to utilize flex settings to change the layout across all screen sizes. It also allows users to change how the order information is displayed given users more options when designing pages.
The Shopping Cart also allows features not available in the Legacy Cart. By duplicating the default product price box and changing the associated CSS classes, you can also show customers the product compare at price, product savings and/or product savings percentage. Then you can style each new figure as needed, even adding additional text boxes to show any additional text you may want to show (as shown below).
To add these features to your cart, you would need to duplicate the default product price box and edit the CSS classes to display the desired data.
The additional CSS classes are below:
To display the product savings, use "cc-cart-row-prod-saving"
To display product savings with a minus sign before the currency sign, use “cc-negative-savings”.
Once added, you can style as needed using the font settings for each element.
Items of note:
These additional elements are displayed “per product” in the cart.
The “Compare At Price” is set on the Campaign Offer.
The calculations are done as follows:
“Product Savings” = Compare At Price - Offer Price
“Product Savings Percentage” = (Compare At Price - Offer Price) / Compare At Price X 100
Several of our pages will have a side cart (also called a drawer cart) available in the header element. Clicking the cart icon will open a side cart containing an order summary similar to our other order summaries with button to move to a cart page or go straight to your checkout page.
In order to style the details of this element, you will first need to add a Header element, then open the side cart.
Once the Header element has been added to the page, you may open the side cart by clicking on the shopping cart icon in the top menu of the builder. Clicking the shopping cart icon visible on the page itself will not open the side cart in the builder.
Once the side cart is open you are free to style as needed.
Clicking the shopping cart icon visible on the page’s Header element will open the Font Awesome icon selector allowing you to choose a different icon. Clicking that icon will not open the side cart.
To display the product compare at price, use "cc-cart-row-prod-compare"
To display the product saving percentage, use "cc-cart-row-prod-saving-perc"
