Shop page - touch & select

Support
#1

Hi Rad, may I get your advice on a Woocommerce issue?
I have 2 kinds of products:
(A) products with options for various sizes & pricing
(B) products without options

When a visitor touches product A on the phone, the website will jump to the detailed product page.

But when the visitor touches product B, the website thinks that the visitor is putting product B into a shopping cart.

How can I make the Shop page consistent - so that selecting every product will bring the visitor to the detailed product page. Hence, the shopping cart is activated only at the product page.

My Shop page is called “My Menu” on my website.

#2

Hi @iamwithU ,

In this case, we can hide the add to cart button the mobile screen size. Please add this custom CSS under Theme Options > CSS:

@media (max-width: 767px){
    .woocommerce li.product .entry-header .button {
        display: none !important;
    }
}

Let us know how it goes!

#3

Brilliant. It worked! Thanks Thai, for the prompt help.
Cheers.

#4

Hi there,

In case you want to read further about the resources related to the previous suggestion, you may check these links:

Cheers!

#5

Thanks Jade, for your initiative in sending me links to learn more.
For my understanding of Thai’s code, could you be so kind to enlighten me on the significance & meaning of:
“li product”, “entry header”, “display none”?

So I know when or how to use these codes in future.

#6

Hi there,

li .product is a CSS selector. Basically this selector targets the element with a class product that is in an li element.

So the structure that you might be looking at might look something like:


<ul>
    <il>
        <span class="product">Hello</span>
    </li>
</ul>

Please note that the HTML structure might be different as well.

As for the display: none. Display is a CSS property that takes different values including none. You can read more about it here:

https://www.w3schools.com/cssref/pr_class_display.asp

If you want to learn how to be able to come up with your CSS codes, it would be best to start from the basics of CSS and HTML.

Hope this helps.

#7

Wow Jade, that’s super fast. You all are the best support team! Thank you.

Help me understand better - why is the “shopping cart” feature termed as “entry header” in this code.

Appreciate your patience. I don’t have basic CSS so the resources are not easy to digest for me.

#8

Hi @iamwithU,

We appreciate the kind words. :slight_smile: Have a nice day or night ahead!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.