Return to previous page

Issue with Quantity Selector Misalignment in Product Template

This topic has 3 replies, 2 voices, and was last updated 13 minutes ago ago by Officina 2.0

Officina 2.0

Participant

March 11, 2025 at 20:34

Dear Support Team,

We have encountered an issue with the product template on our WooCommerce website. The quantity selector appears to have shifted from its intended position, displaying misaligned relative to the rest of the product options. This affects the user experience and the overall layout of the product page.

For Example:
https://greenterest.it/vaso-cassetta-fogliata-serralunga/
https://greenterest.it/vaso-cassero-serralunga/
https://greenterest.it/doccia-giardino-solare-spring-arkema/

I have attached a screenshot to illustrate the problem. Could you please investigate and provide guidance on how to resolve this issue?

Thank you for your support.

Best regards,

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.

#436962 Copied Theme version: 9.4.8

2 Answers

Luca Rossi

Support staff

March 12, 2025 at 11:19

Dear @Officina 2.0,

We have reviewed your products, and the quantity appears to be correct on our end:

(https://prnt.sc/cme1TpKMWkxX)

Could you kindly provide us with details on how we can reproduce this issue? Specifically, please let us know the browser, device (mobile or desktop), and operating system you are using.

Thank you for your cooperation. We look forward to your response.

Best regards,
8Theme Team

#437027 Copied

Officina 2.0

Participant

March 12, 2025 at 12:33

I found this solution, the problem seemed to be only on PC so we applied it only on PC, but we would like to know from you if it is ok or if there is a more efficient way to solve it, thanks.

solution: .woocommerce-variation-add-to-cart {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
gap: 10px;
}

#yith-wapo-container {
display: flex;
flex-direction: column;
width: 100%;
}

#yith-wapo-container + .woocommerce-variation-add-to-cart {
order: 2;
margin-top: 20px;
}

.woocommerce-variation-add-to-cart .quantity {
display: flex;
align-items: center;
}

.woocommerce-variation-add-to-cart .single_add_to_cart_button {
flex-grow: 1;
}

/* Stili specifici per desktop */
@media (min-width: 769px) {
.woocommerce-variation-add-to-cart {
flex-direction: row; /* Allinea gli elementi in riga su desktop */
align-items: center; /* Allinea verticalmente gli elementi */
}

.woocommerce-variation-add-to-cart .quantity {
margin-right: 10px; /* Aggiunge spazio a destra della quantità */
}

.woocommerce-variation-add-to-cart .single_add_to_cart_button {
width: auto; /* Larghezza automatica per il pulsante */
}
}

#437039 Copied
Viewing 3 results - 1 through 3 (of 3 total)