Return to previous page

Add to cart button – single product page

This topic has 10 replies, 2 voices, and was last updated 8 years, 8 months ago ago by Eva Kemp

SportDataLtd

Participant

March 18, 2016 at 14:07

I would like to display the add to cart button in the same line as the select with varations, not below it. How to achieve that?

#118009 Copied

9 Answers

Eva Kemp

Support staff

March 18, 2016 at 15:10

Hello,

Please give us your site name.

Regards,
Eva Kemp.

#118020 Copied

SportDataLtd

Participant

March 22, 2016 at 21:06

I attach a link to my single product page. I know I can overwrite variable.php template to do that, but I don’t know how.

My goal is to display the add to cart button in the same line as select for variations, on the right side.

I was trying to add the button to table class=””variations”, but without success. The button keeps displaying below the select.

Please, contact administrator
for this information.

#118509 Copied
Eva Kemp

Support staff

March 23, 2016 at 09:21
Hello,

Please add this code in Theme Options > Styling > Custom CSS > Custom CSS for desktop:
```
.product-information table.variations, .product-information form.variations_form.cart .single_variation_wrap {
    width: 40% !important;
}
.product-information .cart {
   display: inline-flex !important;
}
```
Regards,
Eva Kemp.
#118557 Copied
SportDataLtd

Participant

March 23, 2016 at 15:44

Thank you. It’s working, but when I select a variation, the button is moved down by a text: “In stock” or “Items left: 1”. How can I move this message below the add to cart button?

#118621 Copied
Eva Kemp

Support staff

March 23, 2016 at 16:00
Hello,

In this case please also use this css code:
```
.woocommerce-variation-add-to-cart.variations_button {
    margin-top: -90px;
}
.woocommerce-variation-availability {
    margin-top: 50px;
    margin-left: 30px;
}
```
Regards,
Eva Kemp.
#118629 Copied
SportDataLtd

Participant

March 23, 2016 at 16:07

OK, but when neither of the varations is selected (woocommerce-variation single_variation: display: none), then the button is going up.

#118635 Copied
Eva Kemp

Support staff

March 23, 2016 at 16:35
Hello,

Try to remove the previous code:
```
.woocommerce-variation-add-to-cart.variations_button {
    margin-top: -90px;
}
.woocommerce-variation-availability {
    margin-top: 50px;
    margin-left: 30px;
}
```
and use this code:
```
.woocommerce-variation-availability {
    margin-top: 50px;
    position: absolute;
}
```
Regards,
Eva Kemp.
#118648 Copied
SportDataLtd

Participant

March 23, 2016 at 19:49

Works like a charm. Thank you.

#118683 Copied

Eva Kemp

Support staff

March 23, 2016 at 20:20

Hello,

You’re welcome.

Regards,
Eva Kemp.

#118688 Copied
Viewing 10 results - 1 through 10 (of 10 total)