Hello You design mobile setting

Questions › Category: Questions › Hello You design mobile setting
0 Vote Up Vote Down
livvie asked 2 years ago

Hi, the desktop layout for my website can display up to 4 products, but the mobile site only shows 1 product. Could you please advise on how to configure it to display multiple products on the mobile site?

Attachments
Image-25-5-24-at-10.53-PM-scaled.jpg
1 Answers
0 Vote Up Vote Down
Jennifer Staff answered 2 years ago

For the woocommerce blocks, they don’t have a setting that allows a double column. You can add this to your additional CSS To force a double column until they come out with that option.

@media screen and (max-width: 719px) {
.wp-site-blocks .wc-block-grid .wc-block-grid__products {
grid-template-columns:1fr 1fr!important;
}
}

@media (max-width: 480px) {
.wc-block-grid__product.entry.loop-entry {
max-width: 50% !important;
display: inline-grid;
padding: 5px;
}

.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title {
font-size: 14px;
}
}

For the shop page, Go to the Customizer > Woocommerce > Product Catalog > then scroll down to the bottom and select Two Columns for the Mobile Column layout.

livvie replied 2 years ago

Hi Jennifer, instead of adding additional CSS code, which I’m not familiar with, do you have any blocks from Hello Orchid that can display multiple products on a mobile homepage?

Jennifer Staff replied 2 years ago

If you go to the customizer, at the bottom is the additional CSS spot, you would just copy and paste that code above into that spot. Those are the only product blocks from woocommerce available. You could create your own, by doing a 4 column layout then adding your product image and a button that goes to the product. Then making sure it shows 2 in a row on mobile.

livvie replied 2 years ago

Thank you, it works.