[Resolved] Quantity on cart page

Home Forums Support [Resolved] Quantity on cart page

Home Forums Support Quantity on cart page

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #856395
    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!!

    #856732
    David
    Staff
    Customer Support

    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

    #856772
    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.

    #856778
    David
    Staff
    Customer Support

    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
        }
    }
    #856783
    Pedro

    Hello david!

    It worked perfect !! Thank you!

    #856790
    David
    Staff
    Customer Support

    Glad to be of help

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.