Home Forums WoodMart support forum Edit Shop Buttons

Edit Shop Buttons

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

    avalulu.ltd
    Participant

    Good day,

    Can you please assist: i need to edit the layout of the two shop buttons (please see attached image). I need to place them next to each other and create 5px of space between them.

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

    Luke Nielsen
    Keymaster

    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 */
    .summary-inner > .cart:not(.variations_form) {
    	flex-wrap: nowrap;
    }
    
    /* variable product */
    .summary-inner .variations_form .woocommerce-variation-add-to-cart {
    	flex-wrap: nowrap;
    }

    Kind Regards

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