Hook to place button next to add to cart button

This topic has 10 replies, 2 voices, and was last updated 2 years, 9 months ago by Fernando.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
December 13, 2022 at 5:26 pm #2461049

Matthew

Hi,

I’m trying to add an element that places a button next to the add to cart button. I’m using the hook woocommerce_after_add_to_cart_button, but it drops the new button below add to cart, not next to it. Am I missing something simple here? Thanks!

December 13, 2022 at 7:08 pm #2461086

Fernando
Customer Support

Hi Matthew,

Can you try this hook instead?: woocommerce_before_add_to_cart_quantity

I’ll check if we can use CSS afterward to put it beside the add-to-cart button.

December 13, 2022 at 8:22 pm #2461125

Matthew

Updated. Can we get it from there to the right of Add to Cart?

December 13, 2022 at 8:36 pm #2461133
Fernando
Customer Support
Yes. You can try adding this through Appearance > Customize > Additional CSS:
```
.single-product .bundle_button {
    display: flex;
    align-items: center;
}

.single-product .bundle_button > *:first-of-type {
    order:2;
    margin-bottom: 0;
    margin-left: 5px;
}

.single-product .bundle_button > *:last-of-type {
    order:1;
}
```
December 13, 2022 at 8:39 pm #2461134

Matthew

Lovely! You guys are the best.

December 13, 2022 at 8:42 pm #2461136

Matthew

Oops, actually, that looks great on desktop, but I do need it to drop to the next line on mobile or the buttons get crushed. What can I do there?

December 13, 2022 at 8:46 pm #2461138
Fernando
Customer Support
It won’t fit on smaller screens in one line. We’ll need to set it to wrap.

Try this code instead:
```
.single-product .bundle_button {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.single-product .bundle_button > *:first-of-type {
    order:2;
    margin-bottom: 0;
    margin-left: 5px;
}

.single-product .bundle_button > *:last-of-type {
    order:1;
}
```
Let us know how it goes.
December 13, 2022 at 8:48 pm #2461139

Matthew

Looks like that’s wrapping well, but it needs to drop the space on the left and add some space above.

December 13, 2022 at 8:54 pm #2461142
Fernando
Customer Support
Are you referring to adding spacing at the top of the Amazon Button on mobile?

Try this CSS instead:
```
.single-product .bundle_button {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.single-product .bundle_button > div:first-of-type {
    order: 2;
    margin-bottom: 0;
    margin-left: 5px;
}

.single-product .bundle_button > button {
    order: 1;
    float: unset;
}

@media (max-width: 768px) {
    .single-product .bundle_button > div:first-of-type {
        margin-top: 10px;
    }
}
```
December 13, 2022 at 8:58 pm #2461145
Matthew
That’ll work! I made one tweak to it. I commented out the margin-left on the new button and instead added the same amount of margin-right to the add to cart button to fix that shift to the right on mobile. Thanks again!
```
.single-product .bundle_button {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.single-product .bundle_button > div:first-of-type {
    order: 2;
    margin-bottom: 0;
    //margin-left: 5px;
}

.single-product .bundle_button > button {
    order: 1;
    float: unset;
}

@media (max-width: 768px) {
    .single-product .bundle_button > div:first-of-type {
        margin-top: 10px;
    }
}
```
December 13, 2022 at 9:05 pm #2461148

Fernando
Customer Support

I see. You’re welcome, Matthew!
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

[Resolved] Hook to place button next to add to cart button

Popular Articles

Start building better websites today.