Hook to place button next to add to cart button

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.

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

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;
}

Lovely! You guys are the best.

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?

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.

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

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;
    }
}

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;
    }
}

I see. You're welcome, Matthew!