New Cart Block Formatting Issues

Resolved

(@ld899651)

I just switched over to the new checkout and cart blocks provided by Woocommerce, as they only became compatible with PayPal recently. Upon doing so, this is what the “place order” button looks like on the checkout block:

And this is what the product section in the checkout looks like:

However, on the cart page, the “proceed to checkout” and product sections look like this:

I’m not sure if these sections are intended to look different in the cart and checkout blocks, but I would like to make them both resemble the checkout page. Our theme is Neve, and here is the system report. Any help would be appreciated!

System Status Report

### WordPress Environment ###

WordPress address (URL): [Redacted]
Site address (URL): [Redacted]
WC Version: 10.0.4
Legacy REST API Package Version: The Legacy REST API plugin is not installed on this site.
Action Scheduler Version: ✔ 3.9.2
Log Directory Writable: ✔
WP Version: 6.8.2
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: –
WP Cron: ✔
Language: en_US
External object cache: –

### Server Environment ###

Server Info: Apache
Server Architecture: Linux 4.19.286-203.ELK.el7.x86_64 x86_64
PHP Version: 8.2.18
PHP Post Max Size: 516 MB
PHP Time Limit: 60
PHP Max Input Vars: 1000
cURL Version: 8.7.1
OpenSSL/1.1.1w

SUHOSIN Installed: –
MySQL Version: 5.7.23-23
Max Upload Size: 512 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

### Database ###

[REDACTED]

### Post Type Counts ###

attachment: 330
custom_css: 2
customize_changeset: 2
elementor_library: 83
elementor-hf: 2
envato_tk_import: 2
filter-set: 1
jetpack_migration: 2
jp_img_sitemap: 1
jp_sitemap: 1
jp_sitemap_master: 1
nav_menu_item: 15
oembed_cache: 3
omapi: 3
page: 82
post: 6
product: 90
product_variation: 383
revision: 542
shop_coupon: 33
shop_order: 3207
shop_order_refund: 58
sl-insta-account: 1
sl-insta-feed: 1
sl-insta-media: 208
wp_global_styles: 1
wp_navigation: 1
wpforms: 4

### Security ###

Secure connection (HTTPS): ✔
Hide errors from visitors: ✔

### Active Plugins (41) ###

Akismet Anti-spam: Spam Protection: by Automattic - Anti-spam Team – 5.5
Autoptimize: by Frank Goossens (futtta) – 3.1.13
Child Theme Configurator: by Lilaea Media – 2.6.7
Constant Contact + WooCommerce: by Constant Contact – 2.4.0
Image Placeholders: by WordPress Performance Team – 1.2.0
Elementor: by Elementor.com – 3.30.3
Envato Elements: by Envato – 2.0.16
Essential Addons for Elementor: by WPDeveloper – 6.2.1
EWWW Image Optimizer: by Exactly WWW – 8.2.0
Favicon by RealFaviconGenerator: by Philippe Bernard – 1.3.42
Filter Everything&nbsp;— WooCommerce Product & WordPress Filter: by Andrii Stepasiuk – 1.9.0
Google Analytics for WordPress by MonsterInsights: by MonsterInsights – 9.6.1
Site Kit by Google: by Google – 1.157.0
Ultimate Addons for Elementor Lite: by Brainstorm Force – 2.4.6
Health Check & Troubleshooting: by The ww.wp.xz.cn community – 1.7.1
Jetpack: by Automattic – 14.8
AI Powered Marketing: by Kliken – 1.5.3
OptinMonster: by OptinMonster Popup Builder Team – 2.16.20
Performance Lab: by WordPress Performance Team – 3.9.0
Premium Addons for Elementor: by Leap13 – 4.11.22
Regenerate Thumbnails: by Alex Mills (Viper007Bond) – 3.1.6
Smart Image Resize for WooCommerce: by Nabil Lemsieh – 1.13.0
Spotlight - Social Media Feeds: by RebelCode – 1.7.2
Advanced Editor Tools: by Automattic – 5.9.2
Waitlist woocommerce( Back in stock notifier ): by  – 2.8.4
Modern Image Formats: by WordPress Performance Team – 2.5.1
Advanced Order Export For WooCommerce: by AlgolPlus – 4.0.3
Photo Reviews for WooCommerce: by VillaTheme – 1.2.20
Product Filter by WBW: by woobewoo – 2.8.8
WooCommerce.com Update Manager: by Automattic – 1.0.3
WooCommerce Conditional Shipping and Payments: by Woo – 3.0.2
WooCommerce Gateway Affirm: by WooCommerce – 3.0.2
Google Analytics for WooCommerce: by WooCommerce – 2.1.16
WooCommerce PayPal Payments: by PayPal – 3.0.7
PDF Invoices & Packing Slips for WooCommerce: by WP Overnight – 4.5.2
WooCommerce: by Automattic – 10.0.4
WBW Product Filter PRO: by WBW – 2.8.4 (update to version 2.8.8 is available)
Yoast SEO: by Team Yoast – 25.5
WP Mail SMTP Pro: by WP Mail SMTP – 4.5.0
WP-Optimize - Clean, Compress, Cache: by TeamUpdraft
DavidAnderson – 4.2.3

WPForms Lite: by WPForms – 1.9.6.2

### Inactive Plugins (3) ###

Jetpack Boost: by Automattic - Jetpack Site Speed team – 4.2.1
The Bluehost Plugin: by Bluehost – 4.2.1
WooCommerce Tax: by WooCommerce – 3.0.7

### Dropin Plugins () ###

advanced-cache.php: advanced-cache.php
db-error.php: db-error.php
maintenance.php: maintenance.php
object-cache.php: Performance Lab Server Timing Object Cache Drop-In

### Must Use Plugins (4) ###

Endurance Browser Cache: by Mike Hansen – 0.4
Endurance Page Cache: by Mike Hansen – 2.2.2
Health Check Troubleshooting Mode: by  – 1.9.2
SSO: by Garth Mortensen
Mike Hansen – 0.5


### Settings ###

Legacy API Enabled: –
Force SSL: –
Currency: USD ($)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: ✔
Enforce Approved Product Download Directories: –
HPOS feature enabled: ✔
Order datastore: Automattic\WooCommerce\Internal\DataStores\Orders\OrdersTableDataStore
HPOS data sync enabled: ✔
Enabled Features: analytics
marketplace
order_attribution
site_visibility_badge
remote_logging
email_improvements
blueprint
point_of_sale
custom_order_tables


### Logging ###

Enabled: ✔
Handler: Automattic\WooCommerce\Internal\Admin\Logging\LogHandlerFileV2
Retention period: 30 days
Level threshold: –
Log directory size: 12 MB

### WC Pages ###

Shop base: #409 - /all-products/
Cart: #182 - /cart/ -  Contains the woocommerce/cart block
Checkout: #183 - /checkout/ -  Contains the woocommerce/checkout block
My account: #184 - /my-account/ -  Contains the [woocommerce_my_account] shortcode
Terms and conditions: #312 - /terms-of-service/

### Theme ###

Name: Neve Child
Version: 3.8.16.1737754246
Author URL: https://themeisle.com
Child Theme: ✔
Parent Theme Name: Neve
Parent Theme Version: 4.1.3
Parent Theme Author URL: https://themeisle.com
Theme type: Classic theme
WooCommerce Support: ✔

### Templates ###

Overrides: neve/woocommerce/product-searchform.php

### WooCommerce PayPal Payments ###

Onboarded: ✔
New UI active: –
Shop country code: US
WooCommerce currency supported: ✔
Advanced Card Processing available in country: ✔
Pay Later messaging available in country: ✔
Webhook status: ✔
PayPal Vault enabled: –
ACDC Vault enabled: ✔
Logging enabled: ✔
Reference Transactions: –
Used PayPal Checkout plugin: ✔
Subscriptions Mode: Disabled
PayPal Shipping Callback: –
Apple Pay: –
Google Pay: –
Fastlane: –

### Admin ###

Enabled Features: activity-panels
analytics
product-block-editor
coupons
core-profiler
customize-store
customer-effort-score-tracks
import-products-task
experimental-fashion-sample-products
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
mobile-app-banner
onboarding
onboarding-tasks
pattern-toolkit-full-composability
product-custom-fields
remote-inbox-notifications
remote-free-extensions
payment-gateway-suggestions
printful
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page
launch-your-store
add-to-cart-with-options-stepper-layout

Disabled Features: product-data-views
experimental-blocks
experimental-iapi-mini-cart
experimental-iapi-runtime
coming-soon-newsletter-template
minified-js
product-pre-publish-modal
settings
async-product-editor-category-field
product-editor-template-system
use-wp-horizon

Daily Cron: ✔ Next scheduled: 2025-07-28 16:41:28 -04:00
Options: ✔
Notes: 238
Onboarding: completed

### Action Scheduler ###

Canceled: 2
Oldest: 2025-07-26 20:00:00 -0400
Newest: 2025-07-26 20:00:00 -0400

Complete: 6,175
Oldest: 2025-06-26 13:25:38 -0400
Newest: 2025-07-27 13:18:31 -0400

Failed: 353
Oldest: 2022-11-02 00:34:19 -0400
Newest: 2025-07-27 12:51:30 -0400

Pending: 13
Oldest: 2025-07-27 13:26:07 -0400
Newest: 2025-08-03 12:51:30 -0400


### Status report information ###

Generated at: 2025-07-27 13:18:45 -04:00

This topic was modified 10 months, 2 weeks ago by ld899651.

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

LovingBro (woo-hc)
(@lovingbro)

10 months, 2 weeks ago

Hi @ld899651,

I understand how frustrating it can be when layout inconsistencies appear after switching to the new Cart and Checkout blocks, especially when things don’t visually align the way you’d expect. It’s great that you’ve already identified the differences and are aiming for a consistent look between both blocks.

It looks like you tried to share some screenshots, but they didn’t come through on the forum post. Could you please re-upload them using https://snipboard.io and share the links here? That way, I can take a closer look at the formatting differences you’re seeing and offer more tailored help.

Looking forward to checking that out with you!

Thread Starter ld899651
(@ld899651)

10 months, 2 weeks ago

This is what the “place order” button and the product section in the checkout looks like: https://snipboard.io/4FEPWT.jpg https://snipboard.io/zMVN5D.jpg

However, on the cart page, the “proceed to checkout” and product sections look like this: https://snipboard.io/F3ZOy2.jpg https://snipboard.io/yz7jRv.jpg
Sai (woo-hc)
(@saivutukuru)

10 months, 2 weeks ago
Hi @ld899651,

Thanks so much for sharing those screenshots, that really helps clarify the issue!

From what I see, the styling differences between the Cart and Checkout blocks are likely being influenced by your theme (Neve or the child theme). The blocks themselves are consistent in markup, so ideally they should match, unless the theme overrides styles selectively or misses styling for one of the blocks.

A couple of steps you can try to narrow this down:
1. Switch temporarily to Storefront and check if both Cart and Checkout blocks look the same.
2. If they do match under Storefront, then it’s confirmed to be a theme compatibility issue.
3. You could then:
  - Raise this with the Neve theme support team.
  - Or adjust the styles manually via Appearance → Customize → Additional CSS if you’re comfortable with light CSS tweaks.
Let us know what you see after the theme test, happy to guide you with CSS suggestions if needed!
Thread Starter ld899651
(@ld899651)

10 months, 2 weeks ago

Thank you, I would love some CSS I could plug in to fix it!
Moses M. (woo-hc)
(@mosesmedh)

10 months, 2 weeks ago
Hi @ld899651,

Thanks for getting back. While providing custom code is typically outside the scope of our support, I’ve gone ahead and created a quick CSS snippet that should help resolve the issue:
```
.wc-block-components-button__text {
  background: rgb(255, 119, 0);
  color: white;
  padding: 15px;
  border-radius: 10px;
  font-weight: bold;
}
.wc-block-components-product-name {
  color: black;
}
```
That said, I recommend trying to adjust this through your theme’s customizer first, as the issue may be related to existing settings for button or heading styles on your site. Performing a conflict test could also help confirm the root cause.

Please note this is a one-time courtesy. Any further customization requests is outside our scope, and in such cases, it’s best to reach out to a WooCommerce expert via platforms like Codeable.io.
Thread Starter ld899651
(@ld899651)

10 months, 2 weeks ago

Thank you, the CSS will work as a quick fix until I have time to investigate the issue further.

Sai (woo-hc)
(@saivutukuru)

10 months, 2 weeks ago

You’re very welcome. Glad to hear the CSS helps as a temporary solution! When you have time to dig deeper, feel free to check with the Neve theme support team as well, since the styling differences likely originate there.

If you ever decide to explore a more permanent fix or need assistance beyond what we can offer here, you might also consider reaching out to a WooExpert via: https://woocommerce.com/experts/

Let us know if anything else comes up in the meantime, happy to help where we can!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘New Cart Block Formatting Issues’ is closed to new replies.