Return to previous page

Move the Buy Now button to the same row as the Add to Cart button

This topic has 4 replies, 2 voices, and was last updated 1 years, 11 months ago ago by Rose Tyler

  • Avatar: Jason
    Jason
    Participant
    June 2, 2022 at 01:52

    Hi there, is that possible I move the Buy Now button to the same row as the Add to Cart button on the WooCommerce product page for saving more space?

    Please, contact administrator
    for this information.
    #325009 Copied Theme version: 8.1.6 WooCommerce version: 6.0
    3 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 2, 2022 at 07:12

    Hello,

    Disable this option https://prnt.sc/FcLVNFvST1Ov and use the next custom CSS code:

    .single-product-builder .single_add_to_cart_button ~ .et-or-wrapper {
    flex-basis: 10%;
    margin-left: 10px;
    margin-right: 10px;
}
.single-product-builder form.cart {
    display: flex;
}
.single-product-builder .et_product-block .et-single-buy-now.single_add_to_cart_button.button {
    width: 20%;
    flex-basis: 20%;
    min-width: 20%;
}

    Regards

    #325019 Copied
    Avatar: Jason
    Jason
    Participant
    June 2, 2022 at 08:35

    Hi there,

    I used this custom CSS code and it shows that the Buy Now button is too narrow. Then I adjust the Min Width of Add to Cart button in Single Product Builder, it automatically adjusts the width of the two buttons to each other, looks normal.
    But actually, the Buy Now button is never change, it’s still too narrow. How to fix this issue to adjust the width of both button?

    Regards

    Please contact administrator
    for this information.
    #325028 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 2, 2022 at 14:56

    Hello,

    Please add this code also:

    .single-product-builder form.cart .woocommerce-variation-add-to-cart {
    width: 100%;
}

    Regards

    #325059 Copied

  • Tagged: , , , , , ,

  • Viewing 4 results - 1 through 4 (of 4 total)

The issue related to '‘Move the Buy Now button to the same row as the Add to Cart button’' has been successfully resolved, and the topic is now closed for further responses

Helpful Topics

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Flowers Store – WordPress WooCommerce Theme
lazy-placeholder
Mobile Store – WordPress WooCommerce Theme
lazy-placeholder
Classic Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Language Courses – WordPress WooCommerce Theme
lazy-placeholder
Ecoenergy – WordPress WooCommerce Theme
lazy-placeholder
WooPress Fullwidth
lazy-placeholder
Electron Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Sidebar Boxed Store – WooCommerce Theme
lazy-placeholder
Wedding – WordPress Theme
lazy-placeholder
Games Store – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.