{"id":5963,"date":"2024-04-14T12:52:28","date_gmt":"2024-04-14T04:52:28","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5963"},"modified":"2024-04-14T12:52:28","modified_gmt":"2024-04-14T04:52:28","slug":"review-of-cart-items","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/review-of-cart-items\/","title":{"rendered":"Review of Cart Items"},"content":{"rendered":"\n
\n

The shopping cart module enables you to include a cart feature in your project. You have the option to modify the appearance and style of the cart button, which not only allows online customers to access their cart but also provides them with a quick summary of the number of products in their cart along with the total amount.<\/p>\n

You also have the ability to personalize and design the cart itself. This is where online shoppers can manage the contents of their cart and proceed with their purchases when they are ready.<\/p>\n

Topics covered in this guide<\/strong><\/h5>\n
    \n
  1. Introduction to the cart module<\/li>\n
  2. Understanding the cart button<\/li>\n
  3. Exploring the shopping cart<\/li>\n<\/ol>\n

    Introduction to the cart module<\/h2>\n

    You can incorporate a cart module either via the add panel or by utilizing Quick find (CMD\/CTRL+E).<\/p>\n

    \n
    \"Add<\/div>
    Incorporate a cart using the Add panel.<\/figcaption><\/figure>\n<\/div>\n

    wrapper Form. The container for the form holds the list of items in the shopping cart<\/strong>, the individual cart items<\/strong>, and the actions for completing the purchase<\/strong>. You have the flexibility to personalize and design these containers and their corresponding elements. Additionally, the shopping cart features messages for when it is empty<\/strong> or encounters an error<\/strong>, which are also customizable.<\/p>\n

    \n
    <\/div>\n<\/figure>\n

    Important information<\/strong>: Certain items cannot be deleted from the shopping cart to maintain its functionality.<\/p><\/blockquote>\n

    Items in the Cart<\/strong><\/h3>\n

    This section displays a list that is linked to the products collection and showcases the items that have been added to the shopping cart. With some exceptions, you can modify the layout and appearance of these cart item listings.<\/p>\n

    Individual Cart Items<\/strong><\/h3>\n

    This section exhibits the total amount for the items in the cart. You can replicate this container and customize it to display the total number of items as well.<\/p>\n

    Useful tip<\/strong>: Any hyperlink within the cart item section can be linked to the total amount or quantity through the settings available in the Element panel.<\/p><\/blockquote>\n

    Purchase Actions<\/strong><\/h3>\n

    The Purchase Actions<\/strong> container enables users to finalize their orders. By default, it includes the Checkout button<\/strong> and the Web payments button<\/strong>, both of which you can tailor in the Element settings panel<\/strong>. You also have the option to incorporate a PayPal button<\/strong> from the Add panel<\/strong>.<\/p>\n

    Note: In case your store exclusively uses PayPal, the Checkout button<\/strong> within the shopping cart will be automatically hidden on the live site, as the PayPal checkout<\/strong> involves a distinct page.<\/p><\/blockquote>\n

    Find out more about Web Payments and PayPal checkout.<\/p>\n

    Settings for the Shopping Cart Wrapper<\/strong><\/h3>\n

    To modify and personalize the shopping cart, select the cart on the design canvas, then access the cart from the Cart wrapper settings<\/strong> in the Element settings panel<\/strong> (D). Here, you can select the type of cart<\/strong>, the transition<\/strong> and duration<\/strong> of the opening and closing animations, and the number of items displayed in the cart preview<\/strong>. You can also specify if you want to automatically open the cart when a new product is added<\/strong> to it. Additionally, you can style the different states of the cart separately.<\/p>\n

    \n
    \"Edit<\/div>\n<\/figure>\n

    Access the Shopping Cart<\/strong><\/h3>\n

    Open or close the shopping cart to view and make changes to the cart wrapper.<\/p>\n

    Kind of Cart<\/strong><\/h3>\n

    Select from the available types of shopping carts:<\/p>\n

      \n
    • Modal<\/strong> (default) \u2014 to display the cart as a popup in the center of the page<\/li>\n
    • Sidebar-left<\/strong> \u2014 to show the cart in a left sidebar<\/li>\n
    • Sidebar-right<\/strong> \u2014 to show the cart in a right sidebar<\/li>\n
    • Dropdown<\/strong> \u2014 to open the cart as a dropdown directly beneath the cart button. With this cart style, you can also specify the alignment of the cart to the left<\/strong> or right<\/strong> of the cart button. You can determine whether the cart triggers<\/strong> to the left<\/strong> or right<\/strong> when clicked<\/strong> or hovered<\/strong>.<\/li>\n<\/ul>\n

      Transition style<\/strong><\/h3>\n

      Choose the transition style<\/strong>, the way in which animations are executed when the shopping cart opens and closes. The default transition is \u201cEase out quad.\u201d<\/p>\n

      Duration of Animation<\/strong><\/h3>\n

      Set the duration<\/strong> of the animation in milliseconds (ms). The default duration is \u201c300ms.\u201d<\/p>\n

      Auto-Open upon Product Addition<\/strong><\/h3>\n

      Mark this checkbox if you prefer the shopping cart to automatically open each time a new product is added to the cart.<\/p>\n

      Status<\/strong><\/h3>\n

      Switch between the various states of the shopping cart to customize and adjust each of them.<\/p>\n

        \n
      • Default<\/strong>\u00a0\u2014 to view and style the shopping cart when it contains items. You’ll see sample items in the Designer, simplifying the styling of the default shopping cart state.<\/li>\n
      • Empty<\/strong> \u2014 to view and personalize the appearance of the shopping cart when it’s devoid of items.<\/li>\n
      • Error<\/strong> \u2014 to view and personalize error messages that might appear during checkout failures. Choose the Error message<\/strong> block to access its settings. Click on the pencil icon<\/strong> that appears next to the message in the setting to edit it.<\/li>\n<\/ul>\n
        \n
        <\/div>\n<\/figure>\n

        You can revert to the default<\/strong> error messages from the error message editor.<\/p>\n

        \n
        <\/div>\n<\/figure>\n

        Preview Selection<\/strong><\/h3>\n

        Determine the number of items visible in the shopping cart. Options include displaying a single item or up to 15 items. The default setting is \u201c3\u201d items.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Customize the cart button and cart wrapper \u2014 an overview of the cart component in Webflow Ecommerce.","protected":false},"author":2,"featured_media":5320,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[290],"tags":[],"class_list":{"0":"post-5963","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5963","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5963"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5963\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5323"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}