Docs

[Pollito69]

Hello,

I’m using Ethos 1 theme and Woocommerce shop, and it looks great. However, there are few improvements I would like to make to the shop page for a mobile phone user:

1. How can I remove the duplicate “Shop” line. There are two lines, one on top the other. I would like to remove the top line (has white background and “The Shop” with small font). Please see the attachment.

2. How can I add a “floating round button” that would take the mobile user back to the top when clicking it? This would make it quick and easy to get back to the top of the page.
I would like this button to stay visible (float) at the bottom right corner of the mobile page as they scroll down on their mobile phone. It should only be displayed to a mobile user (e.g. iPhone, Android), if possible.

3. Now the mobile phone screen shows one product image at a time. How can I make the images to display smaller on a mobile phone to fit 2 images on the screen? This would reduce the need to scroll so much.

Thank you!

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Pollito69]

This reply has been marked as private.

[Paul R]

Hi,

1. You can add this under Custom > Edit Global CSS in the Customizer.

.woocommerce-page .x-breadcrumb-wrap {
     display:none;
}

2. You can enable it under Footer > SCROLL TOP ANCHOR in the customizer(Appearance > Customize)

http://screencast.com/t/hzhCNOyie

3. You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 480px) {
.woocommerce .cols-3 li.product {
       width: 48%;
}
}

Hope that helps

[Pollito69]

Awesome. Thanks!

[Joao]

Glad to hear it,

Joao

[Author]

Posts