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

[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!

[Fernando]

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.

[Matthew]

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

[Fernando]

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

[Matthew]

Lovely! You guys are the best.

[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?

[Fernando]

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.

[Matthew]

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

[Fernando]

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

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

[Fernando]

I see. You’re welcome, Matthew!

[Author]

Posts