diff --git a/readme.txt b/readme.txt index bb903570..3a4f9e8a 100644 --- a/readme.txt +++ b/readme.txt @@ -100,6 +100,10 @@ This theme makes use of the [SiteOrigin Settings Framework](https://github.com/s == Changelog == += 1.19.0 - 18 March 2022 = +* WooCommerce: Introduced a custom product variation drop-down design. +* WooCommerce: Minor variation styling adjustment to Cart and Checkout pages. + = 1.18.11 - 16 February 2022 = * Updated SiteOrigin Settings: Excluded websafe fonts from Google Fonts enqueue. diff --git a/sass/woocommerce/_archive.scss b/sass/woocommerce/_archive.scss index e3f75721..472e3e5f 100644 --- a/sass/woocommerce/_archive.scss +++ b/sass/woocommerce/_archive.scss @@ -32,102 +32,6 @@ .woocommerce-ordering { display: block; float: right; - - select { - font-size: 13px; - } - - @media (max-width: 768px) { - float: none; - } - - .ordering-selector-wrapper { - border: 1px solid $color__background-hr-dark; - border-radius: 2px; - cursor: pointer; - font-size: 13px; - line-height: normal; - padding: 10px 15px; - position: relative; - - .current { - display: inline-block; - } - - svg { - float: right; - margin: 5px 0 0 10px; - transform: rotate(0deg); - - path { - fill: $color__text-medium; - } - } - - &:hover { - color: $color__text-dark; - - svg path { - fill: $color__text-dark; - } - } - - .ordering-dropdown-container { - left: -1px; - min-height: 1px; - position: absolute; - right: -1px; - top: 100%; - z-index: 999; - } - - .ordering-dropdown { - background: #fff; - border: 1px solid $color__background-hr-dark; - box-shadow: 0 1px 1px rgba(0, 0, 0, .07); - display: block; - list-style: none; - margin: 0; - opacity: 0; - padding: 5px 0; - position: absolute; - top: 0; - transition: all 0.15s ease-in; - transform-origin: center top; - transform: scale(.95); - visibility: hidden; - width: 100%; - - li { - color: $color__text-light; - cursor: pointer; - padding: 10px 15px; - position: relative; - white-space: nowrap; - - &:hover { - color: $color__text-dark; - } - } - } - - &.open-dropdown { - - .ordering-dropdown { - opacity: 1; - transform: scale(1); - visibility: visible; - } - - svg { - transform: rotate(180deg); - - path { - fill: $color__text-dark; - } - } - } - } } // Sale Sticker. diff --git a/sass/woocommerce/_cart.scss b/sass/woocommerce/_cart.scss index 14ca4af3..dcf069ad 100644 --- a/sass/woocommerce/_cart.scss +++ b/sass/woocommerce/_cart.scss @@ -80,6 +80,10 @@ } } + dl.variation dd { + margin-left: 0; + } + .product-remove { font-size: 20px; text-align: center; diff --git a/sass/woocommerce/_checkout.scss b/sass/woocommerce/_checkout.scss index 21e14cea..4d02cb9e 100644 --- a/sass/woocommerce/_checkout.scss +++ b/sass/woocommerce/_checkout.scss @@ -175,6 +175,10 @@ form.checkout > .blockUI { padding-bottom: 30px; } } + + dl.variation dd { + margin-left: 0; + } } tfoot { diff --git a/sass/woocommerce/_forms.scss b/sass/woocommerce/_forms.scss index d6696e84..c48e633d 100644 --- a/sass/woocommerce/_forms.scss +++ b/sass/woocommerce/_forms.scss @@ -83,6 +83,105 @@ .form-row-wide { clear: both; } + + &.woocommerce-ordering, + .corp-variations-wrapper { + select { + font-size: 13px; + } + + @media (max-width: 768px) { + float: none; + } + + .ordering-selector-wrapper { + border: 1px solid $color__background-hr-dark; + border-radius: 2px; + cursor: pointer; + font-size: 13px; + line-height: normal; + padding: 10px 15px; + position: relative; + + .current { + display: inline-block; + } + + svg { + float: right; + margin: 5px 0 0 10px; + transform: rotate(0deg); + + path { + fill: $color__text-medium; + } + } + + &:hover { + color: $color__text-dark; + + svg path { + fill: $color__text-dark; + } + } + + .ordering-dropdown-container { + left: -1px; + min-height: 1px; + position: absolute; + right: -1px; + top: 100%; + z-index: 999; + } + + .ordering-dropdown { + background: #fff; + border: 1px solid $color__background-hr-dark; + box-shadow: 0 1px 1px rgba(0, 0, 0, .07); + display: block; + list-style: none; + margin: 0; + opacity: 0; + padding: 5px 0; + position: absolute; + top: 0; + transition: all 0.15s ease-in; + transform-origin: center top; + transform: scale(.95); + visibility: hidden; + width: 100%; + + li { + color: $color__text-light; + cursor: pointer; + padding: 10px 15px; + position: relative; + white-space: nowrap; + + &:hover { + color: $color__text-dark; + } + } + } + + &.open-dropdown { + + .ordering-dropdown { + opacity: 1; + transform: scale(1); + visibility: visible; + } + + svg { + transform: rotate(180deg); + + path { + fill: $color__text-dark; + } + } + } + } + } } // Login form. diff --git a/sass/woocommerce/_single.scss b/sass/woocommerce/_single.scss index e2684a08..1ea2e6a1 100644 --- a/sass/woocommerce/_single.scss +++ b/sass/woocommerce/_single.scss @@ -221,6 +221,19 @@ } } + form.cart table.variations { + + .corp-variations-wrapper { + display: inline-block; + position: relative; + } + + select { + -webkit-appearance: none; + padding: 1px 27px 0 10px; + } + } + .woocommerce-variation .woocommerce-variation-price .price { display: block; width: 100%; diff --git a/woocommerce.css b/woocommerce.css index 32806f6d..e439867b 100644 --- a/woocommerce.css +++ b/woocommerce.css @@ -237,6 +237,88 @@ input.button.added:after, .woocommerce form .form-row-wide { clear: both; } +.woocommerce form.woocommerce-ordering select, +.woocommerce form .corp-variations-wrapper select { + font-size: 13px; } + +@media (max-width: 768px) { + .woocommerce form.woocommerce-ordering, + .woocommerce form .corp-variations-wrapper { + float: none; } } + +.woocommerce form.woocommerce-ordering .ordering-selector-wrapper, +.woocommerce form .corp-variations-wrapper .ordering-selector-wrapper { + border: 1px solid #d6d6d6; + border-radius: 2px; + cursor: pointer; + font-size: 13px; + line-height: normal; + padding: 10px 15px; + position: relative; } + .woocommerce form.woocommerce-ordering .ordering-selector-wrapper .current, + .woocommerce form .corp-variations-wrapper .ordering-selector-wrapper .current { + display: inline-block; } + .woocommerce form.woocommerce-ordering .ordering-selector-wrapper svg, + .woocommerce form .corp-variations-wrapper .ordering-selector-wrapper svg { + float: right; + margin: 5px 0 0 10px; + transform: rotate(0deg); } + .woocommerce form.woocommerce-ordering .ordering-selector-wrapper svg path, + .woocommerce form .corp-variations-wrapper .ordering-selector-wrapper svg path { + fill: #626262; } + .woocommerce form.woocommerce-ordering .ordering-selector-wrapper:hover, + .woocommerce form .corp-variations-wrapper .ordering-selector-wrapper:hover { + color: #2d2d2d; } + .woocommerce form.woocommerce-ordering .ordering-selector-wrapper:hover svg path, + .woocommerce form .corp-variations-wrapper .ordering-selector-wrapper:hover svg path { + fill: #2d2d2d; } + .woocommerce form.woocommerce-ordering .ordering-selector-wrapper .ordering-dropdown-container, + .woocommerce form .corp-variations-wrapper .ordering-selector-wrapper .ordering-dropdown-container { + left: -1px; + min-height: 1px; + position: absolute; + right: -1px; + top: 100%; + z-index: 999; } + .woocommerce form.woocommerce-ordering .ordering-selector-wrapper .ordering-dropdown, + .woocommerce form .corp-variations-wrapper .ordering-selector-wrapper .ordering-dropdown { + background: #fff; + border: 1px solid #d6d6d6; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07); + display: block; + list-style: none; + margin: 0; + opacity: 0; + padding: 5px 0; + position: absolute; + top: 0; + transition: all 0.15s ease-in; + transform-origin: center top; + transform: scale(0.95); + visibility: hidden; + width: 100%; } + .woocommerce form.woocommerce-ordering .ordering-selector-wrapper .ordering-dropdown li, + .woocommerce form .corp-variations-wrapper .ordering-selector-wrapper .ordering-dropdown li { + color: #929292; + cursor: pointer; + padding: 10px 15px; + position: relative; + white-space: nowrap; } + .woocommerce form.woocommerce-ordering .ordering-selector-wrapper .ordering-dropdown li:hover, + .woocommerce form .corp-variations-wrapper .ordering-selector-wrapper .ordering-dropdown li:hover { + color: #2d2d2d; } + .woocommerce form.woocommerce-ordering .ordering-selector-wrapper.open-dropdown .ordering-dropdown, + .woocommerce form .corp-variations-wrapper .ordering-selector-wrapper.open-dropdown .ordering-dropdown { + opacity: 1; + transform: scale(1); + visibility: visible; } + .woocommerce form.woocommerce-ordering .ordering-selector-wrapper.open-dropdown svg, + .woocommerce form .corp-variations-wrapper .ordering-selector-wrapper.open-dropdown svg { + transform: rotate(180deg); } + .woocommerce form.woocommerce-ordering .ordering-selector-wrapper.open-dropdown svg path, + .woocommerce form .corp-variations-wrapper .ordering-selector-wrapper.open-dropdown svg path { + fill: #2d2d2d; } + .woocommerce .login .clear ~ .form-row { margin-bottom: 0; } @@ -314,70 +396,6 @@ input.button.added:after, .woocommerce .woocommerce-ordering { display: block; float: right; } - .woocommerce .woocommerce-ordering select { - font-size: 13px; } - @media (max-width: 768px) { - .woocommerce .woocommerce-ordering { - float: none; } } - .woocommerce .woocommerce-ordering .ordering-selector-wrapper { - border: 1px solid #d6d6d6; - border-radius: 2px; - cursor: pointer; - font-size: 13px; - line-height: normal; - padding: 10px 15px; - position: relative; } - .woocommerce .woocommerce-ordering .ordering-selector-wrapper .current { - display: inline-block; } - .woocommerce .woocommerce-ordering .ordering-selector-wrapper svg { - float: right; - margin: 5px 0 0 10px; - transform: rotate(0deg); } - .woocommerce .woocommerce-ordering .ordering-selector-wrapper svg path { - fill: #626262; } - .woocommerce .woocommerce-ordering .ordering-selector-wrapper:hover { - color: #2d2d2d; } - .woocommerce .woocommerce-ordering .ordering-selector-wrapper:hover svg path { - fill: #2d2d2d; } - .woocommerce .woocommerce-ordering .ordering-selector-wrapper .ordering-dropdown-container { - left: -1px; - min-height: 1px; - position: absolute; - right: -1px; - top: 100%; - z-index: 999; } - .woocommerce .woocommerce-ordering .ordering-selector-wrapper .ordering-dropdown { - background: #fff; - border: 1px solid #d6d6d6; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07); - display: block; - list-style: none; - margin: 0; - opacity: 0; - padding: 5px 0; - position: absolute; - top: 0; - transition: all 0.15s ease-in; - transform-origin: center top; - transform: scale(0.95); - visibility: hidden; - width: 100%; } - .woocommerce .woocommerce-ordering .ordering-selector-wrapper .ordering-dropdown li { - color: #929292; - cursor: pointer; - padding: 10px 15px; - position: relative; - white-space: nowrap; } - .woocommerce .woocommerce-ordering .ordering-selector-wrapper .ordering-dropdown li:hover { - color: #2d2d2d; } - .woocommerce .woocommerce-ordering .ordering-selector-wrapper.open-dropdown .ordering-dropdown { - opacity: 1; - transform: scale(1); - visibility: visible; } - .woocommerce .woocommerce-ordering .ordering-selector-wrapper.open-dropdown svg { - transform: rotate(180deg); } - .woocommerce .woocommerce-ordering .ordering-selector-wrapper.open-dropdown svg path { - fill: #2d2d2d; } .woocommerce .onsale { background: #f14e4e; @@ -766,6 +784,12 @@ input.button.added:after, left: 0; margin-left: 0; position: absolute; } + .woocommerce .product form.cart table.variations .corp-variations-wrapper { + display: inline-block; + position: relative; } + .woocommerce .product form.cart table.variations select { + -webkit-appearance: none; + padding: 1px 27px 0 10px; } .woocommerce .product .woocommerce-variation .woocommerce-variation-price .price { display: block; width: 100%; } @@ -1446,6 +1470,8 @@ ul.product_list_widget { font-weight: bold; } .woocommerce-cart table.cart .cart_item a:hover { color: #626262; } + .woocommerce-cart table.cart .cart_item dl.variation dd { + margin-left: 0; } .woocommerce-cart table.cart .cart_item .product-remove { font-size: 20px; text-align: center; } @@ -1780,6 +1806,8 @@ form.checkout > .blockUI { padding-top: 30px; } .woocommerce table.woocommerce-checkout-review-order-table .cart_item td:last-of-type { padding-bottom: 30px; } } + .woocommerce table.woocommerce-checkout-review-order-table .cart_item dl.variation dd { + margin-left: 0; } .woocommerce table.woocommerce-checkout-review-order-table tfoot { color: #2d2d2d; } @@ -2047,5 +2075,3 @@ form.checkout > .blockUI { --------------------------------------------------------------*/ .track_order p { margin-bottom: 26px; } - -/*# sourceMappingURL=sass/maps/woocommerce.css.map */ diff --git a/woocommerce/functions.php b/woocommerce/functions.php index b42fe930..a3c06ff2 100644 --- a/woocommerce/functions.php +++ b/woocommerce/functions.php @@ -168,3 +168,12 @@ function siteorigin_corp_woocommerce_archive_title() { * Custom WooCommerce template tags. */ include get_template_directory() . '/woocommerce/template-tags.php'; + +/** + * Add SVG arrow to single product variation select. + */ +function siteorigin_corp_woocommerce_nest_variation_select( $html, $args ) { + return '
' . $html . '
'; + +} +add_filter( 'woocommerce_dropdown_variation_attribute_options_html', 'siteorigin_corp_woocommerce_nest_variation_select', 10, 2 ); diff --git a/woocommerce/js/jquery.woocommerce.js b/woocommerce/js/jquery.woocommerce.js index adcc760f..653c60ef 100644 --- a/woocommerce/js/jquery.woocommerce.js +++ b/woocommerce/js/jquery.woocommerce.js @@ -6,8 +6,8 @@ jQuery( function( $ ) { // Product archive order drop-down. - $( '.woocommerce-ordering select' ).each( function() { - var $$ = $(this); + var setupWCDropdowns = function( dropdown ) { + var $$ = $( dropdown ); var c = $( '
' ) .html( '' + $$.find( ':selected' ).html() + '' + siteorigin_corp_data.chevron_down ) @@ -30,8 +30,12 @@ jQuery( function( $ ) { .html( $o.html() ) .data( 'val', $o.attr( 'value' ) ) .on( 'click', function() { - $$.val( $( this ).data( 'val' ) ); - $$.closest( 'form' ).trigger( 'submit' ); + $$.val( $( this ).data( 'val' ) ).trigger( 'change' ); + if ( $$.hasClass( 'woocommerce-ordering' ) ) { + $$.closest( 'form' ).trigger( 'submit' ); + } else { + c.find( '.current' ).text( $( this ).text() ); + } } ) ); @@ -42,10 +46,14 @@ jQuery( function( $ ) { c.find('.current').html( $$.find( ':selected' ).html() ).width( widest ); $$.hide(); + } + + $( '.woocommerce-ordering select, .corp-variations-wrapper select' ).each( function() { + setupWCDropdowns( this ); } ); // Open dropdown on click. - $( '.ordering-selector-wrapper' ).on( 'click', function() { + $( document ).on( 'click', '.ordering-selector-wrapper', function() { $( this ).toggleClass( 'open-dropdown' ); } ); @@ -55,7 +63,18 @@ jQuery( function( $ ) { $( '.ordering-selector-wrapper.open-dropdown' ).removeClass( 'open-dropdown' ); } } ); - + + // Reset dropdown when clicking clear. + $( document ).on( 'click', '.woocommerce .product .variations .reset_variations', function() { + $( this ).parents( '.variations_form' ).find( '.corp-variations-wrapper' ).each( function() { + var $$ = $( this ); + $$.find( '.current' ).text( $$.find( '.ordering-dropdown li' ).first().text() ); + + $$.find( 'option:selected' ).prop( 'selected', false ); + $$.find( 'select' ).trigger( 'change' ); + } ); + } ); + // Quick View modal. $( '.product-quick-view-button' ).on( 'click', function( e ) { e.preventDefault(); @@ -72,6 +91,10 @@ jQuery( function( $ ) { $( document ).find( $container ).find( $content ).html( data ); $( document ).find( '#product-quick-view .variations_form' ).wc_variation_form(); $( document ).find( '#product-quick-view .variations_form' ).trigger( 'check_variations' ); + // Setup variation drop downs to use the Corp WC Drop Down. + $( '#quick-view-container .corp-variations-wrapper select' ).each( function() { + setupWCDropdowns( this ); + } ); } ); @@ -97,10 +120,11 @@ jQuery( function( $ ) { } } ); - // Reset flexslider when WordPress wants to + // Reset flexslider when WooCommerce wants to $( '#product-quick-view .variations_form' ).on( 'reset_image', function( event, variation ) { $( '.product-images-slider' ).flexslider( 0 ); } ); + } } );