Add WooCommerce default styles for block themes (#33518)

* Add WooCommerce default styles for block themes

* Ensure sale badge remains as is in Twenty Twenty-Two

* Style the mark element in theme colors

* Update product variations dropdowns

* address feedback

* address feedback

* fix store notice position

Co-authored-by: Luigi <gigitux@gmail.com>
This commit is contained in:
Michael P. Pfeiffer 2022-07-25 16:06:31 +02:00 committed by GitHub
parent 0b6de76567
commit 5ddcc40f04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 657 additions and 240 deletions

View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Add default styles for block themes to ensure WooCommerce looks better out of the box with block themes that are not optimized for WooCommerce specifically.

View File

@ -69,24 +69,21 @@ $tt2-gray: #f7f7f7;
top: -1rem;
right: -1rem;
position: absolute;
background: var( --wp--preset--color--secondary );
background: var(--wp--preset--color--secondary);
color: inherit;
border-radius: 2rem;
line-height: 2.6rem;
font-size: 0.8rem;
padding: 0rem 0.5rem 0rem 0.5rem;
}
.price ins, bdi {
text-decoration: none;
padding: 0 0.5rem 0 0.5rem;
}
.quantity {
input[type='number'] {
input[type="number"] {
width: 3em;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button{
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
opacity: 1;
}
}
@ -103,16 +100,16 @@ $tt2-gray: #f7f7f7;
.woocommerce-error,
.woocommerce-info {
background: $tt2-gray;
border-top-color: var( --wp--preset--color--primary );
border-top-color: var(--wp--preset--color--primary);
border-top-style: solid;
padding: 1rem 1.5rem;
margin-bottom: 2rem;
list-style: none;
font-size: var(--wp--preset--font-size--small);
&[role='alert']::before {
color: var( --wp--preset--color--background );
background: var( --wp--preset--color--primary );
&[role="alert"]::before {
color: var(--wp--preset--color--background);
background: var(--wp--preset--color--primary);
border-radius: 5rem;
font-size: 1rem;
padding-left: 3px;
@ -134,11 +131,11 @@ $tt2-gray: #f7f7f7;
}
}
.woocommerce-error[role='alert'] {
.woocommerce-error[role="alert"] {
margin: 0;
&::before {
content: 'X';
content: "X";
padding-right: 4px;
padding-left: 4px;
}
@ -149,13 +146,13 @@ $tt2-gray: #f7f7f7;
}
.woocommerce-message {
&[role='alert']::before {
content: '\2713';
&[role="alert"]::before {
content: "\2713";
}
}
.woocommerce-NoticeGroup-checkout {
ul.woocommerce-error[role='alert'] {
ul.woocommerce-error[role="alert"] {
&::before {
display: none;
}
@ -167,14 +164,14 @@ $tt2-gray: #f7f7f7;
}
a.button,
button[name='add-to-cart'],
input[name='submit'],
button[name="add-to-cart"],
input[name="submit"],
button.single_add_to_cart_button,
button[type='submit']:not(.wp-block-search__button) {
button[type="submit"]:not(.wp-block-search__button) {
display: inline-block;
text-align: center;
word-break: break-word;
background-color: var( --wp--preset--color--primary );
background-color: var(--wp--preset--color--primary);
color: #fff;
border: 1px solid var(--wp--preset--color--black);
padding: 1rem 2rem;
@ -185,11 +182,37 @@ $tt2-gray: #f7f7f7;
&:hover,
&:visited {
color: var( --wp--preset--color--white );
color: var(--wp--preset--color--white);
text-decoration: underline;
}
}
#respond input#submit.alt,
a.button.alt,
button.button.alt,
input.button.alt {
background-color: var(--wp--preset--color--primary);
color: #fff;
&:hover {
background-color: var(--wp--preset--color--primary);
color: #fff;
opacity: 1;
}
&.disabled,
&:disabled,
&:disabled[disabled],
&.disabled:hover,
&:disabled:hover,
&:disabled[disabled]:hover {
background-color: var(--wp--preset--color--primary);
color: #fff;
opacity: 0.5;
cursor: not-allowed;
}
}
button.woocommerce-form-login__submit,
button.single_add_to_cart_button,
a.checkout-button {
@ -229,9 +252,8 @@ $tt2-gray: #f7f7f7;
}
h2.woocommerce-loop-product__title {
color: var( --wp--preset--color--primary );
font-family: var( --wp--preset--font-family--system-font );
font-size: 1.2rem;
color: var(--wp--preset--color--primary);
font-family: var(--wp--preset--font-family--system-font);
text-decoration: none;
margin-bottom: 0;
}
@ -244,10 +266,6 @@ $tt2-gray: #f7f7f7;
}
}
a.added_to_cart {
display: block;
margin-top: 1rem;
}
}
}
@ -258,12 +276,6 @@ $tt2-gray: #f7f7f7;
div.product {
position: relative;
&::after {
content: "";
display: block;
clear: both;
}
> span.onsale {
position: absolute;
left: -1rem;
@ -286,8 +298,8 @@ $tt2-gray: #f7f7f7;
line-height: 1.5rem;
padding: 0;
font-size: 0.6rem;
background: var( --wp--preset--color--white );
border-color: var( --wp--preset--color--white );
background: var(--wp--preset--color--white);
border-color: var(--wp--preset--color--white);
height: 1.5rem;
width: 1.5rem;
overflow: hidden;
@ -309,10 +321,6 @@ $tt2-gray: #f7f7f7;
div.summary {
font-size: 1rem;
> *{
margin-bottom: var( --wp--style--block-gap );
}
h1.product_title {
font-size: 2.5rem;
margin: 0;
@ -336,24 +344,10 @@ $tt2-gray: #f7f7f7;
}
}
button[name='add-to-cart'], button.single_add_to_cart_button {
button[name="add-to-cart"],
button.single_add_to_cart_button {
margin-top: 0.5rem;
margin-bottom: var( --wp--style--block-gap );
}
table.variations {
tr {
display: block;
margin-bottom: var( --wp--style--block-gap );
th {
padding-right: 1rem;
}
td select {
padding: 2px;
}
}
margin-bottom: var(--wp--style--block-gap);
}
ol.flex-control-thumbs {
@ -380,7 +374,7 @@ $tt2-gray: #f7f7f7;
padding-bottom: 1rem;
}
margin-bottom: var( --wp--style--block-gap );
margin-bottom: var(--wp--style--block-gap);
}
.related.products {
@ -389,37 +383,35 @@ $tt2-gray: #f7f7f7;
}
.woocommerce-tabs {
padding-top: var( --wp--style--block-gap );
padding-top: var(--wp--style--block-gap);
ul.wc-tabs {
padding: 0;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #EAE9EB;
border-bottom-color: #eae9eb;
li {
background: #EAE9EB;
background: #eae9eb;
margin: 0;
padding: 0.5em 1em 0.5em 1em;
border-color: #EAE9EB;
border-color: #eae9eb;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
float: left;
border-style: solid;
border-width: 1px;
border-left-color: var( --wp--preset--color--background );
border-left-color: var(--wp--preset--color--background);
font-weight: 600;
font-size: var(--wp--preset--font-size--medium);
&:first-child {
border-left-color: #EAE9EB;
border-left-color: #eae9eb;
margin-left: 1em;
}
&.active {
background: var( --wp--preset--color--background );
border-bottom-color: var( --wp--preset--color--background );
box-shadow: 0 1px var( --wp--preset--color--background );
box-shadow: 0 1px var(--wp--preset--color--background);
}
a {
@ -429,7 +421,7 @@ $tt2-gray: #f7f7f7;
}
.woocommerce-Tabs-panel {
padding-top: var( --wp--style--block-gap );
padding-top: var(--wp--style--block-gap);
font-size: var(--wp--preset--font-size--small);
margin-left: 1em;
@ -454,7 +446,7 @@ $tt2-gray: #f7f7f7;
.comment-text {
display: inline-block;
padding-left: var( --wp--style--block-gap );
padding-left: var(--wp--style--block-gap);
.star-rating {
margin-top: 0;
@ -467,14 +459,14 @@ $tt2-gray: #f7f7f7;
.comment-form-rating {
label {
display: inline-block;
padding-right: var( --wp--style--block-gap );
padding-top: var( --wp--style--block-gap );
padding-right: var(--wp--style--block-gap);
padding-top: var(--wp--style--block-gap);
}
p.stars {
display: inline;
a::before {
color: var( --wp--preset--color--secondary );
color: var(--wp--preset--color--secondary);
}
}
}
@ -482,18 +474,13 @@ $tt2-gray: #f7f7f7;
.comment-form-comment {
label {
float: left;
padding-right: var( --wp--style--block-gap );
padding-right: var(--wp--style--block-gap);
}
}
#review_form_wrapper {
margin-top: 5rem;
}
.comment-reply-title {
font-size: var(--wp--preset--font-size--medium);
font-weight: 700;
}
}
@ -504,8 +491,8 @@ $tt2-gray: #f7f7f7;
line-height: 1;
width: 5.4rem;
font-family: star;
color: var( --wp--preset--color--secondary );
margin: 1rem auto .7rem auto;
color: var(--wp--preset--color--secondary);
margin: 1rem auto 0.7rem auto;
&::before {
content: "\73\73\73\73\73";
@ -609,14 +596,15 @@ $tt2-gray: #f7f7f7;
.return-to-shop {
a.button {
background-color: #fff;
color: var( --wp--preset--color--primary );
border: 2px solid var( --wp--preset--color--primary );
color: var(--wp--preset--color--primary);
border: 2px solid var(--wp--preset--color--primary);
padding: 0.7rem 2rem;
}
}
mark {
background: var( --wp--preset--color--secondary );
background: var(--wp--preset--color--secondary);
color: initial;
}
}
@ -630,12 +618,6 @@ $tt2-gray: #f7f7f7;
.input-text {
border: 1px solid var(--wp--preset--color--black);
border-radius: 0;
font-size: var(--wp--preset--font-size--small);
padding: .9rem 1.1rem;
}
label {
margin-bottom: .7rem;
}
abbr.required {
@ -650,7 +632,7 @@ $tt2-gray: #f7f7f7;
}
}
input[type="radio"][name='payment_method'],
input[type="radio"][name="payment_method"],
input[type="radio"].shipping_method {
display: none;
@ -666,7 +648,7 @@ $tt2-gray: #f7f7f7;
margin-left: 4px;
margin-right: 1.2rem;
border-radius: 100%;
transform: translateY(.2rem);
transform: translateY(0.2rem);
}
}
@ -696,8 +678,8 @@ $tt2-gray: #f7f7f7;
width: 1rem;
border: 2px solid var(--wp--preset--color--black);
background: var(--wp--preset--color--white);
margin-right: .5rem;
transform: translateY(.2rem);
margin-right: 0.5rem;
transform: translateY(0.2rem);
}
}
@ -707,15 +689,12 @@ $tt2-gray: #f7f7f7;
input[type="checkbox"]:checked + span::before {
background: var(--wp--preset--color--black);
box-shadow: inset .2rem .2rem var(--wp--preset--color--white), inset -.2rem -.2rem var(--wp--preset--color--white);
box-shadow: inset 0.2rem 0.2rem var(--wp--preset--color--white), inset -0.2rem -0.2rem var(--wp--preset--color--white);
}
}
table.shop_table_responsive {
width: 100%;
text-align: left;
border-collapse: collapse;
th,
td {
@ -730,7 +709,7 @@ $tt2-gray: #f7f7f7;
tbody {
tr {
border-top: 1px solid var( --wp--preset--color--black );
border-top: 1px solid var(--wp--preset--color--black);
}
td {
@ -794,13 +773,16 @@ $tt2-gray: #f7f7f7;
*/
.woocommerce-cart-form {
#coupon_code {
width: auto;
#coupon_code,
.actions .button {
height: auto;
margin-right: 0;
}
table.shop_table_responsive {
td, th {
td,
th {
padding: 1rem 0 0.5rem 1rem;
}
@ -816,43 +798,30 @@ $tt2-gray: #f7f7f7;
}
.product-remove {
width: auto;
text-align: left !important;
}
#coupon_code {
width: 50%;
float: left;
margin-bottom: 1rem;
}
}
}
button[name='apply_coupon'],
button[name='update_cart'] {
button[name="apply_coupon"],
button[name="update_cart"] {
padding: 1rem 2rem;
border: 2px solid #ebe9eb;
margin: 0;
}
.product-remove {
width: 1rem;
font-size: var(--wp--preset--font-size--large);
a {
text-decoration: none;
}
}
.product-thumbnail {
width: 7.5rem;
a {
img {
width: 117px;
}
}
}
}
}
@ -862,7 +831,6 @@ $tt2-gray: #f7f7f7;
h2 {
text-transform: uppercase;
font-family: inherit;
font-size: var(--wp--preset--font-size--medium);
}
table.shop_table_responsive {
@ -875,13 +843,14 @@ $tt2-gray: #f7f7f7;
width: 11rem;
}
td, th {
td,
th {
padding: 1rem 0;
vertical-align: text-top;
}
}
button[name='calc_shipping'] {
button[name="calc_shipping"] {
padding: 1rem 2rem;
}
@ -914,7 +883,8 @@ $tt2-gray: #f7f7f7;
width: 53%;
float: left;
.col-1, .col-2 {
.col-1,
.col-2 {
width: 100%;
float: none;
}
@ -949,7 +919,8 @@ $tt2-gray: #f7f7f7;
font-weight: normal;
}
th, td {
th,
td {
padding: 1rem 1rem 1rem 0;
vertical-align: text-top;
}
@ -992,7 +963,7 @@ $tt2-gray: #f7f7f7;
width: calc(100% - 1.5rem);
.form-row {
button[name='apply_coupon'] {
button[name="apply_coupon"] {
margin-top: 0;
}
}
@ -1005,8 +976,8 @@ $tt2-gray: #f7f7f7;
list-style-type: none;
padding-left: 0;
input[type='radio'] {
margin-right: .6rem;
input[type="radio"] {
margin-right: 0.6rem;
}
li.wc_payment_method {
@ -1021,24 +992,16 @@ $tt2-gray: #f7f7f7;
.woocommerce-thankyou-order-received,
h2.woocommerce-column__title {
font-family: var(--wp--preset--font-family--source-serif-pro);
font-size: var(--wp--preset--font-size--large);
font-weight: 300;
}
.woocommerce-order > * {
margin-bottom: var( --wp--style--block-gap );
margin-bottom: var(--wp--style--block-gap);
}
ul.woocommerce-order-overview {
font-size: var(--wp--preset--font-size--small);
display: flex;
padding-left: 0;
width: 100%;
li {
display: inline;
flex-grow: 1;
margin-bottom: 1rem;
text-transform: uppercase;
strong {
@ -1046,19 +1009,14 @@ $tt2-gray: #f7f7f7;
display: block;
}
}
@media only screen and (max-width: 768px) {
flex-direction: column;
}
}
.woocommerce-customer-details {
address {
padding: 2rem;
border: 1px solid var(--wp--preset--color--black);
font-style: inherit;
p[class^='woocommerce-customer-details--'] {
p[class^="woocommerce-customer-details--"] {
&:first-of-type {
margin-top: 2rem;
}
@ -1068,12 +1026,12 @@ $tt2-gray: #f7f7f7;
}
.woocommerce-customer-details--phone::before {
content: '\01F4DE';
content: "\01F4DE";
margin-right: 1rem;
}
.woocommerce-customer-details--email::before {
content: '\2709';
content: "\2709";
margin-right: 1rem;
font-size: 1.8rem;
}
@ -1082,12 +1040,10 @@ $tt2-gray: #f7f7f7;
.woocommerce-table--order-details {
border: 1px solid var(--wp--preset--color--black);
border-collapse: collapse;
width: 70%;
th, td {
th,
td {
text-align: left;
padding: 1rem;
border-top: 1px solid var(--wp--preset--color--black);
border-bottom: 1px solid var(--wp--preset--color--black);
font-weight: normal;
@ -1096,22 +1052,11 @@ $tt2-gray: #f7f7f7;
thead th {
text-transform: uppercase;
}
@media only screen and (max-width: 768px) {
width: 100%;
}
}
}
.select2-container {
.select2-selection,
.select2-search__field {
height: 3.5rem;
font-size: var(--wp--preset--font-size--small);
padding: .9rem 1.1rem;
}
.select2-selection,
.select2-dropdown {
border: 1px solid var(--wp--preset--color--black);
@ -1120,22 +1065,12 @@ $tt2-gray: #f7f7f7;
.select2-dropdown {
border-top: 0;
padding: .9rem 1.1rem;
.select2-search__field {
border: 1px solid var(--wp--preset--color--black);
border-radius: 0;
margin-bottom: 1rem;
}
}
.select2-selection .select2-selection__arrow {
height: 3.5rem;
position: absolute;
top: 0;
right: 0;
width: 3rem;
}
}
/**
@ -1145,64 +1080,28 @@ $tt2-gray: #f7f7f7;
.woocommerce-MyAccount-navigation {
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
padding: 1rem 0;
&:first-child {
padding-top: 0;
}
a {
box-shadow: none;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
&.is-active {
a {
color: var( --wp--preset--color--primary );
text-decoration: underline;
color: var(--wp--preset--color--primary);
}
}
}
}
.woocommerce-MyAccount-content {
> p:first-of-type,
p.form-row-first,
p.form-row-last {
margin-block-start: 0px;
}
}
&.woocommerce-edit-address {
.woocommerce-MyAccount-content {
form > h3 {
margin-block-start: 0px;
}
}
table.shop_table_responsive.my_account_orders th {
padding-top: 0;
}
.woocommerce-form-login {
max-width: 516px;
margin: 0 auto;
.show-password-input {
top: .8rem;
right: 1.2rem;
}
}
}
@ -1211,7 +1110,7 @@ $tt2-gray: #f7f7f7;
font-weight: normal;
}
.wp-block-search__input {
padding: .9rem 1.1rem;
padding: 0.9rem 1.1rem;
border: 1px solid var(--wp--preset--color--black);
}
.wp-block-search__button {
@ -1228,7 +1127,7 @@ $tt2-gray: #f7f7f7;
max-width: 100%;
.wc-block-product-search__field {
padding: .9rem 1.1rem;
padding: 0.9rem 1.1rem;
flex-grow: 1;
border: 1px solid var(--wp--preset--color--black);
font-size: inherit;
@ -1237,19 +1136,19 @@ $tt2-gray: #f7f7f7;
.wc-block-product-search__button {
display: flex;
background-color: var( --wp--preset--color--primary );
background-color: var(--wp--preset--color--primary);
color: #fff;
border: 1px solid var(--wp--preset--color--black);
padding: 1rem 1.2rem;
margin: 0 0 0 .7rem;
margin: 0 0 0 0.7rem;
}
}
}
}
.woocommerce-store-notice {
.theme-twentytwentytwo .woocommerce-store-notice {
color: var(--wp--preset--color--black);
border-top: 2px solid var( --wp--preset--color--primary );
border-top: 2px solid var(--wp--preset--color--primary);
background: $tt2-gray;
padding: 2rem;
position: fixed;
@ -1262,6 +1161,6 @@ $tt2-gray: #f7f7f7;
.woocommerce-store-notice__dismiss-link {
float: right;
margin-right: 4rem;
color: inherit;
}
}

View File

@ -0,0 +1,503 @@
/**
* woocommerce-blocktheme.scss
* Block theme default styles to ensure WooCommerce looks better out of the box with block themes that are not optimised for WooCommerce specifically.
*/
@import "variables";
/**
* Layout
*/
.woocommerce-cart,
.woocommerce-account,
.woocommerce-checkout {
.wp-block-post-title,
main .woocommerce {
// Allow Cart/Checkout/Account pages more space to breathe.
max-width: 1000px;
}
}
/**
* General
*/
.woocommerce {
mark {
// Style the mark element in theme colors.
// For details see https://github.com/woocommerce/woocommerce/pull/31631.
background-color: var(--wp--preset--color--foreground, $highlight);
color: var(--wp--preset--color--background, $highlightext);
}
/**
* Buttons
*/
a.button,
button[name="add-to-cart"],
input[name="submit"],
button.single_add_to_cart_button,
button[type="submit"]:not(.wp-block-search__button) {
// Slightly increase CTA size across the board.
padding: 0.9rem 1.1rem;
}
button.button,
a.button {
background-color: var(--wp--preset--color--foreground, $primary);
color: var(--wp--preset--color--background, $primarytext);
&.disabled,
&:disabled,
&:disabled[disabled],
&.disabled:hover,
&:disabled:hover,
&:disabled[disabled]:hover {
background-color: var(--wp--preset--color--foreground, $primary);
color: var(--wp--preset--color--background, $primarytext);
opacity: 0.5;
}
}
#respond input#submit,
input.button,
a.button.alt {
// Style primary WooCommerce CTAs in theme colors by default.
background-color: var(--wp--preset--color--foreground, $primary);
color: var(--wp--preset--color--background, $primarytext);
&:hover {
background-color: var(--wp--preset--color--foreground, $primary);
color: var(--wp--preset--color--background, $primarytext);
opacity: 0.9;
}
&.disabled,
&:disabled,
&:disabled[disabled],
&.disabled:hover,
&:disabled:hover,
&:disabled[disabled]:hover {
background-color: var(--wp--preset--color--foreground, $primary);
color: var(--wp--preset--color--background, $primarytext);
opacity: 0.5;
}
}
}
/**
* Products
*/
.woocommerce {
/**
* Shop products list
*/
ul.products li.product .woocommerce-loop-product__title {
// Slightly increase font size to make product title more readable.
font-size: 1.2rem;
}
/**
* Single Product
*/
div.product {
// Ensure the single product contains its content.
// For details see https://github.com/woocommerce/woocommerce/pull/33511.
&::after {
content: "";
display: block;
clear: both;
}
div.summary > * {
// Ensure a more even block gap spacing in product summary.
margin-bottom: var(--wp--style--block-gap);
}
.woocommerce-tabs {
ul.tabs li.active {
// Style active tab in theme colors.
background: var(--wp--preset--color--background, $contentbg);
border-bottom-color: var(--wp--preset--color--background, $contentbg);
&::before {
box-shadow: 2px 2px 0 var(--wp--preset--color--background, $contentbg);
}
&::after {
box-shadow: -2px 2px 0 var(--wp--preset--color--background, $contentbg);
}
}
}
.quantity {
// Adjust positioning of quantity selector and button.
.qty {
margin-right: 0.5rem;
}
+ .single_add_to_cart_button {
min-height: 51px;
}
}
.related.products {
// Ensure related products doesn't stick to product tabs.
margin-top: 5rem;
}
}
.woocommerce-Reviews {
#comments {
// Add spacing between the review comments and the review form.
margin-bottom: var(--wp--style--block-gap);
}
.commentlist {
// Ensure review comments width doesn't exceed review container.
box-sizing: border-box;
}
.comment-reply-title {
// Make review form title visually distinct.
font-size: var(--wp--preset--font-size--medium);
font-weight: 700;
}
}
.price ins,
bdi {
// Ensure discounted prices aren't underlined.
// For details see https://github.com/woocommerce/woocommerce-blocks/pull/5684.
text-decoration: none;
}
a.added_to_cart {
// Prevent "View Cart" button from sticking to "Add to Cart" button.
// For details see https://github.com/woocommerce/woocommerce-blocks/issues/5285.
display: block;
margin-top: 1rem;
}
span.onsale {
// Style "On Sale" badge in theme colors by default.
background-color: var(--wp--preset--color--foreground, $highlight);
color: var(--wp--preset--color--background, $highlightext);
}
/**
* Product variations
*/
table.variations {
tr {
// Limit variation dropdown width and add block gap.
display: block;
margin-bottom: var(--wp--style--block-gap);
th {
// Ensure variation label doesn't stick to dropdown.
padding-right: 1rem;
}
td select {
// Add padding to product variation dropdowns.
height: 3.5rem;
padding: 0.9rem 1.1rem;
font-size: var(--wp--preset--font-size--small);
}
}
}
div.product form.cart table.variations th {
// Ensure variation label is vertically centered.
line-height: 3.5rem;
}
}
/**
* Form elements
*/
.woocommerce-page {
// Ensure text input fields aren't too small.
.input-text {
font-size: var(--wp--preset--font-size--small);
padding: 0.9rem 1.1rem;
}
label {
margin-bottom: 0.7rem;
}
// Ensure dropdowns are visually consistent with other form fields.
.select2-container {
.select2-selection,
.select2-search__field {
height: 3.5rem;
font-size: var(--wp--preset--font-size--small);
padding: 0.9rem 1.1rem;
}
.select2-dropdown {
padding: 0.9rem 1.1rem;
.select2-search__field {
margin-bottom: 1rem;
}
}
.select2-selection .select2-selection__arrow {
position: absolute;
top: 0;
right: 0;
width: 3rem;
height: 3.5rem;
}
}
}
.woocommerce {
form {
.form-row {
margin-bottom: 1rem;
}
textarea {
// Ensure textareas don't look squished.
min-height: 100px;
}
}
}
/**
* Cart / Checkout
*/
.woocommerce-page {
/**
* Tables
*/
table.shop_table {
// Adjust table width to new checkout width.
width: 70%;
border-collapse: collapse;
@media only screen and ( max-width: 768px ) {
width: 100%;
}
th,
td {
// Allow cells more space to breathe.
padding: 1rem;
}
}
table.shop_table_responsive {
// Responsive tables should still take up the full width.
width: 100%;
}
/**
* Cart specific
*/
.woocommerce-cart-form {
.product-remove {
// Decrease width of the product remove column.
width: 1rem;
}
.product-thumbnail {
// Increase product thumbnails to improve visually fidelity.
width: 120px;
a img {
width: 117px;
}
}
#coupon_code {
// Allow sufficient space for the coupon code.
width: auto;
margin-right: 0.8rem;
}
#coupon_code,
.actions .button {
height: 50px;
padding: 0.9rem 1.1rem;
font-size: var(--wp--preset--font-size--small);
}
@media only screen and ( max-width: 768px ) {
.product-remove {
width: auto;
}
#coupon_code {
width: 50%;
margin-right: 0;
}
}
}
.cart-collaterals h2 {
// Ensure cart subheadline size is reasonable.
font-size: var(--wp--preset--font-size--medium);
}
/**
* Checkout specific
*/
.woocommerce-form-coupon .button {
min-height: 50px;
}
/**
* Order confirmation
*/
.woocommerce-thankyou-order-received,
h2.woocommerce-column__title {
font-size: var(--wp--preset--font-size--large);
font-weight: 300;
}
ul.woocommerce-order-overview {
// Display order overview items next to each other.
display: flex;
width: 100%;
padding-left: 0;
font-size: var(--wp--preset--font-size--small);
@media only screen and ( max-width: 768px ) {
flex-direction: column;
}
li {
flex-grow: 1;
margin-bottom: 1rem;
border: none;
}
}
.woocommerce-customer-details address {
// Ensure customer details match order overview.
box-sizing: border-box;
width: 70%;
padding: 2rem;
border-width: 1px;
border-radius: 0;
}
}
/**
* My account
*/
.woocommerce-account {
.woocommerce-MyAccount-navigation {
ul {
// Ensure top left alignment of the navigation.
margin: 0 0 2rem;
padding: 0;
}
li {
// Remove default list styling.
list-style: none;
padding: 1rem 0;
@media only screen and ( max-width: 768px ) {
padding: 0.35rem 0;
}
&:first-child {
padding-top: 0;
}
&.is-active {
a {
text-decoration: underline;
}
}
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
.woocommerce-MyAccount-content {
> p:first-of-type,
p.form-row-first,
p.form-row-last {
// Ensure first paragraph in content is top aligned.
margin-block-start: 0;
}
}
table.shop_table.order_details,
.woocommerce-customer-details address {
// Ensure order/customer details are full width in My Account.
width: 100%;
}
.addresses .title .edit {
// Align "Add" and "Edit" buttons when title is too long (/my-account/edit-address/).
display: block;
margin-bottom: 1rem;
}
&.woocommerce-edit-address .woocommerce-MyAccount-content form > h3 {
// Ensure headline is top aligned (/my-account/edit-address/shipping/).
margin-block-start: 0;
}
.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions {
a {
display: block;
margin-bottom: 1em;
text-align: center;
}
}
}
/**
* My account - Login form
*/
.woocommerce-page {
.woocommerce-form-login {
.input-text {
// Ensure inputs are well spaced.
font-size: var(--wp--preset--font-size--small);
padding: 0.9rem 1.1rem;
}
label {
margin-bottom: 0.7rem;
}
.show-password-input {
// Adjust password field icon position.
top: 0.8rem;
right: 1.2rem;
}
}
}
/**
* Store notice
*/
p.demo_store,
.woocommerce-store-notice {
// Add theme colors to the store notice.
background: var(--wp--preset--color--foreground, $primary);
bottom: 0;
color: var(--wp--preset--color--background, $primarytext);
position: fixed;
top: auto !important;
a {
color: var(--wp--preset--color--background, $primarytext);
}
}

View File

@ -6,6 +6,8 @@
* @version 2.3.0
*/
// phpcs:disable WooCommerce.Commenting.CommentHooks.MissingHookComment
use Automattic\Jetpack\Constants;
if ( ! defined( 'ABSPATH' ) ) {
@ -55,30 +57,39 @@ class WC_Frontend_Scripts {
public static function get_styles() {
$version = Constants::get_constant( 'WC_VERSION' );
return apply_filters(
'woocommerce_enqueue_styles',
array(
'woocommerce-layout' => array(
'src' => self::get_asset_url( 'assets/css/woocommerce-layout.css' ),
'deps' => '',
'version' => $version,
'media' => 'all',
'has_rtl' => true,
),
'woocommerce-smallscreen' => array(
'src' => self::get_asset_url( 'assets/css/woocommerce-smallscreen.css' ),
'deps' => 'woocommerce-layout',
'version' => $version,
'media' => 'only screen and (max-width: ' . apply_filters( 'woocommerce_style_smallscreen_breakpoint', '768px' ) . ')',
'has_rtl' => true,
),
'woocommerce-general' => array(
'src' => self::get_asset_url( 'assets/css/woocommerce.css' ),
'deps' => '',
'version' => $version,
'media' => 'all',
'has_rtl' => true,
),
return array_filter(
apply_filters(
'woocommerce_enqueue_styles',
array(
'woocommerce-layout' => array(
'src' => self::get_asset_url( 'assets/css/woocommerce-layout.css' ),
'deps' => '',
'version' => $version,
'media' => 'all',
'has_rtl' => true,
),
'woocommerce-smallscreen' => array(
'src' => self::get_asset_url( 'assets/css/woocommerce-smallscreen.css' ),
'deps' => 'woocommerce-layout',
'version' => $version,
'media' => 'only screen and (max-width: ' . apply_filters( 'woocommerce_style_smallscreen_breakpoint', '768px' ) . ')',
'has_rtl' => true,
),
'woocommerce-general' => array(
'src' => self::get_asset_url( 'assets/css/woocommerce.css' ),
'deps' => '',
'version' => $version,
'media' => 'all',
'has_rtl' => true,
),
'woocommerce-blocktheme' => wc_current_theme_is_fse_theme() ? array(
'src' => self::get_asset_url( 'assets/css/woocommerce-blocktheme.css' ),
'deps' => '',
'version' => $version,
'media' => 'all',
'has_rtl' => true,
) : false,
)
)
);
}
@ -476,8 +487,8 @@ class WC_Frontend_Scripts {
break;
case 'wc-geolocation':
$params = array(
'wc_ajax_url' => WC_AJAX::get_endpoint( '%%endpoint%%' ),
'home_url' => remove_query_arg( 'lang', home_url() ), // FIX for WPML compatibility.
'wc_ajax_url' => WC_AJAX::get_endpoint( '%%endpoint%%' ),
'home_url' => remove_query_arg( 'lang', home_url() ), // FIX for WPML compatibility.
);
break;
case 'wc-single-product':