{"id":481,"date":"2022-07-11T05:26:18","date_gmt":"2022-07-11T05:26:18","guid":{"rendered":"http:\/\/docs.eriktailor.hu\/flatbook\/docs\/woocommerce\/shop-section\/"},"modified":"2022-07-11T05:47:11","modified_gmt":"2022-07-11T05:47:11","slug":"shop-section","status":"publish","type":"docs","link":"https:\/\/docs.eriktailor.hu\/flatbook\/docs\/woocommerce\/shop-section\/","title":{"rendered":"Shop Shortcodes"},"content":{"rendered":"\n<p>To create a WooCommerce section within the Elementor builder (for example a section with Featured Products), you will have to use the WooCommerce&#8217;s <a rel=\"noreferrer noopener\" href=\"https:\/\/woocommerce.com\/document\/woocommerce-shortcodes\/\" target=\"_blank\">default shortcodes<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Product shortcodes<\/h3>\n\n\n\n<p>With the products shortcode, you can display a short list of filtered product items, for example:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>[featured_products]<\/code> &#8211; displays products marked as &#8220;Featured&#8221; <\/li><li><code>[sale_products]<\/code> &#8211; displays the products on sale<\/li><li><code>[best_selling_products]<\/code> &#8211; displays your best selling products<\/li><li><code>[recent_products]<\/code> &#8211; displays the most recent products<\/li><li><code>[top_rated_products]<\/code> &#8211; displays products with the best rating<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Product attributes<\/h3>\n\n\n\n<p>Besides the base product shortcode above, you can add attributes to them, for example:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>limit<\/code> &#8211; the number of products to display<\/li><li><code>columns<\/code> &#8211; the number of columns to display<\/li><li><code>paginate<\/code> &#8211; toggles pagination on if added<\/li><li><code>category <\/code>&#8211; comma-separated list of category slugs<\/li><li><code>tag <\/code>&#8211; comma-separated list of tag slugs<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Note: <\/strong>There are many more attributes, please read the <a rel=\"noreferrer noopener\" href=\"https:\/\/woocommerce.com\/document\/woocommerce-shortcodes\/\" target=\"_blank\">shortcodes documentation<\/a> for more.<\/p><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Example<\/h3>\n\n\n\n<p>Let&#8217;s say, you would like to display the latest products in a 5 columns grid with a maximum of 5 items.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Open the selected page with Elementor<\/li><li>Add a <strong>Shortcode<\/strong> widget to the desired area<\/li><li>Add the following shortcode: <code>[recent_products limit=\"5\" columns=\"5\"]<\/code><\/li><li>Click <strong>Apply<\/strong> then <strong>Update<\/strong> to save.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"315\" src=\"http:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-11-at-7.46.24-1024x315.png\" alt=\"\" class=\"wp-image-499\" srcset=\"https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-11-at-7.46.24-1024x315.png 1024w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-11-at-7.46.24-300x92.png 300w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-11-at-7.46.24-768x236.png 768w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-11-at-7.46.24-1536x472.png 1536w, https:\/\/docs.eriktailor.hu\/flatbook\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-11-at-7.46.24.png 1789w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"featured_media":0,"parent":251,"menu_order":2,"comment_status":"open","ping_status":"closed","template":"","docs_category":[],"class_list":["post-481","docs","type-docs","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/docs\/481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/comments?post=481"}],"version-history":[{"count":11,"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/docs\/481\/revisions"}],"predecessor-version":[{"id":500,"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/docs\/481\/revisions\/500"}],"up":[{"embeddable":true,"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/docs\/251"}],"wp:attachment":[{"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/media?parent=481"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/docs.eriktailor.hu\/flatbook\/wp-json\/wp\/v2\/docs_category?post=481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}