Item Added to Cart Notification Does not Display on Shop page with AJAX buttons enabled

[zoemyers]

Prerequisites

• I have carried out troubleshooting steps and I believe I have found a bug.
• I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

On product pages, normally when you click "Add to Cart" you see a banner/notification message indicating the item has been added to cart with a button to view the cart. It looks like this:

On a default WordPress + WooCommerce + Storefront site, on the Shop page, this message does not appear when adding to cart.

However, if you add a product to the cart when viewing the Shop page in the Customizer, the banner/notification appears.

This appears to be the case going back at least as far as 5.9.1

On this ticket 5428818-zen the merchant is looking for the front end to match the behavior in the customizer.

The discrepancy happens when AJAX add to cart buttons are enabled, and shows on the Shop page when they are disabled.

I'm not sure if this is the intended behavior to not show this message on the Shop page, or if the Customizer shouldn't be showing the message when AJAX add to cart buttons are enabled?

Expected behavior

When AJAX add to cart buttons are enabled, the Customizer should reflect the behavior of the front end when adding products to cart from the Shop page.

Actual behavior

The Customizer view of the Shop page shows the banner/notification after adding a product to cart when the front end does not.

Steps to reproduce

1. Utilize a basic WordPress + WooCommerce + Storefront set up. The default should be AJAX add to cart buttons is enabled, but make sure this is the case.
2. Go to the Shop page.
3. Add an item to cart. No notice appears.
4. Go to the Customizer in the admin dashboard.
5. Navigate to the Shop page.
6. Add a product to cart.
7. The notification / message appears.

WordPress Environment

`

WordPress Environment

WordPress address (URL): https://zoesatomictester.wpcomstaging.com
Site address (URL): https://zoesatomictester.wpcomstaging.com
WC Version: 6.7.0
REST API Version: ✔ 6.7.0
WC Blocks Version: ✔ 7.8.3
Action Scheduler Version: ✔ 3.4.0
Log Directory Writable: ✔
WP Version: 6.0.1
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: 7.4.30
PHP Post Max Size: 2 GB
PHP Time Limit: 1200
PHP Max Input Vars: 6144
cURL Version: 7.83.1
OpenSSL/1.1.1n

SUHOSIN Installed: –
MySQL Version: 5.5.5-10.3.35-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: 6.7.0
WC Database Prefix: wp_
Total Database Size: 4.95MB
Database Data Size: 3.45MB
Database Index Size: 1.50MB
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: 0.02MB + Index: 0.11MB + 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.02MB + Index: 0.03MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_options: Data: 2.05MB + Index: 0.06MB + Engine InnoDB
wp_postmeta: Data: 0.42MB + Index: 0.06MB + Engine InnoDB
wp_posts: Data: 0.09MB + Index: 0.06MB + 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.02MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.05MB + Index: 0.00MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.02MB + 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

Post Type Counts

amp_validated_url: 2
attachment: 24
customize_changeset: 1
custom_css: 1
jetpack_migration: 2
nav_menu_item: 2
page: 7
post: 1
product: 18
product_variation: 7
revision: 2
wp_global_styles: 1

Security

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

Active Plugins (12)

Akismet Anti-Spam: by Automattic – 5.0
AMP: by AMP Project Contributors – 2.3.0
Crowdsignal Forms: by Automattic – 1.6.4
WordPress.com Editing Toolkit: by Automattic – 3.38025
Gutenberg: by Gutenberg Team – 13.6.0
Jetpack: by Automattic – 11.2-beta
Layout Grid: by Automattic – 1.8.2
Page Optimize: by Automattic – 0.5.2
Crowdsignal Polls & Ratings: by Automattic
Inc. – 3.0.9

WooCommerce Payments: by Automattic – 4.5.0
WooCommerce Shipping & Tax: by WooCommerce – 1.26.2
WooCommerce: by Automattic – 6.7.0

Inactive Plugins (1)

Classic Editor: by WordPress Contributors – 1.6.2

Dropin Plugins (2)

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

Must Use Plugins (1)

WP.com Site Helper: by –

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: –

WC Pages

Shop base: woocommerce/woocommerce#7 - /shop/
Cart: woocommerce/woocommerce#8 - /cart/
Checkout: woocommerce/woocommerce#9 - /checkout/
My account: woocommerce/woocommerce#10 - /my-account/
Terms and conditions: ❌ Page not set

Theme

Name: Storefront
Version: 4.1.1
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://zoesatomictester.wpcomstaging.com
Subscription Statuses: –
WooCommerce Account Connected: ❌ No

Store Setup

Country / State: United States (US) — North Carolina

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
gateway_scheduled_payments
tokenization
add_payment_method

Admin

Enabled Features: activity-panels
analytics
coupons
customer-effort-score-tracks
experimental-products-task
experimental-import-products-task
experimental-fashion-sample-products
experimental-product-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
wc-pay-promotion
wc-pay-welcome-page
wc-pay-subscriptions-page

Disabled Features: minified-js
settings

Daily Cron: ✔ Next scheduled: 2022-07-29 15:42:10 -04:00
Options: ✔
Notes: 41
Onboarding: completed

WooCommerce Payments

Version: 4.5.0
Connected to WPCOM: Yes
Blog ID: 206050026
Account ID: acct_1Kv1YX2HV99vxLIc

Action Scheduler

Complete: 10
Oldest: 2022-07-24 13:35:15 -0400
Newest: 2022-07-28 14:34:21 -0400

Pending: 1
Oldest: 2022-07-29 14:32:25 -0400
Newest: 2022-07-29 14:32:25 -0400

Status report information

Generated at: 2022-07-28 15:47:26 -04: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.

[rrennick]

@zoemyers Thanks for reporting the issue. This looks like it's an issue with Storefront vs WC core. I'll transfer this issue to the repo where Storefront is maintained.