Home Forums WoodMart support forum BUY AND ADD TO CART BUTTONS IN MOBILE

BUY AND ADD TO CART BUTTONS IN MOBILE

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #581602

    gzelasco
    Participant

    Could you give me a suggestion for having the BUY AND ADD TO CART BUTTONS IN MOBILE on the same line? Please see the screenshot.

    Let me know if you need anything else!

    Attachments:
    You must be logged in to view attached files.
    #581685

    Luke Nielsen
    Member

    Hello,

    1. In our theme, the quantity, add to cart and buy now buttons are already inline, they fall under each other only if there is not enough horizontal space for them. This is done so that they do not go beyond the edge of the screen and are always available for clicking: https://gyazo.com/34a26cdd00681a1762084b2f4d4bdf97

    With the help of custom code, you can turn off the wrapping of these elements so that they are always in one row, but in this case, on the smallest mobile screens, the buttons may go beyond the edge of the screen: https://gyazo.com/42da4d055125db0fc8b7560f14b9bddd

    2. If you are satisfied with this position of the buttons on mobile, use the following custom code to disable the wrap for the buttons of simple and variable products:

    /* simple product */
    .single-product-page .cart:not(.variations_form) {
    	flex-wrap: nowrap;
    }
    
    /* variable product */
    .single-product-page .variations_form .woocommerce-variation-add-to-cart {
    	flex-wrap: nowrap;
    }

    Kind Regards

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