Automattic / Automattic/jetpack

Infinite scroll: loading more products(page 2) removes product styling in the process

Open
#42,072 2 comments 0 reactions 0 assignees View on GitHub
[Feature Group] Content Management [Feature] Infinite Scroll [Platform] Atomic [Plugin] Jetpack [Pri] Low Bug Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Quick summary

- In a Classic theme, you can set the number of products per pow and rows per page in the Customizer. However, on themes Twenty Sixteen, Twenty Seventeen, and Twenty Nineteen, if the number of products on the site is larger than the number of products set to display, the rest of the products will appear in a list below the shop page. The formatting does not match the shop, and appears more similar to a blog posts.

### Steps to reproduce

1. Switch to the Twenty Sixteen theme, Twenty Seventeen, or Twenty Nineteen
2. Add several products to the site
3. Go to Appearance > Customizer > WooCommerce > Product Catalog, and ensure that the Catalog will display fewer products than the total number on the site. (Setting the shop to display 1 row with 1 product will work, as long as you have at least two products. I've used 2 products in 2 rows with 7 total products in my tests)
4. Save Changes.

### What you expected to happen

The product catalog on the live site will update to reflect these updated settings. If I had updated the shop to display 1 row with 1 product, I would expect to see only one product displayed on the shop page.

### What actually happened

The set number of products correctly display in the expected grid on the shop page.

However, any products which exceed the number set to display on the shop page still appear below the shop grid. The product title and image are both still visible, along with the product description, but there is no option to buy unless you click on the link, and no indication that these are products. The display is closer to a blog post.

Screenshot from Twenty Sixteen:
Image

Screenshot from Twenty Seventeen:

Image

Screenshot on Twenty Nineteen:

Image

### Impact

Some (< 50%)

### Available workarounds?

Yes, easy to implement

### If the above answer is "Yes...", outline the workaround.

- You can increase the number of products per row or rows per page to increase how many products are displayed on each page. As long as the available space is larger than the number of actual products, the extra product display does not appear.

### Platform (Simple and/or Atomic)

Atomic

### Logs or notes

- I tested other themes as well, this only occured with the themes noted above, Twenty Sixteen, Twenty Seventeen, and Twenty Nineteen. On other Classic themes, the products would still display regardless of the Customizer settings, but these products still appeared visually the same as the intended products.
- Screenshot from Shoreditch: Image
- (you can see where it helpfully notes that is 'Showing 1-4 of 7' before displaying all 7 products)

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with Twenty Sixteen, Twenty Seventeen, and Twenty Nineteen using the Customizer's WooCommerce Product Catalog settings, with fewer displayed products than exist. Compare the extra products below the shop grid with the intended product presentation. Done means the configured product count is respected and any displayed products retain the expected shop styling and purchase indication.

Written by the indexing model from the issue text.

Assessment

Tech stack
php, wordpress
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.