Return to previous page

Mobile Thumbnail Image - by S - on WordPress WooCommerce support

This topic has 8 replies, 3 voices, and was last updated 3 years, 7 months ago ago by Olga Barlow

S

Participant

September 20, 2020 at 22:21

How do I change the mobile “Shop” page to display 2 thumbnail images per row? Also, how do I add a “Filter” feature to allow customers to filter by “Category”, “Price”, etc.? Lastly, how do I deactivate the call to action button (Add to cart) on the “Shop” page?

#252027 Copied Theme version: 6.3.2 WooCommerce version: 4.5.2

7 Answers
Olga Barlow

Support staff

September 22, 2020 at 20:08
Hello,

1) To show 2 products per row for the mobile devices add the below code to Theme Options > Custom CSS
```
@media only screen and (max-width: 480px){
    .product {
        width: 50% !important;
    }
}
```
2) You may try to use the hidden sidebar area to add filters and show it for the mobile by hide for the desktop using custom CSS. If you provide us with WP Dashboard access to your site we’ll help you with this.

3) Go to Theme Options > Products page layout > Show “Add to cart” button > Off.

Regards
#252280 Copied
S

Participant

September 22, 2020 at 21:25

– tried #1 but was unsuccessful
– did not try #2
– I was able to complete #3 successfully (removed “add to cart” on product page)
– Here is a mobile example of what I want to do for #1 and #2. Also, is it possible to create a bottom navigation bar like in the picture: https://1drv.ms/u/s!Aus30Y_tRwLFgcJDxOlpMzlSsivC3g

2 More Issues:
– Need to change the color of the words “Return to Previous Page” so it can be seen in the banner. It currently blends in with the banner.
– I enabled “amount to free shipping” message. On Mobile, “Continue Shopping” overlaps the calculation to free shipping message.

Please contact administrator
for this information.

#252296 Copied

Olga Barlow

Support staff

September 24, 2020 at 10:56

Hello,

1) Everything works fine once I added custom to Theme Options > Custom CSS and save the settings.

2) Check now.

3) Edit color using theme options > Typography > Breadcrumbs http://prntscr.com/umzmi3

4) Check now.

Regards

#252497 Copied

S

Participant

September 24, 2020 at 21:00

Thanks

#252636 Copied

Rose Tyler

Support staff

September 25, 2020 at 10:12

You’re welcome!

Regards

#252701 Copied

S

Participant

September 25, 2020 at 15:40

I just noticed an issue with the mobile change (2 on a row). When you click on the product, the product is condensed in the left column. Unlike before, it would display on the full screen. Can this be updated? Mobile product page layout, 2 a row; Mobile single product page, full screen (like before).

#252747 Copied

Olga Barlow

Support staff

September 25, 2020 at 16:31

Hello,

Done.

Regards

#252769 Copied
Viewing 8 results - 1 through 8 (of 8 total)