Return to previous page

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

This topic has 2 replies, 2 voices, and was last updated 1 days, 9 hours ago ago by Samir Malik

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.

#462442 Copied

1 Answer
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
#462449 Copied
Viewing 2 results - 1 through 2 (of 2 total)