{"id":28612,"date":"2023-10-06T06:17:36","date_gmt":"2023-10-06T11:17:36","guid":{"rendered":"https:\/\/wpstackable.com\/?p=28612"},"modified":"2023-10-06T21:45:32","modified_gmt":"2023-10-07T02:45:32","slug":"woocommerce-integration","status":"publish","type":"post","link":"https:\/\/wpstackable.com\/blog\/woocommerce-integration\/","title":{"rendered":"Introducing: WooCommerce Integration and Enhanced Color, Gradient &#038; Opacity Settings"},"content":{"rendered":"\n<p data-block-type=\"core\">In case you missed it, in our <a href=\"https:\/\/www.facebook.com\/groups\/341991773356009\" target=\"_blank\" aria-label=\"Facebook Community (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Facebook Community<\/a>, we shared a roadmap of new features and blocks that we have in store for you in Stackable. Here\u2019s a glimpse of what you can expect for upcoming major updates and releases:<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-large\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/1696589446104138-1024x576.png\" alt=\"\" class=\"wp-image-28626\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/1696589446104138-1024x576.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/1696589446104138-300x169.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/1696589446104138-768x432.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/1696589446104138.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p data-block-type=\"core\">We\u2019ve finished the development of the first two stops and we\u2019re excited to announce that you can now enjoy Enhanced Color, Gradient &amp; Opacity Settings, and WooCommerce Dynamic Content in our latest release!<\/p>\n\n\n\n<p data-block-type=\"core\">Stackable version 3.12 promises to take your web design experience to a whole new level. Continue reading to learn more about what\u2019s in store for you when you update your Stackable to the latest version.<\/p>\n\n\n\n<nav class=\"wp-block-stackable-table-of-contents stk-block-table-of-contents stk-block stk-e2cf7db stk-block-background\" data-block-id=\"e2cf7db\"><style>.stk-e2cf7db{background-color:var(--stk-global-color-61135,#f3f3f3) !important}.stk-e2cf7db:before{background-color:var(--stk-global-color-61135,#f3f3f3) !important}<\/style><p class=\"stk-table-of-contents__title\">Table of Contents<\/p><ul class=\"stk-table-of-contents__table\"><li><a href=\"#undefined\">Seamless Integration with WooCommerce using Dynamic Content<\/a><ul><li><a href=\"#undefined\">WooCommerce Conditional Display<\/a><\/li><\/ul><\/li><li><a href=\"#undefined\">Refined Background Color Opacity<\/a><\/li><li><a href=\"#undefined\">Enhanced Gradient Color Picker<\/a><\/li><li><a href=\"#undefined\">Accordion FAQ Schema Support<\/a><\/li><li><a href=\"#undefined\">Additional Fixes and Updates<\/a><\/li><li><a href=\"#undefined\">Conclusion<\/a><\/li><\/ul><\/nav>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" data-block-type=\"core\">Seamless Integration with WooCommerce using Dynamic Content<\/h2>\n\n\n\n<p data-block-type=\"core\">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&#8217;s blocks and customize them with our extensive design controls.<\/p>\n\n\n\n<p data-block-type=\"core\">The way it works is that Stackable\u2019s 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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\" data-block-type=\"core\"><img decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-1-1024x1012.png\" alt=\"\" class=\"wp-image-28614\" style=\"width:500px\" width=\"500\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-1-1024x1012.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-1-300x297.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-1-768x759.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-1.png 1040w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">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.<\/p>\n\n\n\n<p data-block-type=\"core\">This way, you can now craft product pages, product archives, or even product features in a way that aligns perfectly with your brand\u2019s aesthetic.<\/p>\n\n\n\n<p data-block-type=\"core\">Here are some things that you can do with this integration:<\/p>\n\n\n\n<p data-block-type=\"core\"><strong>Categorized Product Archive<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Screen-Recording-2023-10-06-at-3.58.01-AM.mov\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">You can create a product archive in which users can select what categories to view. This was achieved by using Stackable\u2019s Tabs block and adding the <strong>native Query Loop block<\/strong> in each tab. Watch how you can achieve this design in the WordPress Block Editor:<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Screen-Recording-2023-10-06-at-4.21.39-AM.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\"><strong>Product Feature<\/strong><\/p>\n\n\n\n<p data-block-type=\"core\">With Stackable\u2019s WooCommerce integration, you can also create sections that will feature products. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"436\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-1-1-1024x436.png\" alt=\"\" class=\"wp-image-28616\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-1-1-1024x436.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-1-1-300x128.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-1-1-768x327.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-1-1-1536x654.png 1536w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-1-1-2048x872.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p data-block-type=\"core\">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:<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Screen-Recording-2023-10-06-at-9.34.44-AM.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" data-block-type=\"core\">WooCommerce Conditional Display<\/h3>\n\n\n\n<p data-block-type=\"core\">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.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Screen-Recording-2023-10-06-at-11.21.12-AM.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">You can use the WooCommerce product fields as display conditions by simply selecting WooCommerce in the Condition Type.<\/p>\n\n\n\n<p data-block-type=\"core\">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 <a href=\"https:\/\/wpstackable.com\/premium\/\" target=\"_blank\" aria-label=\"pricing page (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">pricing page<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" data-block-type=\"core\">Refined Background Color Opacity<\/h2>\n\n\n\n<p data-block-type=\"core\">This is how color settings used to be presented in the Inspector. For single colors, the color opacity had its own controls.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-2.png\" alt=\"\" class=\"wp-image-28627\" style=\"width:300px\" width=\"300\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-2.png 560w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-2-224x300.png 224w\" sizes=\"(max-width: 560px) 100vw, 560px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/background-color-opacity.png\" alt=\"\" class=\"wp-image-28628\" style=\"width:400px\" width=\"400\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/background-color-opacity.png 592w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/background-color-opacity-300x296.png 300w\" sizes=\"(max-width: 592px) 100vw, 592px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">You will also find that this adjustment has been applied to Stackable\u2019s 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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\" data-block-type=\"core\"><img decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-3-1-997x1024.png\" alt=\"\" class=\"wp-image-28630\" style=\"width:400px\" width=\"400\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-3-1-997x1024.png 997w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-3-1-292x300.png 292w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-3-1-768x789.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-3-1.png 1174w\" sizes=\"(max-width: 997px) 100vw, 997px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">This change is backwards compatible. Your existing opacity settings will remain intact and will not mess up your old designs.<\/p>\n\n\n\n<p data-block-type=\"core\">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\u2019s opacity without disconnecting it from the Global Colors, you can adjust the color\u2019s opacity using the Background Tint Strength control, like in this example below:<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Screen-Recording-2023-10-06-at-10.19.06-AM.mov\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">Enjoy a simplified design process with Stackable&#8217;s updated background color opacity feature, now conveniently built into the color picker.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" data-block-type=\"core\">Enhanced Gradient Color Picker<\/h2>\n\n\n\n<p data-block-type=\"core\">Stackable\u2019s gradient color picker used to have different controls for color 1 and color 2, limiting you to only two colors for your gradient.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\" data-block-type=\"core\"><img decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-4.png\" alt=\"\" class=\"wp-image-28631\" style=\"width:300px\" width=\"300\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-4.png 560w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-4-186x300.png 186w\" sizes=\"(max-width: 560px) 100vw, 560px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">We\u2019ve 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:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"414\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Gradient.png\" alt=\"\" class=\"wp-image-28632\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Gradient.png 624w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Gradient-300x199.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure><\/div>\n\n\n<p data-block-type=\"core\">First, the <strong>Gradient Stops<\/strong> 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.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Screen-Recording-2023-10-06-at-10.31.37-AM.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">Second, the <strong>Gradient Type<\/strong> gives you an option between a radial or linear gradient.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Screen-Recording-2023-10-06-at-10.34.13-AM.mov\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">When you select the linear gradient type, you can also adjust the <strong>Gradient Direction<\/strong> 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.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Screen-Recording-2023-10-06-at-10.38.03-AM.mov\" playsinline><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">While this new gradient color picker comes with great new features, you won\u2019t 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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" width=\"647\" height=\"545\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Frame-4.png\" alt=\"\" class=\"wp-image-28633\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Frame-4.png 647w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Frame-4-300x253.png 300w\" sizes=\"auto, (max-width: 647px) 100vw, 647px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" data-block-type=\"core\">Accordion FAQ Schema Support<\/h2>\n\n\n\n<p data-block-type=\"core\">Now, when you use the accordion for Q&amp;A content, enabling the FAQ schema will help Google recognize and understand the contents better. It&#8217;s a fantastic way to make your content more search-engine optimized.<\/p>\n\n\n\n<p data-block-type=\"core\">You will find the FAQ Schema toggle when you select the Accordion and navigate to <strong>Style &gt; General<\/strong>. Just turn on the toggle and that should do it!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"539\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-5-1024x539.png\" alt=\"\" class=\"wp-image-28634\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-5-1024x539.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-5-300x158.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-5-768x404.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-5-1536x809.png 1536w, https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/Untitled-5-2048x1078.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" data-block-type=\"core\">Additional Fixes and Updates<\/h2>\n\n\n\n<p data-block-type=\"core\">Here are also some additional fixes that come with this release:<\/p>\n\n\n\n<ul class=\"wp-block-list\" data-block-type=\"core\">\n<li data-block-type=\"core\">Fixed: Global settings get removed when switching between code view and visual view<\/li>\n\n\n\n<li data-block-type=\"core\">Fixed: Posts block, added missing note about extra options<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\" data-block-type=\"core\">Conclusion<\/h2>\n\n\n\n<p data-block-type=\"core\">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!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u2019s a glimpse of what you can expect for upcoming major updates and releases:<\/p>\n","protected":false},"author":18,"featured_media":28647,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[3],"tags":[53,52,54,48,51,43],"class_list":{"0":"post-28612","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"hentry","7":"category-updates","8":"tag-colors","9":"tag-dynamic-content","10":"tag-gradients","11":"tag-web-design","12":"tag-woocommerce","13":"tag-wordpress"},"featured_image_urls_v2":{"full":["https:\/\/wpstackable.com\/wp-content\/uploads\/2023\/10\/woocommerce_x_stackable2-1.webp",2400,1248,false]},"post_excerpt_stackable_v2":"<p>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\u2019s a glimpse of what you can expect for upcoming major updates and releases: We\u2019ve finished the development of the first two stops and we\u2019re excited to announce that you can now enjoy Enhanced Color, Gradient &amp; 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\u2019s in store for you&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/wpstackable.com\/blog\/category\/updates\/\" rel=\"category tag\">Updates<\/a>","author_info_v2":{"name":"Alexandra Yap","url":"https:\/\/wpstackable.com\/blog\/author\/alex\/"},"comments_num_v2":"2 comments","acf":[],"modified_by":"Benjamin Intal","_links":{"self":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/28612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/comments?post=28612"}],"version-history":[{"count":7,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/28612\/revisions"}],"predecessor-version":[{"id":28646,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/28612\/revisions\/28646"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media\/28647"}],"wp:attachment":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media?parent=28612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/categories?post=28612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/tags?post=28612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}