Return to previous page

Mobile product display - by ycs7a - on WordPress WooCommerce support

This topic has 27 replies, 2 voices, and was last updated 7 years ago ago by Rose Tyler

ycs7a

Participant

March 13, 2017 at 13:17

The display of my products is on the mobile not as good as on the desktop. Please see this image compared to this image.

I did not find any setting in Woocommerce -> Products -> Display that can help with this.

How should I fix this?

Thank you kindly.

#156819 Copied

26 Answers

ycs7a

Participant

March 13, 2017 at 13:19

Sorry: normal desktop view this image

#156820 Copied
Rose Tyler

Support staff

March 14, 2017 at 14:32
Hello,

Try to this code in Custom CSS for mobile:
```
.products-grid .product {
    width: 50% !important;
}
```
Regards,
Rose Tyler.
#156912 Copied
ycs7a

Participant

March 14, 2017 at 15:19

Thank you Rose.

With this code, I see two products next to each other. Yet, they are still out of proportion. The custom width that I use is 924 x 784.

Is there something that can be written for those dimensions so that it looks normal on the mobile?

#156926 Copied

ycs7a

Participant

March 14, 2017 at 15:25

2. The search bar on the mobile view does not show right: a customer cannot write a query because the bar that displays when you click on the ‘Search’ icon is not visible. Please see this image. The word ‘Zoeken’ before the icon would help indicate that there is a search bar.

I would like it to show normally. Is this possible?

Thank you.

#156927 Copied
Rose Tyler

Support staff

March 16, 2017 at 08:37
Hello,

1. Please, try to disable all 3-rd party plugins, clear cache and then check. Also, check this issue with default Woocommerce theme Storefront. We are able to help with issues related strictly to our theme. Comment your custom code for product image, for example, http://prntscr.com/ekkbq7 and check.
You can change images sizes in Woocommerce > Settings > Products > Display and then regenerate thumbnails with the plugin https://wordpress.org/plugins/regenerate-thumbnails/ .
2. Try to add this code in Custom css for mobile:
```
.header-type-17 .header-top .header-search .et-search-trigger.search-dropdown:hover form {
    left: 0;
    padding: 5px;
    height: 45px;
    width: 250px;
}
.header form#searchform {
    top: 5%;
}
.has-border .form-control {
    font-size: 14px;
    height: 30px;
}
.et-search-trigger.search-dropdown form .form-group.form-button {
    float: left;
    margin-left: 20px;
}
.et-search-trigger.search-dropdown form .form-group.form-button .btn-black {
    padding: 7px !important;
}
.et-search-trigger.search-dropdown form:before {
    display:none;
}
```
Regards,
Rose Tyler.
#157097 Copied
ycs7a

Participant

March 17, 2017 at 08:08

‘1. Thank you for your answer. Could you please explain the following: ‘Comment your custom code for product image, for example, http://prntscr.com/ekkbq7 and check’?

‘2. Thank you for the code.

Is it possible to have the search bar already there, without having to hover over it? Please see this image.

#157181 Copied

Rose Tyler

Support staff

March 17, 2017 at 08:46

Hello,

1. Comments are ignored by browsers. A CSS comment starts with /* and ends with */.
2. Sorry, but there are no such options in our theme and can be done through the additional code customization that is out of our support scope. You need to have base css and html skills if you want to achieve that.

Regards,
Rose Tyler.

#157191 Copied
ycs7a

Participant

March 17, 2017 at 23:29
‘1. It seems difficult for me to do this unfortunately. Also, I am afraid that if I disable all plugins that something will happen to the site.

Eva answered my question ‘How can I get the fixed size of products displayed? In the Theme Room 09 the Featured image size is fixed to 160 × 160 px Hard Crop. How can I do the same for Royal? Because now the image sizes (e.g. for Related Products) are different, resulting in an ugly look to the site’ with the following:

‘Please add this code in Theme Options > Custom CSS > Custom CSS for desktop:
```
.carousel-area .product-content-image img {
   height: 220px;
}
```
This was in the topic that I created called ‘DISPLACEMENT OF PRODUCTS’.

Is there no code that can make the products display for a fixed width and height on the mobile?

Thank you
#157243 Copied
Rose Tyler

Support staff

March 20, 2017 at 12:04
Hello,

In this case, add this code in Custom css for mobile:
```
.product-content-image img {
    height: 100%;
    max-width: 100%;
}
.carousel-area .product-content-image img {
    height: 100%;
    max-width: 100%;
}
```
Regards,
Rose Tyler.
#157332 Copied
ycs7a

Participant

March 20, 2017 at 13:08

Hi Rose,

Thank you kindly.

I am not sure whether this solved the issue, because the images still look out of proportion.

I am uploading all my images now 485×411 (or the half of 924×784).

Thank you!

#157337 Copied

Rose Tyler

Support staff

March 20, 2017 at 14:08

Hello,

Your image size set in Woocommerce > Settings > Products > Display http://prntscr.com/em88bc.
Please read this article https://docs.woocommerce.com/document/fixing-blurry-product-images/ and try to change values there.

Regards,
Rose Tyler.

#157344 Copied

ycs7a

Participant

March 20, 2017 at 15:54

‘1. Thank you. I am in the process of regenerating my thumbnails and everything looks good.

3. I cannot disable footer 1 in the widget area for the mobile. I normally can do this with the plugin Mobile Smart Pro. Footer 1 has no function on the mobile and is taking unnecessary speed.

Do you know how to disable this footer for the mobile? Thank you kindly.

4. The two filters in this image are disorder on the mobile view.

Can they be put into one single row like on the desktop? Thank you.

#157354 Copied

ycs7a

Participant

March 21, 2017 at 00:45

1 and 3 are solved. Thank you

#157373 Copied
Rose Tyler

Support staff

March 21, 2017 at 11:52
Hello,

You’re welcome!
4. Please add this code in Custom css for mobile:
```
.filter-wrap form.nfp-woocommerce-ordering {
    width: 50%;
}
.filter-wrap #nfp-product-per-page {
    float: left;
}
.filter-wrap select.orderby {
    width: 100%;
}
```
Regards,
Rose Tyler.
#157410 Copied
ycs7a

Participant

March 21, 2017 at 13:17

‘4. This worked well.

5. Is it possible to place the Woocommerce Filter Plus in the mobile filter version of the website? Please see this image. That way the products filter automatically (AJAX) for the customers 🙂

Please see for the plugin this page.

Thank you kindly

#157422 Copied

Rose Tyler

Support staff

March 22, 2017 at 10:53

Hello,

Sorry, but there is no such option in our theme and can be done only through the additional customisation that is out of our support scope.

Regards,
Rose Tyler.

#157494 Copied

ycs7a

Participant

March 22, 2017 at 12:19

Thank you Rose.

Unfortunately, question #3 has not been resolved. I thought it looked good now, but it keeps coming back. Can you please assist?:)

‘3. I cannot disable footer 1 in the widget area for the mobile. I normally can do this with the plugin Mobile Smart Pro. Footer 1 has no function on the mobile and is taking unnecessary speed.

Do you know how to disable this footer for the mobile? Thank you kindly.

#157513 Copied
Rose Tyler

Support staff

March 22, 2017 at 14:44
Hello,

You can add this code in Custom css for mobile:
```
.footer-top {
    display: none;
}
```
Regards,
Rose Tyler.
#157533 Copied
ycs7a

Participant

March 22, 2017 at 20:09

‘3. Thank you, this worked well.

6. Even though I have the product search bar setting in the widget and in the Theme both as settings in Theme Options -> Header on Products, the mobile version of my website displays on pages in the top search bar.

It should only search products. Please see this image.

Also, is it possible to place the button ‘Zoek’ next to the search bar, so that it is in 1 row?

Thank you kindly

#157615 Copied
1 2

Viewing 20 results - 1 through 20 (of 27 total)