Mobile Thumbnail Image - by S - on WordPress WooCommerce support

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

  • Avatar: S
    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?

    7 Answers
    Avatar: Olga Barlow
    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

    Avatar: S
    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.
    Avatar: Olga Barlow
    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

    Avatar: S
    S
    Participant
    September 24, 2020 at 21:00

    Thanks

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 25, 2020 at 10:12

    You’re welcome!

    Regards

    Avatar: S
    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).

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    September 25, 2020 at 16:31

    Hello,

    Done.

    Regards

  • Viewing 8 results - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.