In this week’s Exchange Talk, we’ll be showing you how to create a straight list of all the products from your iThemes Exchange store page using LoopBuddy. This could be ideal for those needing to create simple catalogs or index lists of all their store products with minimal styling, such as for customers who need to make a purchase order.
What is LoopBuddy?
LoopBuddy is a plugin that overwrites the WordPress Loop using a combination of custom queries and layouts. With LoopBuddy, you can control what content is displayed, when it’s displayed and how it’s displayed.
Getting Started: Creating a Product Query
To get started creating your custom iThemes Exchange store page, visit the Query Editor from within the LoopBuddy menu. Create a new query called “storelisting”.
Instead of pulling the default posts, we instead want to change the Post Type to “it_exchange_prod”, or iThemes Exchange products.
Next, set the Number of Posts to Display to -1. This will ensure that every product in your store is pulled and added to the list. In addition, you can change the order your products appear. For instance if you wanted them to display alphabetically, you can change Order By to “Title” and Order to “Low to High”.
Creating the Product List Layout
Next, we’ll head over to the Layout Editor in LoopBuddy and create a new layout called “productlist”. We don’t need any tags other than “Title”, so go ahead and remove the rest.
Click the gear on the Title tag to get into the settings. Here we can change the HTML Wrapper and add a Custom CSS Class, which will make it much easier to add any custom styling later down the line. For this example, we’ll change the wrapper to span tags, and give it a custom class of “productlist”. Other than that, just make sure “Add Permalink?” is set to yes and we’re good to go.
Though our goal here is to make as simple a product list as possible, you may wish to add a bit more information to the page, for instance a simple greeting and thank you. In the Settings area below, you can use the Pre and Post-Loop Text/HTML boxes to accomplish this, adding in any additional text you may want to appear on the page.
Creating the Store Listing Page
Next create a new page, which we’ll name Store Listing. This will be the page that actually serves as our product list. To make it so, simply scroll down to the LoopBuddy box on the right side of the screen and check the “Enable LoopBuddy” checkbox. Now simply plug in the “storelisting” Query and the “productlist” Layout and the page is complete.
Watch the Webinar
To see LoopBuddy and iThemes Exchange in action, check out this webinar.