Home › Forums › WoodMart support forum › Extend Width of ADD TO CART Button

Extend Width of ADD TO CART Button

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • February 13, 2022 at 11:17 pm #352645

    rattan
    Participant

    Dear Xtemos,

    I am wishing to extend the width of the Add to Cart button as illustrated in my attachment.

    I need the width to extend all the way across.

    Please can you help.

    Attachments:
    You must be logged in to view attached files.
    February 13, 2022 at 11:25 pm #352651

    rattan
    Participant

    .

    February 14, 2022 at 12:23 am #352669

    Elise Noromit
    Member

    Hello,

    Thank you very much for choosing our theme and for contacting us.

    Please add this code to the Theme Settings > Custom CSS > Global:

    .product-image-summary .single_add_to_cart_button {
   display:block;
	min-width:100%;
}

    Best Regards

    February 14, 2022 at 12:05 pm #352814

    rattan
    Participant

    Thanks for you reply but that is not what im trying to achieve unfortunately.

    I need the “add to cart” button to be inline with the “quantity box”.

    Your code does increase the width but it drops the “add to cart” button to a new row bellow the “quantity box”.

    February 14, 2022 at 11:20 pm #352989

    Elise Noromit
    Member

    Hello,

    Please try to replace the provided code with this one:

    ` .product-image-summary .cart {
    display: flex;
    }
    .product-image-summary .single_add_to_cart_button {
    flex-grow: 1;
    }`

    Best Regards

    February 15, 2022 at 2:51 pm #353216

    rattan
    Participant

    hi, that didn’t work unfortunately

    Attachments:
    You must be logged in to view attached files.
    February 15, 2022 at 11:08 pm #353322

    Elise Noromit
    Member

    Hello,

    Please provide me URL for each type of product you use on the site.

    I will provide common CSS for all.

    Best Regards

    February 16, 2022 at 12:45 pm #353504

    rattan
    Participant

    Thanks Elise for your reply.

    All my product pages are as bellow:

    February 17, 2022 at 11:54 am #353771

    rattan
    Participant

    any updates?

    February 17, 2022 at 7:46 pm #354043

    rattan
    Participant

    can someone please help out. it has been nearly 4 days now and i still haven’t managed to achieve what i want.

    thanks

    February 17, 2022 at 9:36 pm #354058

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    .product-type-variable .woocommerce-variation-add-to-cart-disabled {
    display: flex;
    }
    .product-type-variable .product-image-summary .single_add_to_cart_button {
    flex-grow: 1;
    }
    .product-type-simple .product-image-summary .cart {
    display: flex;
    }
    .product-type-simple .product-image-summary .single_add_to_cart_button {
    flex-grow: 1;
    }

    Best Regards

    February 17, 2022 at 9:39 pm #354059

    rattan
    Participant

    Thanks Elise,

    worked perfectly

    February 18, 2022 at 12:08 pm #354221

    Elise Noromit
    Member

    You are welcome! We are here to help.

    Wish you a wonderful day!

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Extend Width of ADD TO CART Button’ is closed to new replies.