14.4.2

- [WooCommerce] Better UX for different price in variation

_dist/gutenberg.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-polyfill'), 'version' => 'fa6e1d1e5512be89eb28ba3ae6262fbd');
+<?php return array('dependencies' => array('wp-polyfill'), 'version' => 'e5ddf90008c3ddc77f07cc735d71f859');

_dist/shop.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-polyfill'), 'version' => 'bd46e5b1cda8a6ce66ab214fa8094dab');
+<?php return array('dependencies' => array('wp-polyfill'), 'version' => '9370b812571a5ad128764160b8686409');

assets/css/gutenberg/_core-media.sass

@@ -319,6 +319,7 @@
 // Cover Below Header
 .wp-block-cover.is-style-h-below-header
   margin-top: calc(var(--headerHeight) * -1)
+  padding-top: calc(var(--headerHeight))
 
 body.h-has-cover-below-header
   .header:not(.is-stuck),

style.css

@@ -3,7 +3,7 @@ Theme Name: Edje Boilerplate Theme
 Author: Pixel Studio
 Author URI: https://pixelstudio.id
 Description: Boilerplate WordPress theme to be used alongside Edje WP Library
-Version: 14.4.1
+Version: 14.4.2
 Tags: private theme, edje, acf, woocommerce, custom-menu, editor-style
 */
 

woocommerce/css/_shop-single.sass

@@ -1,4 +1,5 @@
 .product-columns
+  align-items: flex-start
   column-gap: 4rem
 
   @media ($below-m)
@@ -7,7 +8,8 @@
 ///// GALLERY
 
 .product-figure
-  position: relative
+  position: sticky
+  top: calc(var(--headerHeight) + var(--adminBarHeight))
 
 div.woocommerce-product-gallery
   margin-top: 0
@@ -85,23 +87,33 @@ div.woocommerce-product-gallery
 
 .product-summary
   h1
-    font-size: var(--h2Size)
+    font-size: var(--h3Size)
 
   .price
     display: flex
     justify-content: flex-start
     margin-top: var(--blockGap)
-    font-size: var(--h4Size)
+    font-size: var(--h3Size)
     color: var(--text)
-
-  .stock
-    font-weight: 700
-    font-size: var(--mFontSize)
+    line-height: 1
 
   del
     font-size: var(--h5Size)
 
-
+// Sold and Rating
+.product-summary__subheader
+  display: flex
+  align-items: center
+  margin-top: 0
+
+  > *:nth-child(n+2)::before
+    content: "•"
+    display: inline-block
+    padding: 0 0.75rem
+    color: var(--gray)
+
+  span
+    color: var(--gray)
 
 form.cart
   display: flex
@@ -216,7 +228,6 @@ table.variations
 
   th,
   td
-    padding-top: 0.5rem
     padding-bottom: 0.5rem
 
 // I don't see a use of this
@@ -259,16 +270,14 @@ a.reset_variations
       margin-bottom: 0.5rem
 
   .price
-    margin: 0
-    font-size: var(--mFontSize)
+    display: none !important // change the big price instead
 
   .stock
     padding: 0 0.5rem
     border-radius: var(--gRadius)
-    margin-left: 1rem
     background-color: rgba(--text, .2)
     font-weight: var(--fontWeight)
-    font-size: var(--sFontSize)
+    font-size: var(--fontSize)
 
   .out-of-stock
     background-color: var(--colorAlertLight)
@@ -279,7 +288,6 @@ a.reset_variations
 div.woocommerce-product-rating
   display: flex
   align-items: center
-  margin-top: 0.5rem
 
   .woocommerce-review-link
     margin-left: 0.5rem

woocommerce/css/_shop-widgets.sass

@@ -170,6 +170,10 @@
     path
       fill: var(--textInvert)
 
+  body.h-has-cover-below-header .header-widgets:not(.is-stuck) &
+    border-color: rgba(--textInvert, .3)
+    color: var(--textInvert)
+
   &:hover
     transform: translateY(-2px)
     border-color: rgba(--text, .5)

woocommerce/js/shop.js

@@ -31,7 +31,6 @@ const myCart = {
 
     function openBar(e) {
       e.stopPropagation();
-      console.log('click bar');
       const $form = e.currentTarget;
 
       if (!$form.classList.contains('is-toggled')) {
@@ -74,9 +73,27 @@ const mySlider = {
   },
 };
 
+const myVariation = {
+  init() {
+    const $form = document.querySelector('form.variations_form');
+
+    // Change the big price
+    if ($form) {
+      window.jQuery($form).on('found_variation', (e, variation) => {
+        const $price = document.querySelector('.product-summary .price');
+        const newPrice = variation.price_html
+          .replace(/^<span class="price">/g, '')
+          .replace(/<\/span>$/g, '');
+        $price.innerHTML = newPrice;
+      });
+    }
+  },
+};
+
 function onReady() {
   myCart.init();
   mySlider.init();
+  myVariation.init();
 }
 
 function onLoad() {

woocommerce/views/single-product.php

@@ -23,10 +23,17 @@
       ?>
     </div>
     <div class="product-summary / wp-block-column">
+      <?php // do_action('woocommerce_single_product_summary'); ?>
+      <?php woocommerce_template_single_title(); ?>
+
+      <div class="product-summary__subheader">
+        <div class="product-summary__sold">
+          Sold <span><?= $total_sales ?></span>
+        </div>
+        <?php woocommerce_template_single_rating(); ?>
+      </div>
+
       <?php
-        // do_action('woocommerce_single_product_summary');
-        woocommerce_template_single_title();
-        woocommerce_template_single_rating();
         woocommerce_template_single_price();
         woocommerce_template_single_add_to_cart();
         woocommerce_template_single_excerpt();