Storefront: Number of items beside cart icon won't update when product quantity is changed on cart page

[druesome]

Describe the bug

On a site using the Storefront theme, when the quantity of products is updated on the Cart page, the number of items beside the cart icon doesn't automatically update.

Bug seems to have been introduced in WooCommerce 7.8.0. This does not occur in WooCommece 7.7.2.

Workaround is to add this JavaScript snippet somewhere in the footer using the Insert Headers and Footers plugin:

<script>jQuery(document.body).on('removed_from_cart updated_cart_totals', function () {
    location.reload();
});</script>

This forces the cart page to refresh after the Update Cart button is pressed.

Ticket: 6510924-zen

Expected behavior

For the number of items beside the cart icon to update dynamically when the quantity is updated on the Cart page.

Actual behavior

The number of items stays the same.

Steps to reproduce

1. Test using a site with at least WooCommerce 7.8.0 and the Storefront theme active
2. Add a product to the cart
3. Visit the cart page
4. Change the quantity of the product
5. Click Update Cart button

WordPress Environment

WordPress address (URL): https://wootrainingsite.mystagingwebsite.com
Site address (URL): https://wootrainingsite.mystagingwebsite.com
WC Version: 7.8.2
REST API Version: ✔ 7.8.2
WC Blocks Version: ✔ 10.2.4
Action Scheduler Version: ✔ 3.5.4
Log Directory Writable: ✔
WP Version: 6.2.2
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: –
WP Cron: ✔
Language: en_US
External object cache: ✔

Server Environment

Server Info: nginx
PHP Version: 8.1.21
PHP Post Max Size: 2 GB
PHP Time Limit: 1200
PHP Max Input Vars: 6144
cURL Version: 8.0.1
OpenSSL/1.1.1n

SUHOSIN Installed: –
MySQL Version: 10.4.26-MariaDB-log
Max Upload Size: 2 GB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Database

WC Database Version: 7.8.2
WC Database Prefix: wp_
Total Database Size: 11.72MB
Database Data Size: 7.98MB
Database Index Size: 3.74MB
wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_actions: Data: 1.34MB + Index: 0.44MB + Engine InnoDB
wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_logs: Data: 0.31MB + Index: 0.28MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.05MB + Index: 0.09MB + Engine InnoDB
wp_gla_attribute_mapping_rules: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_gla_budget_recommendations: Data: 0.22MB + Index: 0.14MB + Engine InnoDB
wp_gla_merchant_issues: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_gla_shipping_rates: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_gla_shipping_times: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_automations: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_automation_runs: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_automation_run_logs: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_automation_run_subjects: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_automation_triggers: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_automation_versions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_custom_fields: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_dynamic_segment_filters: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_feature_flags: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_forms: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_log: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_migrations: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletters: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_newsletter_links: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_mailpoet_newsletter_option: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletter_option_fields: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletter_posts: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletter_segment: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletter_templates: Data: 2.52MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_scheduled_tasks: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_scheduled_task_subscribers: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_segments: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_sending_queues: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_settings: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_statistics_bounces: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_statistics_clicks: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_mailpoet_statistics_forms: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_statistics_newsletters: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_statistics_opens: Data: 0.02MB + Index: 0.08MB + Engine InnoDB
wp_mailpoet_statistics_unsubscribes: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_mailpoet_statistics_woocommerce_purchases: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_mailpoet_stats_notifications: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_subscribers: Data: 0.02MB + Index: 0.16MB + Engine InnoDB
wp_mailpoet_subscriber_custom_field: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_subscriber_ips: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_subscriber_segment: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_subscriber_tag: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_tags: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_user_agents: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_user_flags: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_options: Data: 1.11MB + Index: 0.06MB + Engine InnoDB
wp_postmeta: Data: 0.20MB + Index: 0.16MB + Engine InnoDB
wp_posts: Data: 0.14MB + Index: 0.06MB + Engine InnoDB
wp_snippets: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_usermeta: Data: 0.06MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.06MB + Index: 0.00MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.06MB + Index: 0.02MB + Engine InnoDB
wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_attributes_lookup: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_product_download_directories: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wpml_mails: Data: 0.14MB + Index: 0.00MB + Engine InnoDB
wp_wp_phpmyadmin_extension__errors_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_yoast_indexable: Data: 0.05MB + Index: 0.09MB + Engine InnoDB
wp_yoast_indexable_hierarchy: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_yoast_migrations: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_yoast_primary_term: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_yoast_seo_links: Data: 0.02MB + Index: 0.03MB + Engine InnoDB

Post Type Counts

attachment: 37
customize_changeset: 1
mailpoet_page: 1
page: 9
post: 1
product: 25
product_variation: 11
revision: 12
shop_coupon: 2
shop_order: 22
shop_order_refund: 1
shop_subscription: 1
wpcode: 2
wp_global_styles: 1
wp_template: 2
wp_template_part: 1

Security

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

Active Plugins (22)

Akismet Anti-Spam: Spam Protection: by Automattic - Anti Spam Team – 5.2
Australia Post WooCommerce Extension: by WPRuby – 1.10.1
Code Snippets: by Code Snippets Pro – 3.4.2
Conditional Logic for Woo Product Add-Ons: by Meow Crew – 1.2.1
EAN for WooCommerce: by WPFactory – 4.6.0
WPCode Lite: by WPCode – 2.0.13
Jetpack Protect: by Automattic - Jetpack Security team – 1.4.0
Jetpack: by Automattic – 12.4-a.1
Pinterest for WooCommerce: by WooCommerce – 1.3.5
Regenerate Thumbnails: by Alex Mills (Viper007Bond) – 3.1.5
Variation Shared Inventory for WooCommerce: by Webis – 3.5.6
Storefront Powerpack: by WooCommerce – 1.6.2
WooCommerce Authorize.Net Gateway: by Pledged Plugins – 6.0.4
WooCommerce Checkout Field Editor: by WooCommerce – 1.7.9
WooCommerce Payments: by Automattic – 6.1.1
WooCommerce Product Add-ons: by WooCommerce – 6.4.3
WooCommerce Shipping & Tax: by WooCommerce – 2.2.5
WooCommerce Subscriptions: by WooCommerce – 5.1.3 (update to version 5.2.0 is available)
WooCommerce: by Automattic – 7.8.2
Yoast SEO: by Team Yoast – 20.10
WP Mail Logging: by WP Mail Logging Team – 1.12.0
WP phpMyAdmin: by Puvox.software – 5.2.1.02

Inactive Plugins (3)

Google Listings and Ads: by WooCommerce – 2.4.10
MailPoet: by MailPoet – 4.20.1
Mini Cart for WooCommerce: by Extendons – 1.2.7

Dropin Plugins (2)

advanced-cache.php: advanced-cache.php
object-cache.php: Memcached

Settings

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)
subscription (subscription)
variable (variable)
variable subscription (variable-subscription)

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 screen enabled: –
HPOS feature enabled: –
Order datastore: WC_Order_Data_Store_CPT
HPOS data sync enabled: –

WC Pages

Shop base: #5 - /shop/
Cart: #6 - /cart/
Checkout: #7 - /checkout/
My account: #8 - /my-account/
Terms and conditions: ❌ Page visibility should be public

Theme

Name: Storefront
Version: 4.3.0
Author URL: https://woocommerce.com/
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ✔

Templates

Overrides: –

Subscriptions

WCS_DEBUG: ✔ No
Subscriptions Mode: ✔ Live
Subscriptions Live URL: https://wootrainingsite.mystagingwebsite.com
Subscriptions-core Library Version: 5.7.2
Subscription Statuses: wc-active: 1
WooCommerce Account Connected: ✔ Yes
Active Product Key: ❌ No
Report Cache Enabled: ✔ Yes
Cache Update Failures: ✔ 0 failure

Store Setup

Country / State: United States (US) — California

Subscriptions by Payment Gateway

Payment Gateway Support

WooCommerce Payments: products
refunds
multiple_subscriptions
subscription_cancellation
subscription_payment_method_change_admin
subscription_payment_method_change_customer
subscription_payment_method_change
subscription_reactivation
subscription_suspension
subscriptions
subscription_amount_changes
subscription_date_changes
tokenization
add_payment_method

Direct bank transfer: products
Check payments: products

Admin

Enabled Features: activity-panels
analytics
product-block-editor
coupons
customer-effort-score-tracks
import-products-task
experimental-fashion-sample-products
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
mobile-app-banner
navigation
onboarding
onboarding-tasks
remote-inbox-notifications
remote-free-extensions
payment-gateway-suggestions
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page

Disabled Features: core-profiler
minified-js
new-product-management-experience
product-variation-management
settings
async-product-editor-category-field

Daily Cron: ✔ Next scheduled: 2023-07-11 02:53:00 +00:00
Options: ✔
Notes: 98
Onboarding: completed

WooCommerce Payments

Version: 6.1.1
Connected to WPCOM: Yes
Blog ID: 219621807
Account ID: acct_1NDipxFjaE0qPFp3

Action Scheduler

Complete: 1,227
Oldest: 2023-06-09 06:40:54 +0000
Newest: 2023-07-10 05:58:18 +0000

Pending: 5
Oldest: 2023-07-10 05:59:18 +0000
Newest: 2023-07-10 19:24:58 +0000

Failed: 1
Oldest: 2023-05-31 03:16:01 +0000
Newest: 2023-05-31 03:16:01 +0000

Status report information

Generated at: 2023-07-10 05:58:19 +00:00
`

Isolating the problem

• I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• This bug happens with a default WordPress theme active, or Storefront.
• I can reproduce this bug consistently using the steps above.

[thisissandip]

The Cart Fragments script, responsible for updating the cart widget after a successful add-to-cart event, can cause a performance issue on stores not making use of that functionality. To mitigate this, the script will now only be enqueued if using the Mini Cart widget.

This change was implemented with WooCommerce 7.8 here: woocommerce/woocommerce#35530

And, this issue is a result of that.

Stores that are not using the widget can re-enable this functionality by either adding the widget to one of their widget areas/sidebars or by enqueuing the script manually:

function enqueue_wc_cart_fragments() { wp_enqueue_script( 'wc-cart-fragments' ); }
add_action( 'wp_enqueue_scripts', 'enqueue_wc_cart_fragments' );

If you’re looking for an alternative to the Mini Cart widget that does not suffer from the performance issue, try the Mini Cart Block instead.

More details about this change below:

• https://developer.woocommerce.com/2023/05/24/woocommerce-7-8-beta-1-released/
  https://developer.woocommerce.com/2023/06/16/best-practices-for-the-use-of-the-cart-fragments-api/
• Should you have any further questions, please let me know. We are here to help!

[druesome]

@thisissandip Thank you for chiming in! While there may be some workarounds, they seem to be temporary solutions rather than address the specific problem with the Storefront theme. Unlike other themes, Storefront automatically includes the cart icon in the header. Therefore, adding the Mini Cart widget or block would seem redundant in this scenario.

The code you shared, however, works:

function enqueue_wc_cart_fragments() { wp_enqueue_script( 'wc-cart-fragments' ); }
add_action( 'wp_enqueue_scripts', 'enqueue_wc_cart_fragments' );

Would it make sense to just package this into the Storefront theme? Or, if that isn't possible, just remove the cart icon from the Storefront theme header altogether?

Also, do you know why adding products from the shop page or product category pages updates the numbers correctly, but not from the cart page?

[nefeline]

Hi there @druesome ! Thanks for reaching out to us. I can confirm this issue occurs on the latest version of Storefront running alongside both WooCommerce 7.8.0 and 7.9.0.

I'm moving this issue to our backlog: it will be updated as soon as we start working on a solution.

[gigitux]

Duplicate of #2101