So Elementor have very recently released Another beta version of Elementor Pro And with that we now get an update to The beta version of the loop Builder Which allows us to start working with Some of the woocommerce features my Testing of this very briefly has been That it is still very very janky at this Point in time so as with all these Things don't use this on a live site Because there are still issues ongoing With it so be careful with it but let me Just quickly show you how you can get Started how you can use this and how we Can kind of see where it's going to go Now one of the things I do like about This is it means that we have less Reliance upon third-party tools when we Want to create our own custom shop Pages Our shop archive Pages product pages Loop designs and all those things will Now be included inside just Elemental Pro itself so that is a good step Forward let's take a look at how this Works and probably come across a few Issues as we go through the video now Before you can even test this out if you Want to test it out for yourself you're Going to need to come into the settings Section of Elementor into the Experiments and ensure that you have two Things enabled first of all you need to Make sure that you've got the flexbox Container enabled which is now in beta
So one step closer to actually being Released and you need to also make sure You've got the loop feature enabled once You've got those enabled and you've Saved everything you will then have Those features ready to start working so Let's go ahead into the template section And go into the theme buildup now There's two ways you can approach Creating the loop design you can do it Inside the theme Builder itself or when You insert the loop widget into a page Or a template you can then create the Template from inside there and it'll Kind of jump you into this process Anyway so I've kind of found that both Of them have a few issues sometimes They're not as reliable as you would Expect so be prepared to have issues at This point in time but let's go ahead First of all and create our Loop item We're going to click to add one in this Then takes us into Elementor itself now One of the things that still bugs me About this whole process is that we Don't get asked at the beginning of this To give this template a name it Basically just assigns it some Elemental Gibberish and to go ahead and change That at this point in case you forget Which I always do you need to come into The set in section and change this from Elemental Loop item number 317 which Means nothing so let's call this
Fruity woo Loops for no other reason Then I can okay so preview settings if We come into here we want to change this From viewing posts to product I'm going to change this and we'll say Let's just put something like sweater in That I know there's a product and they Call that and we come into the query and We change this to products Hit apply and that will then take us Back in and we can start working so now Once we've done that we're ready to Start creating our Loop template now Bear in mind this is just about one Individual card design like we've seen Many many times before and if you want To see my previous videos on the loop Check out the link in the description It's in there okay so this is now our Placeholder for our Loop item you can See our recommended options are Basically the same options you see Inside the single product template Section so your featured image which is The product image product title and so On so let's go ahead and start pulling Some of these items in let's grab the Featured image drop that into our Preview area and you can see there's our Sweater image and we can control this in Exactly the same way as we'd normally Expect you want to link this to the Product but I'll simply click on the Link say custom URL click on the dynamic
Tags and say post URL and that will now Connect that up to the product for you Which is always good practice anyway Let's go back to our Rubik's Cube now All our widgets Let's say we want to grab the product Title and drop that underneath that now Drops that in so we can quickly come in And we can style this a little bit if we Want to this is just picking up the Global styling so I'm not going to worry Too much about it so we'll say there's The actual details now let's go back and Do the same thing again so we can say We'll grab the product price drop that Underneath the sweater And for some reason that doesn't Actually show any product price so again This is one of those things that Sometimes you get these kind of quirky Things where data isn't shown this may Be because it's a variable product and There's a multiple different pricing Things going on but let's just go ahead And change the color scheme and the Typography anyway in the hope that this Actually works let's go back out of here And we'll say we want to put the short Description underneath that again we can Style this if we want to and sometimes You tend to find this doesn't actually Update any styling on you whatsoever and The reasoning is that sometimes your Theme and that overrides it which I'm
Using the Hollow theme anyway so you'd Think it would work hey ho okay so the Final thing we're going to drop in is The add to cart because that's available To us let's drop that inside there There's our add to card button and if You want to set the controller button And the layout of it you can do that as Well but let's say we're happy with the Look and feel of this let's click on Publish and that's the loop template Created so now we can hop back at a few Exit back to our dashboard and come back Into our templates and for this example We're going to go back into the theme Builder I'm going to create an archive Template for all of our product archives So welcome to a product archive click Plus to add a new one we'll get rid of The pre-built templates because we don't Want any of that and instead of using The archive products like we would have Done previously let's just drag the Title inside there Let's change the styling on that a Little bit as well it doesn't look very Good uh we'll set that to be secondary For example come back out if you want to Put an archive description we can use That but don't use the archive products Because that's just going to use the Old-fashioned way of doing things so if We drop that underneath there you'll see This just pulls in the standard default
Option which we are not going to use so Let's go ahead delete that instead let's Go ahead and grab our Loop grid we'll Drop that underneath the archive title And you see now this opens up the loop Buildup this is the other way in which You could create the template you can See this says create a template or we Can just go ahead and choose the Template from the one we've just created So first of all let's change this over To be products instead of posts let's go In here and type in woo and there's our Fruity wool Loops we'll select that and You see there's our template now being Pulled in if we come into the query you See by default this is going to use the Latest product which isn't what you want So hopefully this will be something That'll actually default to the current Query because if you created an archive Page then this is going to be used on All the archives for your products then You're not going to have the latest Items it's going to be the current query That's going to pass over that query Parameter for the different category for Example You've still got your included exclus We'll just add some pagination in so We'll just simply come in and say Numbers previous and next you can apply Your styling and all those kinds of Things let's go ahead and publish this
Set our condition on here to be all Product archives hit save and close and Now we've created that archive that's Going to be used on all of our product Pages let's have a look take a look at Previewing this And you see there's our archive products This is all our products you can see all Our products are listed inside you if we Come up to one of the subsections for Example accessories You can see there's our accessories our Socks shoes and hats coming to something Like sweaters There's our sweater product we just Created the layout for and if we come Back into our shop Everything shows up now you see we've Got the add to cart button but this Isn't actually a link The only way you can kind of deal with That and make it semi-useful which like I say this is beta so don't use it on a Live site let's come back out edit our Template this may work okay it may not But I try to do your own if I do show Quantity and we just put a different Product in for example let's just say This hat actually it now works and the Button actually roll over works as well So let's try updating that let's come Over into our products and funnily Enough that's actually worked when I Tried this the last time it didn't work
So you can see what I mean about this Being a beta product and some strange Quirks happening and you were seeing This in real time the same as me so now If I try adding this to the cart that Actually added to the cart which Previously it was just a null button so Very strange way that's kind of decided To work now but it has decided to work So let's go back out of here so you can See that does actually work so we come Back over you can see it's not picking Up our styling property so we may want To come in and adjust things on here so You can see our normal is fine our hover We can just put a different color on There for example we'll go with this Dark blue and you'd think that would Work however we update it refresh the Page and it's still using the default Color for the main color it's still kind Of quirky it's still not working 100 Correctly but it is a step in the right Direction as you can see some things Work sometimes some things don't work Other times there's some kind of weird Quirks going on but it is a beta version Of it but I'm still excited to see where This goes because This is one of those areas that I think Anywhere we can use a natural built-in Loop Builder inside Elementor to do away With third-party tools to do what I Would consider to be a relatively basic
Thing is always a good thing but as Always I welcome your feedback comments And anything you want to say about this Drop those in the comment section down Below my name is Paul C this is WP tets Until next time take care Thank you
WordPress is a platform that allows users to create interactive, user-generated content with ease. It can also be used for general networking and monetization with Adsense or other options. In addition, WordPress has help forums, often run by community members, where users can ask questions and offer solutions to other users’ problems. Its popularity means it is now used by thousands of users worldwide to power their websites and blogs. For these reasons, WordPress is one of the most popular platforms for web content creation.
In addition to being easy to use, WordPress also offers a wide range of additional features, including a comprehensive link management system and search engine-friendly permalink structure. It also supports multiple categories and tags for each post. It also has automatic filters that convert regular quotes into smart quotes, and it supports the Trackback and Pingback standards for linking to other websites. In addition, WordPress also has a variety of plugins that allow users to customize their posts and pages in a variety of ways.
If you want a more minimalist, straightforward look, you should consider Neatly, a free WordPress theme. It features an elegant design and puts the content on top. The theme comes with ads on the sidebar, and is SEO-friendly. In addition, it has a one-click demo import option.
Many WordPress themes are compatible with AdSense. AdSense is an online advertising program that pays website owners for displaying relevant ads on their websites. Publishers are paid based on impressions and clicks. Users can manage the ads manually through their WordPress dashboard or choose to use Google’s automated placement feature. Some themes also have a settings page and scripts meta box where users can adjust the placement of AdSense ads.
The WordPress hook system offers hundreds of plugins, each of which extends the functionality of your website. Plugins also increase your website’s security, speed, and Search Engine Optimization. Many plugins are available for free and can be purchased. These plugins can be used to create a storefront, a contact form, or other features.
WordPress version 3.2 is an important update to the platform, with new features and minor changes added to its interface. It also has a new editor with syntax highlighting and a streamlined writing interface. This new version is optimized for tablet and mobile devices. It also includes support for Retina Display. A new theme option panel offers the ability to customize the look and feel of your site.
When installing plugins, it is important to ensure they are safe and secure. It’s best to download them from trusted sources, such as the WordPress Plugin Directory, CodeCanyon, or websites of reliable plugin developers. It’s important to read reviews of the plugins you plan to install, and remember to activate your plugins on a staging site before implementing them in your live site.