修改size生成位置样式

app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/form.phtml

@@ -40,6 +40,21 @@
     </form>
 </div>
 
+<script>
+
+    require([
+        'jquery'
+    ], function ($) {
+        $(document).on('click','.swatch-option,.text',function (){
+            if ($('.swatch-attribute-selected-option-size-content .swatch-attribute-selected-option').text().length>0){
+                $('.swatch-attribute-selected-option-size-content').show();
+            }else {
+                $('.swatch-attribute-selected-option-size-content').hide();
+            }
+        });
+
+    });
+</script>
 
 <script type="text/x-magento-init">
     {

app/design/frontend/Joshine/breeze/Magento_Swatches/web/js/swatch-renderer.js

@@ -429,12 +429,16 @@ define([
                         tem_size = "<div  id=\"product-intro__freeshipping-more-3\"  >" +
                             "<a href=\"javascript:void(0);\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.5 8.5V15.5H5.31045V13.75C5.31045 13.3358 5.64623 13 6.06045 13C6.47466 13 6.81045 13.3358 6.81045 13.75V15.5H9.31045V11.75C9.31045 11.3358 9.64623 11 10.0604 11C10.4747 11 10.8104 11.3358 10.8104 11.75V15.5H13.3104V13.75C13.3104 13.3358 13.6462 13 14.0604 13C14.4747 13 14.8104 13.3358 14.8104 13.75V15.5H17.3104V11.75C17.3104 11.3358 17.6462 11 18.0604 11C18.4747 11 18.8104 11.3358 18.8104 11.75V15.5H20.5V8.5H3.5ZM14.0604 17H18.0604H21C21.5523 17 22 16.5523 22 16V8C22 7.44772 21.5523 7 21 7H3C2.44772 7 2 7.44772 2 8V16C2 16.5523 2.44772 17 3 17H6.06045H10.0604H14.0604Z\" fill=\"#5D626A\"></path></svg> Size Guide</a></div>";
                         label += tem_size;
-                    }
+                        label += '<span id="' + controlLabelId + '" class="' + classes.attributeLabelClass + '">' +
+                            $('<i></i>').text(item.label).html() +
+                            '</span>';
+                    }else{
                         label +=
                             '<span id="' + controlLabelId + '" class="' + classes.attributeLabelClass + '">' +
                             $('<i></i>').text(item.label).html() +
-                        '</span>' +
-                        '<span class="' + classes.attributeSelectedOptionLabelClass + '"></span>';
+                            '</span>'+ '<span class="' + classes.attributeSelectedOptionLabelClass + '"></span>' ;
+                    }
+
                 }
 
                 if ($widget.inProductList) {
@@ -444,8 +448,26 @@ define([
                 } else {
                     listLabel = 'aria-labelledby="' + controlLabelId + '"';
                 }
-
+                if (item.label.toLowerCase() == "size") {
                     // Create new control
+                    var sizeContent = '<div class="swatch-attribute-selected-option-size-content" style="margin-top: 0.13333rem;padding: 0.26667rem;background-color: #f7f7f7;display: none;"><div style="font-size:.32rem;color:#999999;">Product Measurements</div>'+'<span style="color:#0a0a0a;" class="'+classes.attributeSelectedOptionLabelClass + '"></span></div>';
+
+                    container.append(
+                        '<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
+                        'data-attribute-code="' + item.code + '" ' +
+                        'data-attribute-id="' + item.id + '">' +
+                        label +
+                        '<div aria-activedescendant="" ' +
+                        'tabindex="0" ' +
+                        'aria-invalid="false" ' +
+                        'aria-required="true" ' +
+                        'role="listbox" ' + listLabel +
+                        'class="' + classes.attributeOptionsWrapper + ' clearfix">' +
+                        options + select +
+                        '</div>'+ sizeContent + input +
+                        '</div>'
+                    );
+                }else{
                     container.append(
                         '<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
                         'data-attribute-code="' + item.code + '" ' +
@@ -461,6 +483,8 @@ define([
                         '</div>' + input +
                         '</div>'
                     );
+                }
+
 
                 $widget.optionsMap[item.id] = {};
 

app/design/frontend/Joshine/breeze/web/css/_custom.less

@@ -2163,7 +2163,15 @@ button.action.submit.primary {
   white-space: nowrap;
 }
 
-
+@media (max-width: 768px){
+  span.swatch-attribute-selected-option{
+    margin-left: 0!important;
+    line-height:.53333rem;
+    font-size: .32rem;
+    text-transform:capitalize;
+    color: #0a0a0a;
+  }
+}
 
 #product-intro__freeshipping-more-3{
   display: inline-block;