[Resolved] Quantity on cart page

[Pedro]

Hello! I have been passing some CSS codes that you gave me for another page where I also use GP Premium.

And in doing so, I’ve noticed that the quantity buttons on the cart page end up aligned to the left.

Here you can see a screenshot: https://www.dropbox.com/s/spzh8qfyekxfjfx/Screenshot_2019-04-01-22-02-55-135_com.android.chrome.png?dl=0

The code that I used in my new site is:

/** Ocultar cupon en carrito**/
.coupon{display:none;}

/** Tamaño correcto botón seguir comprando en carrito**/
.woocommerce-page table.cart td.actions .button {
    box-sizing: border-box;
}

/** Botón finalizar compra en carrito **/
.woocommerce .proceed-to-checkout-above-cart .checkout-button {
    float: right;
    margin: 0 20px 1em 0; /* 20px adjusts the right hand offset */
}

@media (max-width: 768px) {
    .woocommerce .proceed-to-checkout-above-cart .checkout-button {
        display: block;
        float: none;
        text-align: center;
        margin-right: 0;
        padding-top: 20px; 
        padding-bottom: 20px;
    }

}

/** Cambiar color precio regular **/
.woocommerce ul.products li.product .price del, 
.woocommerce div.product p.price del {
    color: #555555 !important;
}

/** Boton añadir al carrito grande **/
.woocommerce div.product form.cart div.quantity {
    float: none;
    width: 100%;
    margin-right: 0;
}

.woocommerce div.product form.cart .button {
    width: 100%;
    margin-top: 10px;
    padding: 20px;
}
@media (max-width: 768px) {
    .do-quantity-buttons div.quantity {
        justify-content: flex-start !important;
    }
}

/** Estilo mensaje superior antes de contenido **/
.inside-container-message {
    padding-top: 20px;
}
.inside-container-message p {
    margin-bottom: 0;
}

/** Mostrar porcentaje de ahorro en página de producto **/
.sale-perc {
    display: inline;
    margin-left: 10px;
    padding: 2px 10px;
    background-color: #b12704;
    color: #fff;
	  font-size: 17px; /* Adjust font size */
}
.woocommerce div.product p.price, .saved-sale {
    display: inline-block;
}

Can you help me?

Thank you!!

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

this CSS is effecting it:

@media (max-width: 768px) {
    .do-quantity-buttons div.quantity {
        justify-content: flex-start !important;
    }
}

Change the selector to .single-product .do-quantity-buttons div.quantity

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hello david! Thanks for answering.

That CSS code was given to me by Tom, what he does is move the “add to cart” button below the amount and lengthen the full width (on the product page)

However, before when he gave it to me, in the mobile version the quantity appeared aligned to the right.

That part of the code that you show me, what you do is put the amount as it should appear by default (left).

When I change it as you indicate, the problem in the cart page is solved but in the product page the quantity is realigned to the right.

[David]

You’re edited code should look like this, and then it will only apply to the single product:

@media (max-width:768px) {
    .single-product .do-quantity-buttons div.quantity {
        justify-content: flex-start !important
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hello david!

It worked perfect !! Thank you!

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts