Introducing: WooCommerce Integration and Enhanced Color, Gradient & Opacity Settings

In case you missed it, in our Facebook Community, we shared a roadmap of new features and blocks that we have in store for you in Stackable. Here’s a glimpse of what you can expect for upcoming major updates and releases:

We’ve finished the development of the first two stops and we’re excited to announce that you can now enjoy Enhanced Color, Gradient & Opacity Settings, and WooCommerce Dynamic Content in our latest release!

Stackable version 3.12 promises to take your web design experience to a whole new level. Continue reading to learn more about what’s in store for you when you update your Stackable to the latest version.

Seamless Integration with WooCommerce using Dynamic Content

Say goodbye to rigid product page designs and hello to a world where your creativity knows no bounds! With this integration, you can now exhibit products with Stackable’s blocks and customize them with our extensive design controls.

The way it works is that Stackable’s Dynamic Content detects WooCommerce product fields and display the data assigned to each field using Stackable blocks. You will find the WooCommerce fields grouped together in the Dynamic Fields menu.

The fields available are the usual information you would need to build product displays such as Product Name, Product Short Description, Product Image, Product Add to Cart URL and more.

This way, you can now craft product pages, product archives, or even product features in a way that aligns perfectly with your brand’s aesthetic.

Here are some things that you can do with this integration:

Categorized Product Archive

You can create a product archive in which users can select what categories to view. This was achieved by using Stackable’s Tabs block and adding the native Query Loop block in each tab. Watch how you can achieve this design in the WordPress Block Editor:

Product Feature

With Stackable’s WooCommerce integration, you can also create sections that will feature products.

With this design, we used the Feature block and populated it using WooCommerce fields and Dynamic Content. If you want to build this simple feature section, you can watch this video:

WooCommerce Conditional Display

You can also use WooCommerce product fields as display conditions. A practical usage for this is when a product is out of stock, you can display an alert that will notify a user and remove the Add to Cart button.

You can use the WooCommerce product fields as display conditions by simply selecting WooCommerce in the Condition Type.

This integration with WooCommerce allows Stackable to offer straightforward design solutions for your eCommerce store. Make the most out of Stackable blocks to efficiently display products, and take advantage of design controls to customize product displays! This integration is a Premium feature, if you are not a Premium Stackable user yet, check out our pricing page.

Refined Background Color Opacity

This is how color settings used to be presented in the Inspector. For single colors, the color opacity had its own controls.

Now, you will find the opacity controls inside the color picker. This makes for a more seamless color selection with your design process on Stackable.

You will also find that this adjustment has been applied to Stackable’s Global Colors, meaning you can save opacity with colors. Do note, however, that when you adjust the opacity inside the Inspector, it will be disconnected with the global color. This gives you more control with the capability to adjust opacity and color in the inspector color picker independently, without impacting your global color settings.

This change is backwards compatible. Your existing opacity settings will remain intact and will not mess up your old designs.

You may also notice that when you add a background image, there will still be a Background Tint Strength control. This works in the same way as background color opacity but there is a clear distinction between the two. If, for example, you want to adjust the color’s opacity without disconnecting it from the Global Colors, you can adjust the color’s opacity using the Background Tint Strength control, like in this example below:

Enjoy a simplified design process with Stackable’s updated background color opacity feature, now conveniently built into the color picker.

Enhanced Gradient Color Picker

Stackable’s gradient color picker used to have different controls for color 1 and color 2, limiting you to only two colors for your gradient.

We’ve enhanced the gradient color picker so that you will find all the controls in one section. You may notice three things with this gradient color picker:

First, the Gradient Stops will not only give you the power to define how smooth or abrupt you want the color transitions to be, this also allows you to have more than one color for your gradient.

Second, the Gradient Type gives you an option between a radial or linear gradient.

When you select the linear gradient type, you can also adjust the Gradient Direction by dragging around the degree/angle control (the circular icon beside Angle), or you may also just input the degree value in the Angle control.

While this new gradient color picker comes with great new features, you won’t be able to use the global colors for gradients. However, the gradient color picker will detect gradient colors from your theme and select them for your gradient colors.

Accordion FAQ Schema Support

Now, when you use the accordion for Q&A content, enabling the FAQ schema will help Google recognize and understand the contents better. It’s a fantastic way to make your content more search-engine optimized.

You will find the FAQ Schema toggle when you select the Accordion and navigate to Style > General. Just turn on the toggle and that should do it!

Additional Fixes and Updates

Here are also some additional fixes that come with this release:

• Fixed: Global settings get removed when switching between code view and visual view
• Fixed: Posts block, added missing note about extra options

Conclusion

The latest Stackable update introduces practical and user-friendly enhancements designed to streamline your web building activities. With WooCommerce integration, refined background color opacity controls, an upgraded gradient color picker, and SEO-boosting accordion features, we aim to deliver straightforward solutions to your design and e-commerce needs. Explore the new features, utilize them for your projects, and stay tuned for further updates!