search

woocommerce / storefront

Official theme for WooCommerce
https://wordpress.org/themes/storefront/
972 stars 471 forks source link

[GlobalStep] For Storefront theme on preview screen, "Products per row" and "Rows per page" fails to work for TAB/PAD #1712

Open gglobalstep opened 3 years ago

gglobalstep commented 3 years ago

Bug Description:

For Storefront theme, upon changing the Products per row or Rows per page value it fails to change for TAB/PAD view on preview screen.

Environment:

Woocommerce Version : WooCommerce 5.4.1 WordPress version: (v5.7.2)

PC: Windows 10, Mac 10.14.6 Chrome(Version 91.0.4472.77) Firefox(Version 88.0) Safari: v13.1.1

Steps To Reproduce:

  1. Create any test site using JN site.
  2. Install and activate all the required plugins.
  3. Complete the onboarding setup wizard.
  4. Select Storefront theme.
  5. Add Some products.
  6. Go to Appearance->Customize.
  7. Select WooCommerce->Product Catalog option.
  8. Choose TAB/PAD view.
  9. Set the Product per row value to 2/3/4.
  10. Ser the Rows per page value to 2 or3.
  11. Observe that it fails to change on preview screen.

Actual Result:

For Storefront theme on preview screen, "Products per row" and "Rows per page" fails to work for TAB/PAD.

Expected Result:

"Products per row" and "Rows per page" should work for TAB/PAD on preview screen.

Video/Screenshot:

https://user-images.githubusercontent.com/41110392/122424330-40989c80-cfac-11eb-8562-394fd12d7ddf.mp4

Isolating the problem (mark completed items with an [x]):

` ### WordPress Environment ### WordPress address (URL): https://spotless-alpaca.jurassic.ninja Site address (URL): https://spotless-alpaca.jurassic.ninja WC Version: 5.4.1 REST API Version: ✔ 5.4.1 WC Blocks Version: ✔ 5.1.0 Action Scheduler Version: ✔ 3.1.6 WC Admin Version: ✔ 2.3.1 Log Directory Writable: ✔ WP Version: ❌ 5.7.2 - There is a newer version of WordPress available (5.8-beta2-51173) WP Multisite: – WP Memory Limit: 256 MB WP Debug Mode: ✔ WP Cron: ✔ Language: en_US External object cache: – ### Server Environment ### Server Info: Apache/2.4.46 (Unix) OpenSSL/1.0.2g PHP Version: 7.4.18 PHP Post Max Size: 1 GB PHP Time Limit: 30 PHP Max Input Vars: 5000 cURL Version: 7.47.0 OpenSSL/1.0.2g SUHOSIN Installed: – MySQL Version: 5.7.33-0ubuntu0.16.04.1-log Max Upload Size: 512 MB Default Timezone is UTC: ✔ fsockopen/cURL: ✔ SoapClient: ✔ DOMDocument: ✔ GZip: ✔ Multibyte String: ✔ Remote Post: ✔ Remote Get: ✔ ### Database ### WC Database Version: 5.4.1 WC Database Prefix: wp_ Total Database Size: 10.61MB Database Data Size: 7.78MB Database Index Size: 2.83MB 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.08MB + Index: 0.06MB + 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.06MB + 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.05MB + Index: 0.03MB + Engine InnoDB wp_ce4wp_abandoned_checkout: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB wp_gla_budget_recommendations: Data: 0.22MB + Index: 0.14MB + Engine InnoDB wp_gla_merchant_issues: Data: 0.02MB + Index: 0.02MB + 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_mailchimp_carts: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_mailchimp_jobs: Data: 0.02MB + Index: 0.00MB + 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_mapping_to_external_entities: 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_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.13MB + 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_user_flags: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_options: Data: 3.06MB + Index: 0.17MB + Engine InnoDB wp_postmeta: Data: 0.22MB + Index: 0.17MB + Engine InnoDB wp_posts: Data: 0.13MB + 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.02MB + 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_meta_lookup: Data: 0.02MB + Index: 0.09MB + 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 ### attachment: 25 customize_changeset: 10 mailpoet_page: 1 nav_menu_item: 5 page: 7 post: 2 product: 19 product_variation: 7 revision: 6 shop_coupon: 3 shop_order: 29 shop_order_refund: 3 ### Security ### Secure connection (HTTPS): ✔ Hide errors from visitors: ✔ ### Active Plugins (12) ### Query Monitor: by John Blackbourn – 3.7.1 Companion Plugin: by Osk – 1.18 Creative Mail by Constant Contact: by Constant Contact – 1.4.0 Facebook for WooCommerce: by Facebook – 2.6.0 Google Listings and Ads: by WooCommerce – 1.0.0 Jetpack: by Automattic – 9.8.1 Mailchimp for WooCommerce: by Mailchimp – 2.5.1 MailPoet 3 (New): by MailPoet – 3.64.0 WooCommerce Beta Tester: by WooCommerce – 2.0.2 WooCommerce Shipping & Tax: by WooCommerce – 1.25.14 WooCommerce: by Automattic – 5.4.1 WordPress Beta Tester: by Peter Westwood Andy Fragen – 3.1.0 ### Inactive Plugins (2) ### Akismet Anti-Spam: by Automattic – 4.1.9 Hello Dolly: by Matt Mullenweg – 1.7.2 ### Dropin Plugins (1) ### db.php: Query Monitor Database Class ### 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) 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: ✔ ### WC Pages ### Shop base: woocommerce/woocommerce#6 - /shop/ Cart: woocommerce/woocommerce#7 - /cart/ Checkout: woocommerce/woocommerce#8 - /checkout/ My account: woocommerce/woocommerce#9 - /my-account/ Terms and conditions: ❌ Page not set ### Theme ### Name: Storefront Version: 3.7.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: – ### Action Scheduler ### Complete: 119 Oldest: 2021-06-16 07:24:51 +0000 Newest: 2021-06-17 14:08:50 +0000 ### Status report information ### Generated at: 2021-06-17 14:22:35 +00:00 `
juliaamosova commented 3 years ago

Hi @gglobalstep,

Thank you for taking the time to report this bug, we really appreciate your help. I can reproduce it on my end using WooCommerce 5.4.1 + Storefront 3.7.0.

Storefront theme experience showing the issue:

https://user-images.githubusercontent.com/19143190/122589072-d1fc2300-d02d-11eb-80ef-feb73d198f55.mov

To isolate the issue, I tested using Twenty Twenty One 1.3 theme and can confirm that the issue is not present in Twenty Twenty One theme. It does seem to be specific to Storefront.

Twenty Twenty One theme experience showing no issue:

https://user-images.githubusercontent.com/19143190/122589526-5c448700-d02e-11eb-8a90-82bc40d9c145.mov

Since this issue seems to be specific to the Storefront theme, I am moving it to the Storefront repository so that the right team could take a look further.

mikejolley commented 3 years ago

Twenty Twenty One doesn't have handheld styles, whereas Storefront does.

There is a conflict between visual settings such as rows/cols, and mobile/tablet styles applied where the columns are reduced purposely to avoid content being unusable narrow. One setting does not fit all. You may increase columns on desktop and have it perfectly fine with 4 per row, but this would be completely unusable on a phone.

Therefore I don't know the correct action to take with this one. We could consider:

Flagging this up for feedback from @woocommerce/rubik because these types of setting also exist in Blocks and AFAIK would encounter similar problems.

Aljullu commented 3 years ago

Yes... that's something that has been discussed in Blocks a couple of times and we even got mockups for it: https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/1060#issuecomment-525895701, https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/1626#issuecomment-577637527. However, I think we have been waiting until Gutenberg implemented some kind of responsive editing that we could use instead of implementing our own (this issue has some ideas on how it could look: https://github.com/WordPress/gutenberg/issues/19909).

Personally, I would not fix this issue in Storefront. We are trying to move as many settings as possible away from the Customizer and at some point, all product grids will be powered by blocks.

nerrad commented 3 years ago

I agree with Albert's assessment.