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”.
Legacy 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.
Product Images
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:
Shopping Cart
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.
Additional Features/Settings
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 compare at price, use "cc-cart-row-prod-compare"
To display the product savings, use "cc-cart-row-prod-saving"
To display the saving percentage, use "cc-cart-row-prod-saving-perc"
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 to note:
These additional elements are displayed “per product” in the cart.
The calculations are done as follows:
 |  |
Search for the column with class col-sm-9 and replace it with col-9
Search for the column with class col-sm-3 and replace it with col-3
In the CSS set padding and margin to 1px on cc-cart-container
In the CSS set cc-cart-row to font-size:13px on @media (max-width:480px)
Set the text to align left it already isn't
Side Cart / Drawer Cart
Several of our pages will have a side cart (also known as drawer cart) available within the header element. A side cart contains an order summary with buttons that ease navigation to the cart page or 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.
By clicking on the shopping cart icon on the top menu you will have visibility of side cart, making it easier to tailor to your needs.
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.