fine in responsive mode(mobile), but wrong in real mobile

Hello @wsk2120 ,

I understand this must be concerning.

From your description and screenshot, it is certain that the sections you are working with are either coming from the Astra theme and Elementor. As themes can override how WooCommerce shows its products, I will recommend getting in touch with the theme developers about this particular case.

I could see the same section on your given link so if possible share the exact page where I can see the section. If there are any CSS issues, I can suggest that from outside.

Thank you ??

Hello Rashed Ripon,

Thank you very very much for you reply! As you said, I am working with Astra and I changed it earlier to the the Theme from WP (Twenty something), then the first problem is solved.

But I still can’t see the Pagination on my Phone, althought it appears in the reponsive mode.

The Page without Pagination:
https://mytakahumi.wpcomstaging.com/product-category/japanische-spezialitaten/nigiri/

I have just changed the Theme, so the website may still look strange.

Thanks again!

Hello @wsk2120 ,

I am glad to know that the first problem is solved.

I do not see the pagination in the desktop version as well – https://prnt.sc/10kam4q.

In general, you can control how many products to show per page from wp-admin > Appearance > Customize > WooCommerce > Product catalog.

However, as you are using Elementor, they might have their own settings for WooCommerce products. I will recommend getting in touch with them for this matter.

Thank you ??

Thank you @rur165,

I changed the number of the Products showed in every page, more than the amount of products in any page, so you couldn’t see any pagination even if they would have showed up. I may try to really fix the problem later.

Thank you again!

Hello @rur165,

sorry for disturbing again. I still have the pagination problem. There is no Problem in my laptop now, but somehow only 12 products show up for each page in my mobile phone and desktop and I can’t go to the second page without the pagination if there are more than 12 products. Could you please help me again? I will try to get in touth with elementor too.

Here is one of the pages with more than 12 products.
https://mytakahumi.wpcomstaging.com/product-category/abholen-oder-liefern-lassen/japanische-spezialitaten/sushi-combi-box/

Thank you in advance!

• This reply was modified 3 years, 11 months ago by wsk2120.

Hello @wsk2120 ,

Do you have the option to enable infinite scroll in your theme or via another plugin? I can see that your pagination is being hidden by this. You can override that CSS by using this in your wp-admin > Appearance > Customize > Additional CSS field –

.infinite-scroll .woocommerce-pagination {
    display: block;
}

If you know where is the infinite scroll option in your theme/plugins, I will recommend disabling it to avoid confusion with pagination.

I hope you find this useful.

Thank you ??

Hello @rur165,

thank you, it works! I don’t know if the theme or which plugin enable the infinite scroll, but your codes work.

Thank you again!

Awesome!

I am glad that it was helpful. I am going to mark this thread as resolved. If you have any other queries, feel free to open a new thread.

You can do a conflict test to figure out which plugin or theme is enabling the infinite scroll.

Thank you ??

For anyone using Astra and seeing problem 1 (the product columns cut in half) on mobile as well, I put this in my “Additional CSS” section at and it worked great.

Appearance -> Customize -> Additional CSS

.woocommerce-page.columns-4 ul.products li.product, .woocommerce.columns-4 ul.products li.product, .woocommerce div.product .related.products ul.products li.product, .woocommerce.mobile-columns-2 ul.products li.product, .woocommerce-page.mobile-columns-2 ul.products li.product, .woocommerce[class*="columns-"].columns-3 > ul.products li.product, .woocommerce[class*="columns-"].columns-4 > ul.products li.product, .woocommerce[class*="columns-"].columns-5 > ul.products li.product, .woocommerce[class*="columns-"].columns-6 > ul.products li.product {
	width: auto !important;
}

For some reason in the original it says width: calc(50% - 10px) and this causes the columns to display at half the size. The CSS above overrides this and my shop looks normal again with 2 columns on mobile and 4 columns on desktop.