{"title":"Phlox Recent Products Element","id":56356,"link":"https:\/\/env.averta.net\/en\/step\/phlox-recent-products-element\/","parent":false,"content":"<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/recent-products-phlox.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-56430\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/recent-products-phlox-904x1024.png\" alt=\"\" width=\"450\" height=\"510\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/recent-products-phlox-904x1024.png 904w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/recent-products-phlox-265x300.png 265w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/recent-products-phlox-768x870.png 768w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/recent-products-phlox-153x173.png 153w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/recent-products-phlox.png 1385w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/a>Almost all WordPress themes allow you to display your recent posts. Phlox has recent posts options, and?<strong>Recent Products Element <\/strong>to?showcase your products on an archive page. If you have an online shop, you can add this element to any page or post you want. In page builder, it includes various options to customize and you can simply edit the style of your recent products.<\/p>\n<div style=\"clear: both;\"><\/div>\n<h3>Video Tutorial<\/h3>\n<div style=\"position: relative; height: 0; padding-bottom: 56.25%;\"><iframe loading=\"lazy\" width=\"560\" height=\"315\" style=\"position: absolute; width: 100%; height: 100%; left: 0; display: block;\" src=\"https:\/\/www.youtube.com\/embed\/zavZMdAyEac?rel=0&amp;ecver=2\" frameborder=\"0\" encrypted-media=\"\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">?<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">?<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\"><\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\"><\/span><\/iframe><\/div>\n<hr style=\"clear: both;\" \/>\n<h3>Recent Products Options?in Elementor Page Builder<\/h3>\n<ol>\n<li>Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click the <b>Pages?<\/b>on the <b>Dashboard<\/b><\/li>\n<li>Click the <b>Add New<\/b><\/li>\n<li>Navigate to the top left hand of the WordPress text-box and find?<strong><a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-elementor-page-builder\/?b=55475,55475\" title=\"Getting Started with Elementor Page Builder\">Edit with Elementor<\/a>?<\/strong>button.<\/li>\n<li>Check out?<strong>Elements<\/strong><\/li>\n<li>Scroll down to?<strong>PHLOX &#8211; POSTS?<\/strong>section<\/li>\n<li>Choose <b>Recent Products<\/b><\/li>\n<\/ol>\n<p>After adding recent products to your post or page, you are able to customize it by available options:<\/p>\n<ul>\n<li>\n<h4>Layout<\/h4>\n<\/li>\n<\/ul>\n<h4>Layout<\/h4>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-products-layout-elementor.png\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-56359 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-products-layout-elementor.png\" alt=\"\" width=\"298\" height=\"591\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-products-layout-elementor.png 298w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-products-layout-elementor-151x300.png 151w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-products-layout-elementor-87x173.png 87w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/><\/a><\/p>\n<p>You are able to change the number of <strong>columns<\/strong> (up to 6) on desktop, tablet, and mobile.<\/p>\n<p>You are able to enable these features:<\/p>\n<ul>\n<li>Display product price<\/li>\n<li>Display sale badge<\/li>\n<li>Display post media (image, video, etc.)<\/li>\n<li>Display product title<\/li>\n<li>Display categories<\/li>\n<li>Display add to cart<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<div style=\"clear: both;\"><\/div>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-products-content-elementor.png\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-56360 size-full alignleft\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-products-content-elementor.png\" alt=\"\" width=\"324\" height=\"930\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-products-content-elementor.png 324w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-products-content-elementor-105x300.png 105w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-products-content-elementor-60x173.png 60w\" sizes=\"(max-width: 324px) 100vw, 324px\" \/><\/a><\/p>\n<ul>\n<li>\n<h4>Content<\/h4>\n<\/li>\n<\/ul>\n<h4>Query<\/h4>\n<p>In this section you are able to choose one or more than one <strong>C<\/strong><strong>ategory<\/strong> for recent products page. Or show the products of all available categories and specify them.<\/p>\n<p><strong>Number of posts to show<\/strong> is editable. Other options are?<strong>Exclude posts without media?<\/strong>and?<strong>custom post formats<\/strong>. If you exclude custom post formats, you can?<strong>Exclude quote and link post formats<\/strong>.<\/p>\n<p>Select?<strong>Order posts by?<\/strong>to make your recent products better:<\/p>\n<ul>\n<li><strong>Date:<\/strong> Order the posts by their publication date<\/li>\n<li><strong>Menu Order:<\/strong>?Order by page order<\/li>\n<li><strong>Title:?<\/strong>Order by post title<\/li>\n<li><strong>ID:?<\/strong>Order by post ID<\/li>\n<li><strong>Random:<\/strong> Your posts appear randomly<\/li>\n<li><strong>Comments:?<\/strong>Order the posts by number of comments<\/li>\n<li><strong>Date Modified:<\/strong>?Order by last modified date<\/li>\n<li><strong>Author:?<\/strong>Order by the posts&#8217; author<\/li>\n<li><strong>Inserted post IDs:?<\/strong>In the order you write post IDs on?<strong>Include posts<\/strong> section<\/li>\n<\/ul>\n<p>Post?<strong>Order?<\/strong>can be <strong>Descending<\/strong> or <strong>Ascending<\/strong>.<\/p>\n<p>In <strong>Include\/Exclude posts<\/strong> field, you can enter the the specific posts IDs that you want\/do not want to show.<\/p>\n<p>In <strong>Start offset<\/strong> section, you are able to set a number to choose?the number of posts you want to?skip, and start the output with the next posts.<\/p>\n<div style=\"clear: both;\">\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-products-style-elementor.png\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-56429 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-products-style-elementor.png\" alt=\"\" width=\"300\" height=\"861\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-products-style-elementor.png 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-products-style-elementor-105x300.png 105w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-products-style-elementor-60x173.png 60w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<ul>\n<li>\n<h4>Style<\/h4>\n<\/li>\n<\/ul>\n<h4>Image<\/h4>\n<p>This option is available only on Grid Layout, and allows you to?change the image aspect ratio to Horizontal 4:3, Horizontal 16:9, Square 1:1, and Vertical 3:4.<\/p>\n<p>Border radius to the images can be changed too.<\/p>\n<h4>Title<\/h4>\n<p>You can change the <strong>Color<\/strong>,?<strong>Typography<\/strong>,?and <strong>Spacing<\/strong>.<\/p>\n<h4>Category<\/h4>\n<p>Like previous options, you can?change the <strong>Color<\/strong>,?<strong>Typography<\/strong>,?and?<strong>Bottom<\/strong> <strong>space<\/strong><strong>?<\/strong>on?<strong>Normal?<\/strong>and?<strong>Hover<\/strong>.<\/p>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>Check out <a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-elementor-page-builder\/?b=55475,55475\" title=\"Getting Started with Elementor Page Builder\">this article<\/a> to know more about Advanced tab and start working with Elementor.<\/p>\n<\/div>\n","type":"solution"}