UX improvement?

[Adri Oosterwijk]

Hi Andy,

Viewing my products (home and shop page) I noticed that the products are listed with a good size thumbnail. Great. On a desktop the button “Add to cart” is displayed when hovering a thumbnail. The visitor knows what he can do.

That’s different on a mobile device. No hovering is possible. What I can see when I analyze my visitors data that almost everyone visiting with a mobile device is leaving without further action. The shoppage is the landing page for colicks coming from AdWords so I can follow it easily.

The visitor can only scroll down and then…. what? It seems that it is not clear to them that they can tab the image to go to the single product page. Wouldn’t it be better to display a default button “SHOW” or in my case “TOON” on the product image? At least it makes it super clear what the visitor can do.

What is your opinion on it?

HTH

Best wishes,

Adri

[Andy]

Hi Adri

There is the option to show the add to cart button below the product image & name, and always visible without the need to hover.
— Appearance > Customize > Shop Options > Add To Cart Button

This can be seen on the Trusted Pro demo.

[Adri Oosterwijk]

Hi Andy,

Thank you for your reply. I looked at the demo and it is not quite what I aim for. One of the reasons I chose for the Trusted Pro theme was the clean design of the product archive pages with the “add to cart button” displayed when hovering the thumbnail.

I overlooked the (IMHO) limitation on the mobile pages.

So, I would be very, very happy when there will be an option for a “VIEW” button on top of the thumb with a link to the single product page. Only on mobile devices as far as I’m concerned. And always visible on those mobile devices. I am convinced that it will improve the user experience on mobile devices a lot.

The add to cart button can be left out because no one is seeing it on mobile devices (ok, they see it for a short time when tabbing a product photo, but because they are navigating to te single product page is that not very beneficial to them).

I do hope you will see the benefits as well to add it in the next release, and if so I do hope that this next release is coming out very, very soon.

 

[Andy]

It should be possible with CSS. Add the following in Additional CSS

@media screen and (max-width: 768px) {

    ul.products li.product {
        padding-bottom: 10px;
    }

    ul.products li.product .woocommerce-loop-product__title {
        position: relative;
        margin-bottom: 40px !important;
    }

    ul.products li.product .woocommerce-loop-product__title:after {
        position: absolute;
        background: orange !important;
        color: #fff;
        content: "VIEW";
        top: auto;
        bottom: -10px;
        left: 15px;
        height: auto;
        padding: 5px;
        text-align: center;
    }

}

This will put a “VIEW” button directly below the product name, on devices with a browser width below 768px.

[Adri Oosterwijk]

Hi Andy,

You did it again. A superb solution.

Thank you very much.

Adri

[Author]

Posts