{"id":4589,"date":"2022-02-13T06:22:43","date_gmt":"2022-02-13T06:22:43","guid":{"rendered":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/?p=4589"},"modified":"2024-11-06T18:30:03","modified_gmt":"2024-11-06T18:30:03","slug":"add-to-cart-element","status":"publish","type":"post","link":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/2022\/02\/13\/add-to-cart-element\/","title":{"rendered":"Add To Cart Element"},"content":{"rendered":"\n<p>The Add To Cart Element allows you to add an Add To Cart section in your WooCommerce Product Layout Section.<\/p>\n\n\n\n<p>There is a huge variety of styling and configuration options, as can be seen in the options below, yet for a simple product, the defaults will likely be enough.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">How to create add to cart element?<\/h4>\n\n\n\n<p><strong>Step 1<\/strong>&nbsp;\u2013&nbsp;Please create, or choose the Column into which you want to add your element.<\/p>\n\n\n\n<p><strong>Step 2<\/strong>&nbsp;\u2013 Select UDesign Add To Cart Element from the Element List.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"819\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2022\/02\/6-2-1.png\" alt=\"\" class=\"wp-image-4668\"\/><\/figure>\n\n\n\n<p><strong>Step 3<\/strong>&nbsp;\u2013 Configure the UDesign Add To Cart Element to some place into your content.&nbsp;<\/p>\n\n\n\n<p><strong>Step 4<\/strong>&nbsp;\u2013 After you finish your configuration, don\u2019t forget to save all changes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Element Content Options<\/h4>\n\n\n\n<p><strong>Add To Cart Sticky<\/strong>&nbsp;\u2013&nbsp;If you set this option, your \u2018add to cart form\u2019 would be sticky in your single product page. It helps mobile users.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2022\/02\/sticky-cart-1024x451.jpg\" alt=\"sticky add to cart\" class=\"wp-image-10967\" srcset=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2022\/02\/sticky-cart-1024x451.jpg 1024w, https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2022\/02\/sticky-cart-768x338.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Use single product builder <strong>add to cart<\/strong> widget to add sticky add to cart bar<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Element Style Options<\/h4>\n\n\n\n<p>You can change styles in style editor.<\/p>\n\n\n\n<p><strong>Button:<\/strong>&nbsp;It consists of typography, border and text colour. It provides you everything friendly. You can build a single product page as you like.<\/p>\n\n\n\n<p><strong>Quantity:<\/strong>&nbsp;Select whether you want to custom style the quantity field.<\/p>\n\n\n\n<p><strong>Variation:<\/strong>&nbsp;You can control style of variations.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Add To Cart Element allows you to add an Add To Cart section in your WooCommerce Product Layout Section. There is a huge variety of styling and configuration options, as can be seen in the options below, yet for a simple product, the defaults will likely be enough. How to create add to cart [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[29],"tags":[],"class_list":["post-4589","post","type-post","status-publish","format-standard","hentry","category-single-product-builder"],"_links":{"self":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/4589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/comments?post=4589"}],"version-history":[{"count":1,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/4589\/revisions"}],"predecessor-version":[{"id":10970,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/4589\/revisions\/10970"}],"wp:attachment":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/media?parent=4589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/categories?post=4589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/tags?post=4589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}