WooCommerce is now compatible with Stackable blocks! If your Stackable is updated to version 3.12 and up, then this integration offers dynamic content fetching from WooCommerce fields. In other words, now you can use Stackable blocks to display WooCommerce products!
This is great news for users who want to stray away from the conventional WooCommerce blocks or might want to create unique product displays on their e-Commerce websites. In this article, we’ll show you how you can do just that!
In the example above, we created a feature display that will show your latest products. In order to do that, we used a combination of Stackable’s blocks and dynamic content, the core Query block, and WooCommerce product fields.
Using Stackable’s dynamic content ensures that your website is updated every time there are changes to your product information. On the other hand, using the core Query block will allow us to always display the latest product you add to your store.
Let’s get started!
Creating a Latest Product Display Using Stackable and WooCommerce
Before anything, you will, of course, need to download Stackable, and have WooCommerce products in your store.
Once you already have everything set up, you can create a page or open an existing page in the Block Editor and you’re all set to start displaying WooCommerce products with Stackable!
1. Add the Query Loop block
The Query Loop block will be our parent block. This will allow us to always display the latest product that is added to the store.
You can type /query loop or just search for it in the Inserter (the + button on the top toolbar).
In the Settings sidebar, locate the Post Type settings, and select Product from the drop down menu. In doing so, the block will loop all posts of this post type; in this case, our WooCommerce products.
After that, head over to the Display Settings of the Query Loop, which you will find in the block toolbar. Set the Items Per Page setting to 1 so it will only display one product.
After that, open the Document Overview from the top toolbar and select the Pagination and No results blocks. Open the Options menu and select Delete blocks since we won’t be needing these for the section we’re building.
Now, let’s set up the layout of the Query Loop. Since the Query Loop is essentially the “parent block”, all the other blocks inside it will be following its layout. Since we want it to fill up the page horizontally, we opened the Align menu and selected Full Width.
Then we opened the Stackable Settings sidebar and copied the hex code of the lightest color we have there. This is the color we’ll be using for the Query Loop block’s background. With the Post Template selected, we opened up the Settings sidebar, and opened the Styles settings. Under Color, we pasted the hex code in the Background setting.
Our Query Loop’s all ready, let’s start populating it with Stackable blocks.
2. Adding the Stackable blocks
First we’re going to add is the Columns block so we can have two columns; one for the details, and another for an image.
With the Columns block added, let’s delete the two blocks that were added in with the Post Template because we won’t be needing them for our design.
Next, let’s fill up the first column. Here, we added the Subtitle block, the Heading block, the Text block, and the Button block.
For now, we just added some placeholders for each block to assign what product information will be added there.
On the second column, let’s add the Image block and leave it as is for now.
Now, let’s fix up our section’s display. Let’s do the buttons first since blue does not exactly match the current style of our design. Select the first button and head to Style > Button Colors. For this, we selected a dark shade of brown. Then we navigated to Style > Icon to add a cart icon to this button and headed to the Button Borders & Shadows to adjust the Border Radius to 50.
Next, let’s select the second button and select the Plain option in the Styles panel of the Style tab. Then let’s change the Text color in the Button Colors panel to the same dark shade of brown.
Lastly, why don’t we adjust the layout of our Columns block? We selected the entire Column block adjusted the layout using flexbox controls (Layout tab > Layout Panel > Column Alignment > “Center”).
Now let’s make some additional adjustments so that the content won’t take up the entire width of the page? Navigate to Layout tab > Size & Spacing panel and locate the Paddings controls. Click the Padding icon to open up the individual side controls and set the left and right paddings to 150.
The next step is the fun part! Filling in our placeholders with WooCommerce product fields using Stackable’s dynamic content.
3. Adding WooCommerce data with Stackable Dynamic Fields
All there’s left for us to do is to fill in the blocks with the actual product information.
To do that, highlight the text that we want to change, and click the Dynamic Fields icon.
In the Field menu, type in the field that you want to fetch data from. In this case, we need the Product Name. Select that, and click the Apply button.
Repeat that process with the rest of the blocks but select the applicable field name for the block we’re trying to fill. Like for the short description, we used “Product Short Description”; for the product link, we used “Post URL” in the Link panel of the Button block, for the Add to Cart button, we used “Product Add to Cart URL”, and for the image, we used “Product Image”.
That looks great! Now we can move on to the last step.
4. Test
Before publishing, we obviously have to ensure that any changes will apply to our blocks when we publish a new product.
In the video below, we already have a product that’s ready to be published. Once the product is live, we can check if the page we designed will reflect this new product we just added.
Once we refreshed the page, it took a bit of time to load the information, however, it did display the new product!
Now all there’s left to do is to publish your page or post. Our custom-designed featured product display is now live.
Use WooCommerce Data to Conditionally Display Blocks
Taking it a step further, you can actually use the data stored in your products to set conditions for when or when not to display a block.
In the example below, you can see that the price has changed and we’ve added the “On sale for a limited amount of time!” text. These will only be displayed when the sale is in effect, but once the sale has finished, it should go back to the normal state. We’ll show you how to do that using Stackable’s Conditional Display.
sample
1. Setting up the blocks
Before anything else, we have to add the blocks that will be displayed once the product is on sale.
First that we did is we duplicated the price that we already have. Then, we changed the Dynamic Field to “Product Price (Sale)”. We did this by selecting the text and clicked the Dynamic Fields button on the toolbar. We then changed the selection in the “Field” menu to “Product Price (Sale)”.
We also added a subtitle below the price and added the text “On sale for a limited time only!”.
2. Adding the conditions
Now that our blocks are set up, we just have to define our conditions for the blocks.
First that we’ll do is to hide the regular price when a sale is in effect. Selecting the block that will display the regular price, we navigated to Advanced tab > Conditional Display panel. In the Visibility drop down, we chose “Hide on condition match”. Then, click the Add New Condition to start. In the “Condition Type” option, select WooCommerce (you should find it in the bottom of the menu). Then, in the “Choose Option” menu, select “Current Post”. For “Property”, select “Is on Sale” and choose “True” for the value.
Next that we want to do is to hide the sale price when the sale is not active. To do that, select the block that will display the sale price then navigate again to Advanced tab > Conditional Display panel. We’ll essentially do the same process as the regular price, however, we’ll have to select “False” for the value.
We’ll do the same for the subtitle “On sale for a limited time only!”
3. Test the conditions
We’re done adding our conditions, now let’s test if it’s working.
In the product that is being displayed, we added a sale price in the Product data section of our product page. Click the Update button, and let’s go back to the Block Editor to see if the blocks will work as they should.
Again, it should hide the regular price, and display the sale price, as well as the limited time disclaimer!
It works! How easy was that? In just a few steps, we were able to create a full-on product display that displays its sale price.
Conclusion
With the WooCommerce and Stackable integration, creating custom product displays is a breeze. Enhance your e-commerce game, tailor your product showcases, and ensure your brand stands out in the online marketplace.
