Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Tweak the layout of the Add to cart block (#52648) 

* gridify input + button add to cart

* changelog

* css hacl to ensure full witdh when no children

* increse the CSS selectors to apply the grid

* avoid apply styles for steppers

* apply styles only to input in block editor context

* hack to align input + button at left

* fit content only for grouped products

* apply high span to align input + button elems

* ensure to define pseudo element

* fix eslint issues

* fix linting issues

* use a var to define whole width in grid
This commit is contained in:
Damián Suárez 2024-11-11 11:18:49 +00:00 committed by GitHub
parent 7fa6c5aed2
commit 713c0c79b2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 48 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
plugins/woocommerce-blocks/assets/js/blocks/product-elements/add-to-cart-form/editor.scss
View File

@ -6,6 +6,11 @@
width: 400px; width: 400px;
.components-disabled { .components-disabled {
display: flex; display: flex;
> .quantity:not(.wc-block-components-quantity-selector) .qty {
padding-top: 0;
padding-bottom: 0;
height: calc(100% - 4px); // 4px border width
}
} }
} }

50
plugins/woocommerce-blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scss
View File

@ -8,33 +8,61 @@
font-size: var(--wp--preset--font-size--small); font-size: var(--wp--preset--font-size--small);
padding: 0.9rem 1.1rem; padding: 0.9rem 1.1rem;
} }
} }
.wc-block-add-to-cart-form.wc-block-add-to-cart-form--input { /*
* Set the layout of the add-to-cart form to a grid.
*/
.wp-block-woocommerce-add-to-cart-form {
width: unset; width: unset;
.quantity { form.cart {
display: inline-block; --whole-width-in-grid: span 9999; // A large number to span the whole width of the grid.
float: none; &::before {
margin-right: 4px; content: " ";
vertical-align: middle; grid-column: var(--whole-width-in-grid);
}
display: grid;
> * {
// Hack to ensure input + button stat on the same row, together.
grid-column: var(--whole-width-in-grid);
}
> .quantity,
> .single_add_to_cart_button {
grid-column: span 1;
justify-self: start;
}
> .quantity:not(.wc-block-components-quantity-selector) .qty {
margin-right: 0.5em;
padding-top: 0;
padding-bottom: 0;
height: calc(100% - 4px); // 4px border width
}
&.grouped_form {
width: fit-content;
}
}
.quantity {
margin-right: 4px;
// WooCommerce core styles: https://github.com/woocommerce/woocommerce/blob/c9f62609155825cd817976c7611b9b0415e90f2f/plugins/woocommerce/client/legacy/css/woocommerce.scss/#L111-L112 // WooCommerce core styles: https://github.com/woocommerce/woocommerce/blob/c9f62609155825cd817976c7611b9b0415e90f2f/plugins/woocommerce/client/legacy/css/woocommerce.scss/#L111-L112
.qty { .qty {
margin-right: 0.5rem;
width: 3.631em; width: 3.631em;
text-align: center; text-align: center;
} }
} }
} }
// Stepper CSS // Stepper CSS
div.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper { div.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper {
form.cart { form.cart {
&:not(.grouped_form):not(.variations_form) {
display: block;
}
div.wc-block-components-quantity-selector { div.wc-block-components-quantity-selector {
display: inline-flex; display: inline-flex;
width: unset; width: unset;

4
plugins/woocommerce/changelog/update-add-to-cart-layout-based-on-grid Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: tweak
Tweak the layout of the Add to cart block