Setting up related products and more using the advanced query and repeater in Oxygen Builder

in this video we're going to have a look at some of the options you might want to include on the product page so here we have a single product we have the related products which is standard we've then included the cheapest products on the website that are not in the same category as the product that we're looking at and then we've included the gift voucher at the bottom of the page where the user could maybe then go with the gift voucher if they found nothing in the products above so to show you how that works i'm going to head over to the shop now and i'll just choose a category with a few more items so i know that accessories which is what beni is part of they have a few more products so there we have the related products you'll see now that in the cheapest chips we have albums and we have this wordpress pennant and we know that uh those are not in the decor cat in the accessory category so they come up and also the cheapest in those categories and then we have the gift voucher if we go to a product that own a category that only has one product then the related products won't show the cheapest chips will show because it's coming from any category except the one we're looking at and then we also have the gift voucher now the gift voucher if i was to go to the shop and i was to select the gift voucher as an option here then we don't want that gift voucher to appear at the bottom of the page so you'll see now that the gift voucher doesn't appear at the bottom of the page so i'm just going to head back to a a product or a category with a few more items so the album has this particular category of music has one more product and then the cheapest chips and then the gift voucher so what we've done here is in order to hide the related products because each item on the website is only assigned to one category so what we've done there to to hide that is if i head over here into oxygen builder and i head over to my related products you'll see that we've set a condition and what this condition does is it looks at a php function which is b by get product count and if that is equal to true then it displays the related products if i head over here to my condition you'll see here that what we've done is we get the terms from the current post that we're looking at so we're getting the terms so we get the terms from the post we're looking for the category id this will return an array of items now we know there's only one so we say that the post count then is equal to the terms post the very first item in the array and we're looking for the count and if that post count is greater than 1 then return true and if that returns true then it will show the related products otherwise they'll be hidden when it came to hiding the gift voucher on the gift voucher page we actually did that using the repeater so here in the repeater what i've done is i've set up the styling in such a way so in the section if we're going to have a look at the advanced section you'll see that my size and spacing i've set the pan the padding to zero and in the primary i've set up the color then what i did is i headed over to the the repeater and if i'm not mistaken in the div in the div of the repeater i've now set up the padding for the top and the bottom to 30 pixels i didn't set anything on the sides and then what happens now is that when we look at the query in the repeater so we go to the query we head over to the advanced query and what we're saying is that we're just looking at the simple post not in so what post node in will do is it will check that the id of the of the current post is not in the id of the post that we're looking at so to get that value we basically say that the post id must not be in the post id so if it is then it won't display if it isn't then it will and that's how we then hide and because the styling is linked to the div if that div isn't displayed then no styling is displayed so that's how we did the um the visibility on the gift voucher being a single product so if we now go and have a look at the related products and we're going to look at the condition here to see or the repeater the query to see how we make sure that only the products from the current category are displayed so because it's a repeater and we're doing the advanced query we're basically saying the post type is product the post per page this is set on the home page in the setting so we have a settings page for the website and from there we can set the post per page alternatively if you prefer to set it on the actual template we can just then set that to four but if you'd like to control centrally then you can do it via a custom field so in this case we can then leave it post per page if you wanted to do it via a custom field in this case advanced custom field and if you have a custom field you'll see it'll be highlighted in blue and if you have one that is set for post per page then you can come in here then select that field and that will then update it according to that custom field the next one we look at is the taxonomy query and here we want to make sure that the products that are in the related posts are from the same product category as the product we're looking at and to do that we insert a taxonomy query and in the array the taxonomy is product category the terms that we're going to use in that array to check are these terms here under advanced these taxonomy terms and in those taxonomy terms now we're going to look for product category so we just scroll down a bit here until we get to product cat then we insert and the field is the slug and it will just check to see that the category of the current product is the same we'll make sure that the term that's used is the same as the category for the product that we're looking at then what we're going to do is eliminate pagination to no found rose is true then we have a meta query to check that the product is in stock so there we have the product the stock status so the key there is stock status and the value is in stock and we just say compare and the double equal means that it is exactly the same as that wording and then we have post not in and we're just saying that the current post id must not be in the list of posts that are going to be included in the query so if you want to include the current post from the list of posts in your related posts then we use post not in and the oxygen data equals id will then be here under advanced and we select post id so that's how we select and with that done we can close so that's how we've set up the related products and i can save that and you'll see here that if i was to refresh the page then our related products work then in the next one what we did is we reversed the some of the items to make sure that the cheapest chips would show because here we wanted products that are not in the same category or are not the same post id as the category that we're looking at so we did exactly the opposite here to what we did in the related posts so here we go with the post type and we've entered product but there is another way that you can do that so under post type we can select data and here select post type now that post type will be the same post type as the product that we're looking at so that's another way of doing it here we chose three items because of the layout here we've set the order by now we did this um we've set this on a custom field but i could also come in here and set it to ascending uh sorry order by is um not ascending or descending but that would be by date or by a metavalue number depending on what it is that you're doing your order by so it could be the date the title i mean in this case we're doing it by price so this will link to a meta value number the order of the list of products here we can set that to ascending and then here for the taxonomy query what we've done here is we've made sure that the category for the products is not in the category of the product that we're looking at so to do that we set the taxonomy here in our taxonomy query to product cat or product category the field is a slug the operator now is not in because we don't want it to be the same and then here where we select the terms that are going to be used we will head over to data and we'll select taxonomy terms and what taxonomy terms and we're just going to scroll down here until we get to product cat so we say it must not be in the product category of the product that we're looking at this meta key here refers to the price so what we did here is we said order by here and it was a meta value so we said sort by meta value number and that meta value number is this meta-key price and then we say no found rows for the pagination because we only want the three we do check that we only display items in stock so we have a meta query and the key that we check in the meta query is stock status so only in stock items and the value is in stock and there must be an exact match and then here we say post not in probably don't need that because we're always going to be looking for categories not the same as the post that we're looking at so i'll save that we'll just refresh that again and then you'll see that the items that are listed here will be for categories not the same as what we're looking at there and we've set it to go from the cheapest to the most expensive so you'll always have the cheapest products there on the website from the other categories and then we have the gift voucher now the gift voucher is then set up also using the advanced query in this case though what we did is we said um once again here we we can actually make that dynamic so we can say data post type because it's on the same page as the product so as long as it's in the same post type as the post that we're looking at then we have the post per page here we just set one because we're only going to display one gift voucher the order by here comes from a setting on a custom field but in this case we've just set an order by [Music] title it's not really required because it's the gift voucher so i can say ascending then we have a taxonomy query and the taxonomy query here picks the value from an the options page but we know that the term here needs to be gift voucher and the field is the term id so it picks up the term id from a setting on the options page alternatively i could even change this to the slug so i can leave that as field if i know that it's going to be a gift voucher all the time but the reason we do it from the options page is just in case we wanted to display a different product not always the gift voucher then we have no found rows to true so there's no pagination then we make sure that the product is in stock and generally gift vouchers always are and then we have the post not in just to make sure that it's not the same as the product that we're looking at so that just means that if we're looking at the gift voucher product the gift voucher won't display at the bottom of the page and that's how that was put together we'll just save that now using the um the options page does give you some freedom now to do different things so just for example this gift voucher if for example for some reason you decided then that you wanted to put something else in that place so here we have the um there we have the cheapest product and then here we have the uh pages four four three so here i if i'm not mistaken is the gift card there's the gift card so if i wanted to now feature the music um instead of a gift card i would update that head over here and now when i refresh the page on every single page on the website we would now have that product displayed instead of the gift voucher so by doing it from the options page it does give you the the flexibility now to take change what is displayed on each page and the way that that is set up is that if i go to the singles page you'll see now that that single doesn't display and now we have album so because there were two products it will now display the alternative product if there was only one product in that category nothing would be displayed in the space so i'm going to go back to my options page and change that down to change that back to gift card and we'll just update that and you'll see that now we have the gift card the gift voucher will now be back across the site so that can be used for a nice way to then include gift voucher or any other featured product across the website so i hope you found that interesting got some ideas that you can use you have complete freedom now on the product pages to add various items for upsells cross sells across the website so i hope you enjoyed that and thank you for watching

Channel: Bruce Young

Views: 145

Keywords: advanced query, oxygen builder, related products

Id: sTJBGEiAK6w

Length: 16min 33sec (993 seconds)

Published: Wed Dec 08 2021