Docs

[anthonytkim]

I can’t find any settings to edit the placement of this button, but I need to move it from being on the thumbnail image to being under the product price. I also would like to make the button full width of the thumbnail image. I’m assuming that I could edit it with some CSS hacks but can’t find the right class id’s to move.

[Rue Nel]

Hello There,

Thanks for posting in!

To move it from being on the thumbnail image to being under the product price, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.woocommerce li.product .entry-header .button, 
.woocommerce-page li.product .entry-header .button {
   position: relative;
   margin-top: 10px;
   display: block;
   top: auto;
   left: auto;
   opacity: 1;
}

Let us know if this has been helpful to you.

[anthonytkim]

Worked great, thanks!

[Rue Nel]

You are most welcome!
We are glad we were able to help you out.

[NightFox]

Hi there,

Can you please help me to get the add to cart button and the # picker on the same line?

[NightFox]

This reply has been marked as private.

[Rad]

Hi there,

Please add this too 🙂

.woocommerce .quantity, .woocommerce-page .quantity {
  display: inline-block;
}

Cheers!

[MexConcept]

Hi, this is awesome! could you just tell us how to place a little space between the #picker and button?

http://screencast.com/t/ubFTKT9yVRIS

thanks guys!

[Thai]

Hi There,

Please try following CSS:

button.single_add_to_cart_button {
    margin-left: 15px;
}

Hope it helps.

[MexConcept]

Rocks like a star! thanks!

[Paul R]

You’re welcome!

[Author]

Posts