Hand-picked products make to 2 column on mobile

Hi there, when we are editing posts using the Gutenberg editor Hand-picked Product block, the product images are shown as 1 column (see image) on mobile. We would like to have it to show in 2 Columns. Are you able to provide a solution for this? Thank you

Hello,

Please try to use the below code for changing the columns, paste it into the “Custom CSS for mobile” area in Theme Settings -> Custom CSS.

.single-post .wc-block-grid.has-4-columns .wc-block-grid__products {
    display: flex;
}

.single-post .wc-block-grid.has-4-columns .wc-block-grid__product {
    flex: unset;
    margin: unset;
    max-width: 50%;
}

In the meantime, feel free to ask me any questions you may have.

Kind Regards

Hi there,

1) Unfortunately, the CSS code for the 2 column effect on Mobile for Handpick items block is not working. Again, we want the products to be shown in 2 columns. If there are more than 2 handpicked products, there will be multiple rows. We have sent a link to our staging site for you below. Kindly assist

2) Also, we would like to add a text below the “Total” word on the checkout page. We have attached a sample of the effect we would like to achieve. Would it be possible?

Thank you

Hello,

In this case, is there any chance that you could give me access to the dashboard area of the staging site so I can have a look at the settings on your website, please?

Kind Regards

Hi Luke, have added access. Kindly have a look and let us know:

Hello,

First of all, I saw that you have disabled the Gutenberg styles via Theme Settings, so I have enabled it back.

https://monosnap.com/file/VYKxeE7BSYL9p24tn1QyMCDrweSMuB

Then I just cleared the cache and see the same as in the below video:

https://monosnap.com/file/BRZYwzlU3506CMo0CnAEnbn17RXS5G

So first of all clear the cache on your desktop/mobile and recheck the issue.

Kind Regards

Hi there,

Thanks it seems to work. Could you please assist us on point 2? –

2) Also, we would like to add a small text below the “Total” word on the checkout page. We have attached a sample of the effect we would like to achieve in the earlier enquiry. Would it be possible?

You may refer to this for point 2.

Hello,

The thing is that the “Checkout” page comes from WooCommerce and we cannot influent it hence it requires Customization and this is beyond our limitations and support policy scope. Hope you can understand our limitations.

Let me know if you have any questions, I’d be happy to answer them.

Kind Regards

[Author]

Posts