fbpx

Full Width on Add to Cart Button

HomeTopicsSupport forumFull Width on Add to Cart Button
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #16899
    Avatar
    Devrental
    Participant

    Hi,

    I want the Add to Cart Button to be in Full Width in Mobile & Desktop view

    https://prnt.sc/1wve3za
    https://prnt.sc/1wvis8m

    I have tried below css

    .single_add_to_cart_button {
    width: 100%;
    }

    But it creates responsive issues.

    #16907
    Artem Temos
    Artem Temos
    Keymaster

    Hello,

    Try to add the following code snippet to the Custom CSS area to make this button full width

    .xts-single-product form.cart:not(.variations_form):not(.xts-variations_form), .xts-single-product form.cart:not(.xts-variations_form) .woocommerce-variation-add-to-cart {
        display: flex;
    }
    .xts-single-product form.cart:not(.xts-variations_form) .single_add_to_cart_button {
        flex: 1 1 auto;
    }
    .xts-single-product form.cart:not(.xts-variations_form) .quantity {
        flex: 0 0 auto;
    }

    Kind Regards

    #16910
    Avatar
    Devrental
    Participant

    Hi ,

    I have added the code . But i dont see the changes . Please have a look at the URL provided in private content.

    #16911
    Artem Temos
    Artem Temos
    Keymaster

    Please, send us your admin access so we can check what is wrong.

    Kind Regards

    #16917
    Avatar
    Devrental
    Participant

    I have removed the code for now . Admin Access is given in private section .

    For different product the behavior is different

    Attachments:
    You must be logged in to view attached files.
    #16921
    Artem Temos
    Artem Temos
    Keymaster

    Try to replace the code with the following one

    body .elementor-widget-xts_single_product_add_to_cart .variations_form {
        display: block;
    }
    .xts-single-product form.cart:not(.variations_form):not(.xts-variations_form), .xts-single-product form.cart:not(.xts-variations_form) .woocommerce-variation-add-to-cart {
        display: flex;
    }
    .xts-single-product form.cart:not(.xts-variations_form) .single_add_to_cart_button {
        flex: 1 1 auto;
    }
    .xts-single-product form.cart:not(.xts-variations_form) .quantity {
        flex: 0 0 auto;
    }
    #16976
    Avatar
    Devrental
    Participant

    Thank you . Its now working properly .

    #16993
    Artem Temos
    Artem Temos
    Keymaster

    Great, you are welcome!

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

The topic ‘Full Width on Add to Cart Button’ is closed to new replies.

Sign in

No account yet?

Create an Account