Align Product Action Buttons in One Row and Fix Ordered List Spacing

This topic has 4 replies, 3 voices, and was last updated 1 month ago ago by Tony Rodriguez

  • Avatar: khurram virk
    khurram virk
    Participant
    December 13, 2025 at 18:56

    Dear Sir,

    Good day to you.

    I have two layout-related issues on the single product page that I need assistance with.

    1) Product Action Buttons Layout

    On the single product page, the Quantity selector and Add to Cart button are displayed in one row, while the Buy Now button appears on the next row.

    🔗 Sample Product Link:
    https://safeandsecureksa.com/product/manual-hand-operated-portable-chain-lever-block-ratchet-hoists-and-pulls/

    📸 Screenshot:
    https://snipboard.io/kOJ2zg.jpg

    I would like Quantity selector, Add to Cart, and Buy Now buttons to appear in a single row. I could not find any related setting in XStore options. Please advise if there is a built-in option or provide custom CSS or another recommended solution that keeps the layout responsive.

    2) Ordered List Spacing and Number Size in Short Description

    In the Short Description section, I used XStore styled ordered lists. However:

    The spacing between list items is too large

    The numbered list markers are much bigger than needed

    📸 Screenshot:
    https://snipboard.io/EgJt6D.jpg

    Kindly guide me on:

    How to reduce the vertical spacing between ordered list items

    How to decrease the size of the list numbers

    If custom CSS is required, please share the appropriate code.

    Thank you.

    3 Answers
    Avatar: Samir Malik
    Samir Malik
    Support staff
    December 14, 2025 at 05:11

    Hello, khurram,

    Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

    
    .woocommerce-product-details__short-description ol li {
        padding-bottom: 0;
    }
    @media (min-width: 768px){
        .single-product-builder form.cart .woocommerce-variation-add-to-cart {
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 10px;
        }
        
        .single-product-builder form.cart .woocommerce-variation-add-to-cart .quantity {
            margin-right: 0;
        }
        
        .single-product-builder form.cart .woocommerce-variation-add-to-cart .text-center.et-or-wrapper {
            display: none;
        }
    }
    

    Kind regards,
    The 8Theme Team

    Avatar: khurram virk
    khurram virk
    Participant
    December 24, 2025 at 14:29

    Thanks for the support! My topic “Align Product Action Buttons in One Row and Fix Ordered List Spacing” has been successfully resolved.

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    December 24, 2025 at 14:29

    Dear khurram virk,

    We really appreciate your time and engagement within the WordPress & WooCommerce community

    Your feedback drives every improvement we make in XStore — helping us deliver a smoother and more flexible experience with each update.

    Your input makes a real difference.

    Topic closed.
    The 8Theme Team

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

The issue related to '‘Align Product Action Buttons in One Row and Fix Ordered List Spacing’' has been successfully resolved, and the topic is now closed for further responses

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