Storefront child themes issues with Cart and Checkout blocks

[Aljullu]

I tested all themes listed in the Storefront Themes category in WooCommerce.com with the Cart and Checkout blocks. Below is a list of issues I detected. Notice some of this issues might be in WC Blocks, some others in Storefront and some others in the child theme. However, I'm listing all of them here so we can investigate it further and open issues in the relevant repos.

I think, some of the themes listed in that page are not child themes of Storefront. So in the list below I split them between the ones that are Storefront child themes (they have some minor issues) and other themes (the experience is mostly broken).

Storefront child themes

Arcade

(I couldn't find any issue)

Bistro

(I couldn't find any issue)

Bookshop

• Panel titles and selects have a green background.
  

Boutique

(I couldn't find any issue)

Deli

• Order summary quantity badge is not readable.
  
• Text input and button don't have the same height. (Similar issue is affecting Block Shop)
  
• Proceed to Checkout button in Cart has a weird brown background. (Similar issue is affecting Arcade, Block Shop and ToyShop)
  

Galleria

• Panel titles have a border on hover that causes the content to jump.
  

Homestore

• Quantity input overflows in mobile.
  

Hotel

• Proceed to Checkout button has no background/border.
  
• Cart: there is no padding between table contents and border.
  

Outlet

• Buttons are not legible.
  

Petshop

(I couldn't find any issue)

Pharmacy

• Notices overflow page title.
  

ProShop

• Checkout: Card icons overflow checkbox label. (This issue is happening in several other themes)
  

Stationery

(I couldn't find any issue)

ToyShop

• Cart summary and Checkout order summary overflow the available space in narrow viewports.
  

Other themes

Artisan and Threads

(Both themes have very similar issues, so listing them together):

• Cart and Checkout: content breaks in two rows. (Fix Cart & Checkout sidebar layout broken in some themes #3111)
  

• Select label is not inline.
  

• Coupon chips are too big.
  

• Inputs and checkboxes are too big.
  

• Coupon code input and button are not aligned.
  

• Threads: cart table has a background.
  

• Threads: step number breaks in a separate line from number.
  

• There are some bugs in the checkout page when hovering over different elements.
  

• Wrong alignment on the "Proceed to checkout" button
  

• Wrong alignment between the radio buttons and the payment titles.
  

• Wrong alignment in the checkout form.
  

Block Shop

• Payment methods section layout is broken.
  
• Proceed to Checkout button is not visible.
  
• Product image has underground.
  
• No margin between product name and badges.
  
• Form fields are broken in several lines.
  
• Wrong alignment on the "Apply coupon" button.
  

Fifth Avenue

• Accessibility texts are visible in prices.
  
• 'Add a note to your order' is not vertically aligned.
  

Matthew

• CSS is not loading at all.
  

• Check icon is not legible.
  

We should change it to white.

• Wrong alignment on the product picture and the price.
  

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Remove the stale label or post a comment, otherwise it will be closed in 10 days.

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

[ghost]

Update: I've added some new issues to the "other themes" category.

[nerrad]

I'm going to close this because there are issues in the related repos for Storefront child themes compatibility and is being tracked separately.