Product blocks on mobile

Hi!

Thanks for reaching out with your question about changing the visual layout of your products in the mobile view. The number of products shown is not managed by the block itself. It is managed by the site’s theme. I can think of two ways you may be able to customize this though.

First, is by checking your theme options to see if it has a way to control this. Second, is to add a custom CSS rule to the site’s Additional CSS section. You can target the block by adding an “Additional CSS class(es)” entry to give it a unique class to apply that CSS rule to.

I hope this helps! If you have any further questions please feel free to reply to this and I or another Happiness Engineer will get back to you.

I’m using the Kadence theme and it does have the option to display with mobile 2 columns but it does not work with the product blocks for Woocommerce.

It would be nice to find what CSS to use. I have found CSS that was in a post from before but I couldn’t get it to work and I’m not sure how additional CSS classes work.

It would be very much appreciated if I could get help with this, thanks.

Hi @tomster999,

Happy to point you in the right direction here!

I’m using the Kadence theme and it does have the option to display with mobile 2 columns but it does not work with the product blocks for Woocommerce.

Hmm, in that case, I recommend reaching out to the Kadence theme developers to find out if they have another way of displaying the products blocks.

It would be nice to find what CSS to use. I have found CSS that was in a post from before but I couldn’t get it to work and I’m not sure how additional CSS classes work.

I think you will likely need to make quite a few changes here via CSS, especially as you’re trying to target the mobile version of the Products block specifically. As this request involves a fairly complex development topic, I’m going to leave it open for a bit to see if anyone is able to chime in and help you out.

I can also recommend the WooCommerce Developer Resources Portal for resources about WooCommerce development.

You can also visit the WooCommerce Facebook group or the #developers channel of the WooCommerce Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there too.

Thank you!

It happens with neve theme too. I never had a theme that controlled the product blocks before only the products on drop.

Thanks for the referral though.

Re: Page I need help with ~ https://heritagecountrypottery.com/blocks/
Image showing what I would like ~ https://hardy.global/mobiles.jpg

How can I style for mobile? On mobile all the blocks stack one image on top of the other.
I wanted the Hand-picked Products (Top 6 images) to stack three by three and the Products by category to have no stacking ~ as it looks same as on desktop

I tried this code for the top 6 images which nearly worked but didn’t…

@media(max-width: 480px) {
.wc-block-grid.has-6-columns .wc-block-grid__product, .wc-block-grid.has-6-columns .wc-block-grid__product {
width: 48% !important;
float: left !important;
margin-left: 1%;
margin-right: 1%;
}
}

I added a custom class on the page called peter1 which did not seem to make any difference

Hi @indigojones66 ,

On mobile all the blocks stack one image on top of the other.

That is the default behaviour of blocks on mobile devices. You would need to collaborate with a developer to customize the display of blocks on mobile.

For customization, I recommend collaborating with a developer locally or with someone from our customizations page – https://woocommerce.com/customizations/

or you could have said this

@media (max-width: 480px) {
   .wc-block-handpicked-products .wc-block-grid__products {
       display: flex !important;       
   }
   .wc-block-handpicked-products .wc-block-grid__product {
       flex: 1 0 33% !important;
   }
}

Hi @indigojones66,

Thanks for sharing a solution here, which might help others looking to change the styling of product blocks on mobile devices.

We generally don’t provide CSS support, especially if it’s for mobile devices, as there quite a few factors to consider.

Glad you managed to work out the code, and thanks again for sharing it with the community.

I’ll go ahead and mark this post as resolved. If you have any further questions, please let us know!

Dear wpnomad and Niall

I thought the whole point of a forum was to help people and not direct them to a paid developer?
re page: https://heritagecountrypottery.com/blocks/
how I wanted it to look: https://hardy.global/mobiles.jpg

Here css
(I added a class in advanced settings to differentiate between the two products by category blocks)

@media (max-width: 480px) {
.wc-block-handpicked-products .wc-block-grid__products {
display: flex !important;
}
.wc-block-handpicked-products .wc-block-grid__product {
flex: 1 0 33% !important;
}
}

@media (max-width: 480px) {
.peter2-class .wc-block-grid__products {
display: flex !important;
}
.peter2-class .wc-block-grid__product {
flex: 1 0 33% !important;
}
}

@media (max-width: 480px) {
.peter3-class .wc-block-grid__products {
display: flex !important;
}
.peter3-class .wc-block-grid__product {
flex: 1 0 25% !important;
}
}`

Hi @indigojones66,

I’ll add here what I had added in this duplicate thread. ??

We do want to help as best we can, but it would be hard to cater to every situation that needs custom code. You’re desires and theme setup are unique and it wouldn’t be sustainable for us to create that kind of CSS or custom code for everyone who needed it.

Nonetheless, I apologize as I should’ve shared additional resources than just what are paid options. Posting here in this forum is one great option as any community member here can come by your thread and be willing to help out. There is also a great Facebook group you could ask for additional help in, if you use Facebook.

https://www.facebook.com/groups/advanced.woocommerce/

Thank you Ryan. Regards Garry

@indigojones66 Thank you for the solution. That actually worked for me. Do you know how to do it with the category product blocks as well by chance?

Hey @tomster999

I’ll let Garry give input here as their CSS has helped you but from what I can tell, you’d want to find the CSS to target the category product block.

Notice the two in that previous CSS:

.wc-block-handpicked-products .wc-block-grid__products

the handpicked-products and grid__products tell the CSS to apply to those area so you’re looking for the CSS to target the category block.

Hope that pointer helps!

I inserted a block and then inspected the element to see what the div class was.
Also, if you have two product blocks and want them to appear differently on mobile give them a unique class in advanced settings ~ I had two product blocks by category and named one peter1-class and peter2-class. It takes a while to work out the convention which I achieved by trial and error

Thanks for sharing your tips @indigojones66!

Feel free to create a new forum thread if you have any other issues