diff --git a/assets/js/src/newsletter_editor/blocks/woocommerceContent.js b/assets/js/src/newsletter_editor/blocks/woocommerceContent.js
index 15ebde933b..a71633fa0e 100644
--- a/assets/js/src/newsletter_editor/blocks/woocommerceContent.js
+++ b/assets/js/src/newsletter_editor/blocks/woocommerceContent.js
@@ -3,6 +3,7 @@ import App from 'newsletter_editor/App';
 import BaseBlock from 'newsletter_editor/blocks/base';
 
 const BlockModel = BaseBlock.BlockModel.extend({
+  stale: ['styles'],
   defaults: function () {
     return this._getDefaults({
       type: 'woocommerceContent',
@@ -41,6 +42,13 @@ const BlockView = BaseBlock.BlockView.extend({
     this.toolsView = new BlockToolsView({ model: this.model });
     this.showChildView('toolsRegion', this.toolsView);
   },
+  templateContext: function templateContext() {
+    return {
+      viewCid: this.cid,
+      model: this.model.toJSON(),
+      styles: this.model.get('styles').toJSON(),
+    };
+  },
 });
 
 App.on('before:start', function (BeforeStartApp) {
diff --git a/views/newsletter/templates/blocks/woocommerceContent/block.hbs b/views/newsletter/templates/blocks/woocommerceContent/block.hbs
index f590a4a7d6..ea1744117a 100644
--- a/views/newsletter/templates/blocks/woocommerceContent/block.hbs
+++ b/views/newsletter/templates/blocks/woocommerceContent/block.hbs
@@ -3,7 +3,7 @@
     .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h1,
     .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h2,
     .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h3 {
-        color: {{ model.styles.titleColor }};
+        color: {{ styles.titleColor }};
     }
 </style>
 <div class="mailpoet_content mailpoet_woocommerce_content" data-automation-id="woocommerce_content">