Product Collection carousel: indicate scrolling by always showing a bit of next product #60123

kmanijak · 2025-07-31T08:38:25Z

Submission Review Guidelines:

I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
I have checked to ensure there aren't other open Pull Requests for the same update/change.
I have reviewed my code for security best practices.
Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

Product Collection carousel layout wasn't great at indicating there's more to scroll to. This PR addresses it by applying arbitrary sizes to products in carousel so there's always part of next product visible indicating there's more to scroll to.

Closes # .

(For Bug Fixes) Bug introduced in PR # .

Screenshots or screen recordings:

Before	After

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Resizing

Add new post
Add Product Collection and choose some collection with many products
Change layout to Carousel
Increase the number of products in carousel to ~20
Change Product Collection width to Full Width

Save and go to frontend
Resize the screen from narrow (<600) to wide (>1440)
Expected:
- There's always "a bit" of next product visible on the right side indicating there's more to scroll to
- Products "grow" until the breakpoints where more products are visible by default

Low number of products

Go back to Editor
Change number of products in carousel to low number, e.g. 4
Save and go to frontend
Resize the screen from narrow (<600) to wide (>1440)
Expected:
- The breakpoints apply up until there's a space for all 4 products, then they just grow
- All products are of equal size

Testing that has already taken place:

Changelog entry

Automatically create a changelog entry from the details below.

This Pull Request does not require a changelog entry. (Comment required below)

Changelog Entry Details

Significance

Patch
Minor
Major

Type

Fix - Fixes an existing bug
Add - Adds functionality
Update - Update existing functionality
Dev - Development related task
Tweak - A minor adjustment to the codebase
Performance - Address performance issues
Enhancement - Improvement to existing functionality

Message

Changelog Entry Comment

Comment

…tes there's more to scroll

github-actions · 2025-07-31T08:55:25Z

Testing Guidelines

Hi @dinhtungdu ,

Apart from reviewing the code changes, please make sure to review the testing instructions (Guide) and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed.

Reminder: PR reviewers are required to document testing performed. This includes:

🖼️ Screenshots or screen recordings.
📝 List of functionality tested / steps followed.
🌐 Site details (environment attributes such as hosting type, plugins, theme, store size, store age, and relevant settings).
🔍 Any analysis performed, such as assessing potential impacts on environment attributes and other plugins, conducting performance profiling, or using LLM/AI-based analysis.

⚠️ Within the testing details you provide, please ensure that no sensitive information (such as API keys, passwords, user data, etc.) is included in this public issue.

github-actions · 2025-07-31T08:58:33Z

Size Change: +147 B (0%)

Total Size: 5.92 MB

_{compressed-size-action}

github-actions · 2025-07-31T09:04:00Z

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

dinhtungdu

This works well most of the time. In an effort to break it, I found that at 1651px or 602px, the hint is not very clear. We're using min-width, can it be the cause?

…d-logic' into add/carousel-scroll-indicator

kmanijak · 2025-08-04T12:45:04Z

Thanks @dinhtungdu! Good feedback, TBH I revisited all the values and decreased them (making the preview of next product bigger in each of the breakpoint). Do you mind re-checking?

dinhtungdu

Thanks for the update. The carousel now looks good to me. I tested it on different screen sizes, and I can always see the hints.

🖼️ Screenshots/ screen recordings

Screen.Recording.2025-08-05.at.09.28.23.mp4

🌐 Site details

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.3
Log Directory Writable: ✔
WP Version: 6.8.2
WP Multisite: –
WP Memory Limit: 2 GB
WP Debug Mode: –
WP Cron: ✔
Language: en_US
External object cache: –

### Server Environment ###

Server Info: nginx/1.25.4
Server Architecture: Darwin 24.5.0 arm64
PHP Version: 7.4.33
PHP Post Max Size: 8 MB
PHP Time Limit: 30
PHP Max Input Vars: 1000
cURL Version: 8.5.0
OpenSSL/3.1.4

SUHOSIN Installed: –
MySQL Version: 8.0.33
Max Upload Size: 2 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ❌ wp_remote_post() failed. Contact your hosting provider.
Remote Get: ✔

### Database ###

[REDACTED]

### Post Type Counts ###

attachment: 25
page: 11
post: 2
product: 18
product_variation: 7
revision: 22
shop_order_placehold: 1
wp_font_face: 36
wp_font_family: 12
wp_global_styles: 1
wp_navigation: 1
wp_template: 2
wp_template_part: 1

### Security ###

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

### Active Plugins (2) ###

WooCommerce: by Automattic – 10.2.0-dev-16723493493-gc3b93a5
WooCommerce Beta Tester: by WooCommerce – 3.0.0

### Inactive Plugins (12) ###

Laravel DD for Wordpress: by Peter Hegman – 1.0.1
WooCommerce: by Automattic – 10.0.4
WooCommerce: by Automattic – 10.2.0-dev-16575761030-g694328d
WooCommerce: by Automattic – 10.2.0-dev-16645053729-g8139b61
WooCommerce: by Automattic – 10.2.0-dev-16616696362-g36ad489
WooCommerce: by Automattic – 10.2.0-dev-16668898854-g0ff7f9c
WooCommerce: by Automattic – 10.2.0-dev-16605966912-g52f5ca9
WooCommerce: by Automattic – 10.2.0-dev-16592985924-gd0ad816
WooCommerce: by Automattic – 10.2.0-dev-16668216126-gde9a2b2
WooCommerce: by Automattic – 10.2.0-dev-16671917738-g72a158e
WooCommerce: by Automattic – 10.2.0-dev-16572101473-g395dd6b
WooCommerce Product Add-Ons: by Woo – 7.8.1 (update to version 7.9.2 is available)

### Must Use Plugins (1) ###

test.php: by  –

### Settings ###

Legacy API Enabled: –
Force SSL: –
Currency: HKD ($)
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
point_of_sale
custom_order_tables


### Logging ###

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

### WC Pages ###

Shop base: #7 - /shop/
Cart: #8 - /cart/ -  Contains the woocommerce/cart block
Checkout: #9 - /checkout/ -  Contains the woocommerce/checkout block
My account: #10 - /my-account/ -  Contains the [woocommerce_my_account] shortcode
Terms and conditions: ❌ Page not set

### Theme ###

Name: Twenty Twenty-Five
Version: 1.0 (update to version 1.2 is available)
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
Theme type: Block theme
WooCommerce Support: ❌ Not declared

### Templates ###

Overrides: /Users/tung/Sites/woo-review/wp-content/plugins/wc_beta_tester_live_branch_10.2.0-dev-16723493493-gc3b93a5/templates/block-notices/error.php
/Users/tung/Sites/woo-review/wp-content/plugins/wc_beta_tester_live_branch_10.2.0-dev-16723493493-gc3b93a5/templates/block-notices/notice.php
/Users/tung/Sites/woo-review/wp-content/plugins/wc_beta_tester_live_branch_10.2.0-dev-16723493493-gc3b93a5/templates/block-notices/success.php


### Admin ###

Enabled Features: activity-panels
analytics
product-block-editor
experimental-blocks
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

Disabled Features: product-data-views
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
experimental-wc-rest-api
beta-tester-slotfill-examples

Daily Cron: ✔ Next scheduled: 2025-08-05 08:18:38 +00:00
Options: ✔
Notes: 66
Onboarding: completed

### Action Scheduler ###

Complete: 71
Oldest: 2025-07-29 02:42:01 +0000
Newest: 2025-08-05 02:26:44 +0000

Failed: 4
Oldest: 2025-03-17 08:19:52 +0000
Newest: 2025-07-30 08:05:46 +0000

Pending: 2
Oldest: 2025-08-05 10:58:11 +0000
Newest: 2025-08-06 02:25:39 +0000


### Status report information ###

Generated at: 2025-08-05 02:30:14 +00:00

* Move Product Gallery Next Prev block from inner blocks to main blocks directory and rename to NextPrevButtons * Rename frontend block to NextPrevButtons * Update blocks classnames * Move styles from Product Gallery to standalone block * Update block references to be Next Previous Buttons * Remove obsolete E2E tests * Add Product Gallery E2E test about opinionated mobile layout * Update webpack entries * Add chanbgelog * Update assets paths * Make sure block is usable in Product Collection * Make actions more abstract * Provide external context * Remove postId from usesContext * Make Next Previous Buttons accepting explicit iAPI provider * Add basic actions in Product Collection * Add initial state * Add changelog * Add simple scrolling logic to Product Collection for demo purposes * Fix lint * Fix another lint * Update tests * Use CSS variables for Product Gallery sizes * Add changelog file * Revert "Use CSS variables for Product Gallery sizes" This reverts commit 080eb70. * Revert "Add changelog file" This reverts commit 6c3557f. * Handle Next/Prev Buttons positioning * Hide scrollbar on carousel * Scroll carousel by 90% width of container * Hide arrows on mobile * Provide opinionated width styles * Handle arrows disabling * Add scroll watch directive to disable buttons if needed * Add logic to disable buttons when we're on either side of scroll * Add logic to hide arrows if not needed * Remove the logic of hiding arrows in Large Image * Fix linter * Fix lint * Add changelog * improve positioning * Revert "improve positioning" This reverts commit bfedcfb. * Increase z-index of Next Prev Buttons * Update the logic of inserting the arrows * Cleanup styles * WIP: Add some layout attributes to manipulated blocks * Fix lint * Adjust group layout * Move Product Gallery specific styles to its styles * Add proper layout values to group blocks * Refactor the logic a bit * Product Collection carousel: indicate scrolling by always showing a bit of next product (#60123) * Add opinionated styles to carousel products width so it always indicates there's more to scroll * Add changelog * Handle the max-width if there's not enough products in carousel * Update values to show more of the next product * Mock SVG file * Inner blocks in tests should be created from inner blocks template and not expect already created blocks * Add integration tests * Fix lint * Update the style for mobile hiding srrows * Add flex no wrap to next prev arrows * remove unused return values * Add proper RTL support * Add safe guard --------- Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

kmanijak added 3 commits July 31, 2025 10:12

Add opinionated styles to carousel products width so it always indica…

c9efe8a

…tes there's more to scroll

Add changelog

74396ff

Handle the max-width if there's not enough products in carousel

a5b8046

github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Jul 31, 2025

kmanijak marked this pull request as ready for review July 31, 2025 08:54

woocommercebot requested review from a team and dinhtungdu and removed request for a team July 31, 2025 08:54

kmanijak marked this pull request as draft July 31, 2025 09:17

kmanijak marked this pull request as ready for review July 31, 2025 09:19

woocommercebot requested a review from a team July 31, 2025 09:20

dinhtungdu removed the request for review from a team July 31, 2025 09:42

dinhtungdu reviewed Jul 31, 2025

View reviewed changes

kmanijak added 2 commits August 4, 2025 14:32

Update values to show more of the next product

98196d9

Merge branch 'wooplug-4885-product-collection-carousel-layout-fronten…

b05646b

…d-logic' into add/carousel-scroll-indicator

kmanijak requested a review from dinhtungdu August 4, 2025 12:45

dinhtungdu approved these changes Aug 5, 2025

View reviewed changes

kmanijak merged commit c17a73e into wooplug-4885-product-collection-carousel-layout-frontend-logic Aug 5, 2025
35 of 37 checks passed

kmanijak deleted the add/carousel-scroll-indicator branch August 5, 2025 08:03

kmanijak mentioned this pull request Aug 5, 2025

Product Collection: carousel layout frontend #60060

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Product Collection carousel: indicate scrolling by always showing a bit of next product #60123

Product Collection carousel: indicate scrolling by always showing a bit of next product #60123

Uh oh!

kmanijak commented Jul 31, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 31, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 31, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 31, 2025 •

edited

Loading

Uh oh!

dinhtungdu left a comment

Uh oh!

kmanijak commented Aug 4, 2025

Uh oh!

dinhtungdu left a comment

Uh oh!

Uh oh!

Uh oh!

Product Collection carousel: indicate scrolling by always showing a bit of next product #60123

Product Collection carousel: indicate scrolling by always showing a bit of next product #60123

Uh oh!

Conversation

kmanijak commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Submission Review Guidelines:

Changes proposed in this Pull Request:

Screenshots or screen recordings:

How to test the changes in this Pull Request:

Resizing

Low number of products

Testing that has already taken place:

Changelog entry

Significance

Type

Message

Comment

Uh oh!

github-actions bot commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing Guidelines

Uh oh!

github-actions bot commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test using WordPress Playground

Uh oh!

dinhtungdu left a comment

Choose a reason for hiding this comment

Uh oh!

kmanijak commented Aug 4, 2025

Uh oh!

dinhtungdu left a comment

Choose a reason for hiding this comment

🖼️ Screenshots/ screen recordings

🌐 Site details

Uh oh!

Uh oh!

Uh oh!

kmanijak commented Jul 31, 2025 •

edited

Loading

github-actions bot commented Jul 31, 2025 •

edited

Loading

github-actions bot commented Jul 31, 2025 •

edited

Loading

github-actions bot commented Jul 31, 2025 •

edited

Loading