{"id":5818,"date":"2024-04-14T20:27:30","date_gmt":"2024-04-14T12:27:30","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5818"},"modified":"2024-04-14T20:27:30","modified_gmt":"2024-04-14T12:27:30","slug":"include-in-shopping-cart","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/include-in-shopping-cart\/","title":{"rendered":"Include in shopping cart"},"content":{"rendered":"\n
\n

An exclusive component that you can insert on a product page or within a Collection list linked to the merchandise<\/strong> category is the Include in shopping cart<\/strong> component. This component comprises of 2 buttons that allow users to either insert a product into their shopping cart or proceed directly to checkout.<\/p>\n

Throughout this tutorial:<\/strong><\/p>\n

    \n
  1. Shopping cart addition component<\/li>\n
  2. Shopping cart addition configurations<\/li>\n
  3. Breakdown of the shopping cart addition element<\/li>\n<\/ol>\n

    Include in shopping cart feature<\/strong><\/h2>\n

    The Include in shopping cart<\/strong> feature resides in the Insert panel<\/strong> under Online Commerce<\/strong>. You can append an Include in shopping cart<\/strong> feature to your product page or in a Collection list linked to the merchandise Collection from the Insert panel<\/strong> or through Rapid find<\/strong> (CMD\/CTRL+E).<\/p>\n

    \n
    <\/div>
    Insert an Include in shopping cart button from the Insert panel.<\/figcaption><\/figure>\n

    Include in shopping cart configurations<\/strong><\/h2>\n

    You have the option to personalize the Include in shopping cart<\/strong> component in the component settings panel.<\/p>\n

    \n
    <\/div>
    \u200d\u200dInclude in shopping cart configurations<\/em><\/figcaption><\/figure>\n

    Condition<\/strong><\/h3>\n

    Switch between the three conditions (standard<\/strong>, out of stock<\/strong>, issue<\/strong>) of the include in shopping cart component to design each condition distinctly.<\/p>\n

    Amount<\/strong><\/h3>\n

    This is activated by default. You can deactivate the amount field to conceal the amount input field from the include in shopping cart wrapper.<\/p>\n

    Include in shopping cart<\/strong><\/h3>\n

    This is activated by default. You can deactivate including in shopping cart to hide the button from the include in shopping cart wrapper.<\/p>\n

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

    This is activated by default. You can deactivate purchase now to hide the button from the include in shopping cart wrapper.<\/p>\n

    Note<\/strong>: Purchase now currently functions only with Stripe as your payment service provider (the provider that accepts payment from your site’s customers). If Stripe is not linked – the Purchase now button will be concealed on the published site.<\/p><\/blockquote>\n

    Structure of the include in shopping cart component<\/strong><\/h2>\n

    Many elements make up the Include in shopping cart<\/strong> component. Each condition has its own set of elements. Discover what they are and how you can adjust them.<\/p>\n

    Standard condition<\/strong><\/h4>\n

    This is the default view for shoppers. The standard condition contains the following components:<\/p>\n

      \n
    • Choice list<\/strong> \u2014 this is a set of dropdowns or buttons that display for products with variants and enable users to choose which variant they wish to insert into their cart.<\/li>\n
    • Amount<\/strong> \u2014 this enables users to indicate how many of that product they want to insert into their cart. You can hide the amount in the Include in shopping cart configurations<\/strong>. Read more.<\/li>\n
    • Include in shopping cart button<\/strong> \u2014 this is the actual “include in shopping cart” button that you can design and customize. Pick the “submit button” to modify the standard text<\/strong> and expectant text<\/strong> in the Include in shopping cart button configurations<\/strong>. When a shopper taps the Include in shopping cart<\/strong> button – it will add the product to the shopper\u2019s cart where they can later complete the purchase.<\/li>\n
    • Purchase now button \u2014 <\/strong>this is a \u201cpurchase now\u201d button that you can design and customize. Select the Purchase now<\/strong> button to update the standard text<\/strong> in the Purchase now button configurations<\/strong>. The Purchase now<\/strong> button guides a shopper directly to the checkout page to finalize their purchase \u2014 letting them checkout in fewer steps.<\/li>\n<\/ul>\n
      \n
      <\/div>\n<\/figure>\n
      Choice list<\/h5>\n

      Products with variants offer various options to let customers choose different variants of a product. While having our Choice List<\/strong> element selected, we have multiple options to customize our list:<\/p>\n

      \n
      <\/div>\n<\/figure>\n
        \n
      • Variant selector<\/li>\n
      • Select default variant<\/li>\n<\/ul>\n
        \n
        <\/div>\n<\/figure>\n

        Employing Select<\/strong> lets you exhibit your product variant options in dropdown elements, whereas using Buttons<\/strong> allows you to show your product variant option in selectable button choices.<\/p>\n

        And you can specify a variant that each product can start with utilizing Select default variant<\/strong>.<\/p>\n

        Note<\/strong>: if your Include in shopping cart<\/strong> component within your project lacks the Purchase now<\/strong> button or Variant selector <\/strong>– re-insert a new Include in shopping cart <\/strong>component to your project within the Designer.<\/p><\/blockquote>\n

        Out of stock condition<\/strong><\/h4>\n

        This is the message that will display instead of the include in shopping cart button when the item is out of stock. You can tailor this message and style it when you\u2019re viewing this condition in the Designer.<\/p>\n

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

        Issue condition<\/strong><\/h4>\n

        An issue message may emerge when the system struggles to insert a product into the cart. You can personalize and design issue messages. To adjust the issue messages, choose the Issue message<\/strong> text block to access the Issue message configurations<\/strong>. Choose each message in the configuration to see it on the canvas. To modify the message, click the pencil icon<\/strong> that pops up next to the message in the configuration when you hover over it.<\/p>\n

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

        \u200d<\/p>\n

        \u200d<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Get an overview of the add-to-cart component and settings.","protected":false},"author":2,"featured_media":5149,"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":[297],"tags":[],"class_list":{"0":"post-5818","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-ecommerce-user-accounts","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5818","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=5818"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5818\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5333"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5818"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5818"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}