Make "Add to cart" hover button responsive on woocommerce product pages

[Woordenaar]

Hi there

When hovering a product on the woocommerce product pages you get the “add to cart” button. I’ve changed it into “Bekijk product” which is Dutch for “see product”. I followed this topic: https://theme.co/apex/forums/topic/woocommerce-stick-to-popup/

But now I’m wondering how to get this button completely responsive. So, also being able to see the full text on small screens. Here you can see what I mean:

Thanks in advance for your help!

[christopher]

Hi there,

Unfortunately, that is not suitable for smaller screens to have 4 columns in a row. the approach which the default CSS styling of the Woocommerce does is to cut the text of the button to make it fit.

I am not sure if it will be possible to have a better solution but would you please kindly get back to us with the exact URL you are experiencing the case with the password to be able to see the page using the Secure Note functionality of the post to see how we can be of a help?

Thank you.

[Woordenaar]

I’ve added the secure note to the first post Thanks in advance for your help!

[thai]

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

@media (min-width: 980px){
    .woocommerce li.product .entry-header .button {
        padding: 3px 6px;
        font-size: 11px;
    }
}

Let us know how it goes!

[Woordenaar]

Hi there

Now the button shows completely on all sizes. But the button & text size is a bit small compared with the other elements on my site… How could I make button & text a bit bigger, but still have it shown the complete text?

Thanks in advance!!

[christian]

Hey @Woordenaar,

You need need to adjust the padding and font-size values of the code given previously. Or, you might want to add additional media queries. Regretfully, further custom development from here would be getting into custom development which is outside the scope of our support. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you.

Thank you for your understanding.

[Woordenaar]

Hi there

I have changed CSS and have the correct size & text font size. But now the button is horizontally not center aligned anymore.

I would like to have the button appear horizontally in the center of the product image. Vertically it is OK to have it near the bottom of the product image.

I changed your CSS code to:

@media (min-width: 980px){
    .woocommerce li.product .entry-header .button {
      
      display: block;	
      width:100px;
      font-size: 12px;
      margin-left: auto;
      margin-right: auto;
      
    }
}

As you can see in this image the margin CSS property does not help:

Your help would be greatly appreciated.

[paul.r]

Hi,

Please change your code to this.

@media (min-width: 980px){
    .woocommerce li.product .entry-header .button {      
      display: block;	
      min-width:100px;
      font-size: 12px;
      margin-left: auto;
      margin-right: auto;
      white-space: normal;
    }
}

It’s not responsive because you are setting it to a fix width of 100px;

Hope that helps.

[Woordenaar]

Thanks for the update… Unfortunately the button is still not center aligned on all screen sizes:

Hope you can get this fixed…

[christopher]

Hi there,

I am sure that you will understand that this is getting more and more to the realm of the custom development and unfortunately we are not able to assist more regarding this.

We strongly suggest that you consider getting used to the CSS coding in details regarding the media queries to fine tune your website.

The first step will be to know how to make use of the browser developer toolbar to find out proper CSS selectors:

After that, we encourage you to get started with CSS code itself:

https://www.w3schools.com/css/

That will make you independent and you will no longer need our help for small tweaks here and there. As the last try to give as much help as possible I suggest that you add the code below to make the buttons centered:

body.woocommerce li.product .entry-header .button {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

Thank you.

[Woordenaar]

Thanks for that extra code! w3schools.com is my number 1 resource for html & css code… But I still have a lot to learn it seems I’m not a web designer by profession. I make websites for my own projects, every time learning more…

[christian]

You’re welcome.