diff --git a/assets/css/layout.scss b/assets/css/layout.scss index 454a70ad2..4e3109261 100644 --- a/assets/css/layout.scss +++ b/assets/css/layout.scss @@ -86,7 +86,7 @@ body.theme-astra { * Hide (block) price labels added via the woocommerce_get_item_data filter * while displaying classic shortcodes. Fallback-use only. */ -.woocommerce-cart, .woocommerce-checkout { +.woocommerce-cart, .woocommerce-checkout, .woocommerce-mini-cart { dl.variation { dt[class*="variation-gzd-"], dd[class*="variation-gzd-"] { display: none !important; @@ -94,14 +94,6 @@ body.theme-astra { } } -.woocommerce-mini-cart { - dl.variation { - dt[class*="variation-gzd-"] { - display: none !important; - } - } -} - .includes_tax, .tax_label { display: none !important; } diff --git a/assets/js/blocks/checkout/slotfills/order-meta.js b/assets/js/blocks/checkout/slotfills/order-meta.js index 343236498..17e563ce3 100644 --- a/assets/js/blocks/checkout/slotfills/order-meta.js +++ b/assets/js/blocks/checkout/slotfills/order-meta.js @@ -26,33 +26,38 @@ const DomWatcher = ({ }, [] ); useEffect(() => { - const orderItems = document.getElementsByClassName( 'wc-block-components-order-summary-item' ); - - for ( let item of orderItems ) { - const unitPrice = item.getElementsByClassName( "wc-block-components-product-details__gzd-unit-price" )[0]; - const notGzdElements = item.querySelectorAll( "li:not([class*=__gzd])" )[0]; + /** + * Use a timeout as tweak to make sure DOM is available. + */ + window.setTimeout( () => { + const orderItems = document.getElementsByClassName( 'wc-block-components-order-summary-item' ); + + for ( let item of orderItems ) { + const unitPrice = item.getElementsByClassName( "wc-block-components-product-details__gzd-unit-price" )[0]; + const notGzdElements = item.querySelectorAll( "li:not([class*=__gzd])" )[0]; + + if ( notGzdElements ) { + notGzdElements.classList.add( "wc-not-gzd-summary-item-first" ); + } - if ( notGzdElements ) { - notGzdElements.classList.add( "wc-not-gzd-summary-item-first" ); - } + if ( unitPrice ) { + const priceNode = item.getElementsByClassName( "wc-block-components-order-summary-item__total-price" )[0]; + const unitPriceNew = priceNode.getElementsByClassName( "wc-gzd-unit-price" )[0]; - if ( unitPrice ) { - const priceNode = item.getElementsByClassName( "wc-block-components-order-summary-item__total-price" )[0]; - const unitPriceNew = priceNode.getElementsByClassName( "wc-gzd-unit-price" )[0]; + if ( unitPriceNew ) { + priceNode.removeChild( unitPriceNew ); + } - if ( unitPriceNew ) { - priceNode.removeChild( unitPriceNew ); - } + const newUnitPrice = document.createElement("div" ); + newUnitPrice.className = 'wc-gzd-unit-price'; + newUnitPrice.innerHTML = unitPrice.innerHTML; - const newUnitPrice = document.createElement("div" ); - newUnitPrice.className = 'wc-gzd-unit-price'; - newUnitPrice.innerHTML = unitPrice.innerHTML; + unitPrice.classList.add( "wc-gzd-unit-price-moved" ); - unitPrice.classList.add( "wc-gzd-unit-price-moved" ); - - priceNode.appendChild( newUnitPrice ); + priceNode.appendChild( newUnitPrice ); + } } - } + }, 500 ); }, [ cart.cartItems ] ); diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss index 570e7469c..446d3a329 100644 --- a/assets/js/blocks/mini-cart/style.scss +++ b/assets/js/blocks/mini-cart/style.scss @@ -1,5 +1,13 @@ @import '../cart-checkout/items'; -.wp-block-woocommerce-mini-cart-contents .wc-block-components-totals-item__description { - display: none !important; +.wp-block-woocommerce-mini-cart-contents { + .wc-block-components-totals-item__description { + display: none !important; + } + + ul.wc-block-components-product-details { + li.wc-block-components-product-details__gzd-unit-price { + display: block !important; + } + } } \ No newline at end of file