Related products block doesn't follow the responsive settings for mobile columns

tomxygen commented 5 months ago

Prerequisites

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

Describe the bug

The related products block allows the user to set a minimum column width, so that it is possible to show more than one product side by side. Unfortunately, this setting is not followed on mobile.

Expected behavior

As with the Product collection block, the user should be able to show products in multiple columns also on mobile.

Actual behavior

It is not possible to set the number of column on mobile. The setting is correctly applied only on desktop.

https://github.com/woocommerce/woocommerce/assets/47855768/7d9e0d8d-7116-43bf-8fe6-33e2e3cd019f

Steps to reproduce

open the site editor
go to templates
open the single product editor
select the related products block
apply settings as in the attached video

WordPress Environment

`

WordPress Environment

WordPress address (URL): http://tommasop47.sg-host.com Site address (URL): http://tommasop47.sg-host.com WC Version: 9.1.0-dev Legacy REST API Package Version: The Legacy REST API plugin is not installed on this site. Action Scheduler Version: ✔ 3.7.4 Log Directory Writable: ✔ WP Version: 6.6-beta1 WP Multisite: – WP Memory Limit: 768 MB WP Debug Mode: – WP Cron: ✔ Language: it_IT External object cache: –

Server Environment

Server Info: Apache PHP Version: 8.2.20 PHP Post Max Size: 256 MB PHP Time Limit: 120 PHP Max Input Vars: 3000 cURL Version: 8.2.1 OpenSSL/3.1.1

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

Database

WC Database Version: 9.1.0 WC Database Prefix: xrx_ Total Database Size: 10.69MB Database Data Size: 8.80MB Database Index Size: 1.89MB xrx_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB xrx_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB xrx_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB xrx_woocommerce_order_items: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB xrx_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB xrx_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB xrx_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB xrx_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB xrx_actionscheduler_actions: Data: 0.06MB + Index: 0.11MB + Engine InnoDB xrx_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB xrx_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB xrx_actionscheduler_logs: Data: 0.05MB + Index: 0.03MB + Engine InnoDB xrx_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB xrx_jetpack_sync_queue: Data: 0.02MB + Index: 0.06MB + Engine InnoDB xrx_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB xrx_options: Data: 7.08MB + Index: 0.09MB + Engine InnoDB xrx_postmeta: Data: 0.09MB + Index: 0.03MB + Engine InnoDB xrx_posts: Data: 0.42MB + Index: 0.06MB + Engine InnoDB xrx_sgs_log_events: Data: 0.09MB + Index: 0.02MB + Engine InnoDB xrx_sgs_log_visitors: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB xrx_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB xrx_wc_admin_note_actions: Data: 0.05MB + Index: 0.02MB + Engine InnoDB xrx_wc_admin_notes: Data: 0.06MB + Index: 0.00MB + Engine InnoDB xrx_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB xrx_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_wc_order_addresses: Data: 0.02MB + Index: 0.08MB + Engine InnoDB xrx_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_wc_order_operational_data: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB xrx_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB xrx_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_wc_orders: Data: 0.02MB + Index: 0.11MB + Engine InnoDB xrx_wc_orders_meta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB xrx_wc_product_attributes_lookup: Data: 0.02MB + Index: 0.02MB + Engine InnoDB xrx_wc_product_download_directories: Data: 0.02MB + Index: 0.02MB + Engine InnoDB xrx_wc_product_meta_lookup: Data: 0.02MB + Index: 0.11MB + Engine InnoDB xrx_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB xrx_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB xrx_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB xrx_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB

Post Type Counts

attachment: 21 page: 7 post: 2 product: 13 product_variation: 4 revision: 184 shop_order_placehold: 5 wp_font_face: 33 wp_font_family: 12 wp_global_styles: 1 wp_navigation: 1 wp_template: 3 wp_template_part: 3

Security

Secure connection (HTTPS): ❌ Your store is not using HTTPS. Learn more about HTTPS and SSL Certificates. Hide errors from visitors: ✔

Active Plugins (5)

Speed Optimizer: by SiteGround – 7.6.0 Security Optimizer: by SiteGround – 1.5.0 Ajax add to cart for WooCommerce: by QuadLayers – 2.3.6 WooCommerce: by Automattic – 9.1.0-dev WordPress Beta Tester: by WordPress Upgrade/Install Team – 3.5.5

Inactive Plugins (4)

Jetpack: by Automattic – 13.5 SiteGround Central: by SiteGround – 3.0.2 TikTok: by TikTok – 1.2.6 WooPayments: by Automattic – 7.7.0

Settings

API Enabled: – Force SSL: – Currency: EUR (€) Currency Position: right_space 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: –

Logging

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

WC Pages

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

Theme

Name: Twenty Twenty-Four Version: 1.1 Author URL: https://wordpress.org 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: ❌ Not declared

Templates

Overrides: /home/customer/www/tommasop47.sg-host.com/public_html/wp-content/plugins/woocommerce/templates/block-notices/error.php /home/customer/www/tommasop47.sg-host.com/public_html/wp-content/plugins/woocommerce/templates/block-notices/notice.php /home/customer/www/tommasop47.sg-host.com/public_html/wp-content/plugins/woocommerce/templates/block-notices/success.php

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 navigation onboarding onboarding-tasks product-custom-fields 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 launch-your-store

Disabled Features: experimental-blocks minified-js pattern-toolkit-full-composability product-pre-publish-modal settings async-product-editor-category-field product-editor-template-system

Daily Cron: ✔ Next scheduled: 2024-06-10 17:09:59 +00:00 Options: ✔ Notes: 65 Onboarding: completed

Action Scheduler

Complete: 103 Oldest: 2024-06-08 17:10:10 +0000 Newest: 2024-06-09 18:11:48 +0000

Failed: 1 Oldest: 2024-06-08 17:39:58 +0000 Newest: 2024-06-08 17:39:58 +0000

Pending: 1 Oldest: 2024-06-10 18:11:48 +0000 Newest: 2024-06-10 18:11:48 +0000

Status report information

Generated at: 2024-06-10 08:31:39 +00:00 `

Isolating the problem

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

imanish003 commented 4 months ago

Hey @tomxygen, Thank you for reporting this issue.

Related products is a variation of Query Loop block. Therefore, It behaves same as Query Loop block. Eventually, Related Products block will be replaced with Product Collection block. So, you will be able to use same settings as Product Collection block for Related Products block.

As with the Product collection block, the user should be able to show products in multiple columns also on mobile.

I tested it and found out that Product Collection block also becomes single column on mobile. Isn't it the case with you? (See screenshot below)

IMO, it makes sense to fallback to a single column on mobile if there is not enough space to show multiple columns.

CC: @kmanijak

github-actions[bot] commented 4 months ago

As a part of this repository's maintenance, this issue is being marked as stale due to inactivity. Please feel free to comment on it in case we missed something.

After 7 days with no activity this issue will be automatically be closed.

tomxygen commented 4 months ago

hey @imanish003, the product collection block, which is the successor of the product collection block, allows to set two columns on mobile, which look better.

imanish003 commented 4 months ago

hey @imanish003, the product collection block, which is the successor of the product collection block, allows to set two columns on mobile, which look better.

Hey @tomxygen, I checked again and can see that Product Collection block also becomes single column when there isn't enough space on mobile. As you can see in below video I:

Added Product Collection block to a new post
Set columns to 2 and toggled "Responsive" off.
Saved the post and went to frontend to see the result.
Then, I reduced the browser window's width to see how it behaves on mobile. As you can see, at around 590px width, it becomes single column.

In conclusion, In Product Collection block as well we don't force number of columns if there isn't enough space for multiple columns.

Question: Isn't it the case with you? I am using WooCommerce 9.0.2 and WordPress 6.5.5.

https://github.com/woocommerce/woocommerce/assets/16707866/edef6023-804c-4b32-8b45-b7c67c651682

In any case, Thank you so much for creating this issue 🙏 As I mentioned earlier, Related Products block will be replaced with Product Collection block. So, you will be able to use same settings as Product Collection block for Related Products block. Currently, It's variation of Query Loop block and behaves same as Query Loop block 🙂

dinhtungdu commented 3 months ago

@imanish003 @kmanijak to me, the columns collapsed even with responsive setting off is a bug to me. When setting the responsive to off, I expect the block to resect my column settings.

I also noticed another confusing behavior: The breakpoint where columns are collapsed to one is different based on the responsive setting. With responsive on, columns only collapse if the screen is smaller than 383px. In the Manish test, the breakpoint is 590 with responsive off.

For this issue, I think we can close it because we planned to replace the block with the Product Collection block.

dinhtungdu commented 3 months ago

The new Related Products block powered by Product Collection is tracked here https://github.com/woocommerce/woocommerce/issues/49335

github-actions[bot] commented 3 months ago

Hi @tomxygen,

Thank you for opening the issue! It requires further feedback from the WooCommerce Core team.

We are adding the needs developer feedback label to this issue so that the Core team could take a look.

Please note it may take a few days for them to get to this issue. Thank you for your patience.

gigitux commented 3 months ago

I'm going to close this issue, given that we are planning to work on the Related Products block! https://github.com/woocommerce/woocommerce/issues/49335

woocommerce / woocommerce