Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • April 3, 2019 at 3:06 pm #1086580
    profumopuntoit

    Hello
    following https://kriesi.at/support/topic/quantity-not-showing-in-woocommerce-cart-on-mobile/ post I added
    @media only screen and (max-width: 767px){
    .responsive .shop_table .product-quantity { display: block !important; }
    }
    to show quantity selectors to cart in mobile view
    It is displayed in a bit messy way, but also in portrait mode the total column disappear
    Our cart is standard, I don’t think there is any other plugin messing around with it

    Please see screenshots
    Thank you
    Mauro

    April 3, 2019 at 4:05 pm #1086603
    profumopuntoit

    Also the “Update Cart” button in going in a new row below 767px width
    Please see screenshot

    April 4, 2019 at 9:11 am #1086870
    Nikko

    Hi profumopuntoit,

    Can you give us admin access of the stage site?

    Best regards,
    Nikko

    April 4, 2019 at 2:15 pm #1087043
    profumopuntoit
    This reply has been marked as private.
    April 6, 2019 at 2:03 pm #1087761
    Nikko

    Hi profumopuntoit,

    Thanks for giving us admin access, I added this css code in Quick CSS:

    @media only screen and (max-width:767px) {
  .responsive .shop_table .product-quantity {
    display: table-cell !important;
  }
}

    Clearing browser cache might be needed to display properly.

    Best regards,
    Nikko

    April 17, 2019 at 5:38 pm #1092082
    profumopuntoit

    Thank you,
    as they are taking too much space, how to make quantity selectors (the plus, the number, the minus) much smaller?

    I would like to suggest to completely rethink the layout of the cart to be natively looking cool in mobile view, because like this is just a desktop layout too shrunk, the product name wrap up to 5 lines, quantity selectors are not present, delete button occupy some of the little space available, under 480px total column disappear, possibly putting product name on one line and on different lines you can put delete button, Price, Quantity and Total.
    Also price and total are not right aligned as they should
    Also “Apply coupon” and “Update cart” are not properly aligned
    Thank you
    Mauro

    April 20, 2019 at 5:57 am #1092820
    Nikko

    Hi Mauro,

    Try adding this css code as well (you can merge the last code I gave since they are both using media query of max-width 767px):

    @media only screen and (max-width:767px) {
    #top .shop_table, 
    #top .shop_table tr.woocommerce-cart-form__cart-item.cart_item, 
    #top .shop_table tr.woocommerce-cart-form__cart-item.cart_item td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    #top .shop_table {
        border: none;
    }

    #top .shop_table thead {
        display: none;
    }

    #top .shop_table tr.woocommerce-cart-form__cart-item.cart_item {
        padding-top: 50px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
        position: relative;
    }

    #top .shop_table tr.woocommerce-cart-form__cart-item.cart_item td {
        box-sizing: border-box;
        border: none;
    }

    #top .shop_table tr.woocommerce-cart-form__cart-item.cart_item td.product-remove {
        position: absolute;
        top: 15px;
        right: 10px;
        width: 26px !important;
    }

    #top .shop_table tr.woocommerce-cart-form__cart-item.cart_item td.product-thumbnail img {
        width: 100%;
    }

    #top .shop_table tr.woocommerce-cart-form__cart-item.cart_item td.product-subtotal {
        font-weight: bold;
        color: red;
    }
}

    Best regards,
    Nikko

    April 23, 2019 at 2:49 pm #1093674
    profumopuntoit

    Excellent thank you
    The only thing which are not correct are the small remove x button that is visible only under 480px and not between 480 and 767px and that the product price is shown twice, once in grey and once in red and it is not clear that one is the price of the product and the second is the total of the product price x quantity

    I changed from 100% to 30% the image size
    tr.woocommerce-cart-form__cart-item.cart_item td.product-thumbnail img { width: 30%; }
    because otherwise the product image was too big. There is a way to add natively a smaller size image without load a big (and heavy) image and then squeeze it?

    I hope that you will integrate this code in a future update and in that case you could also show only once the price if ordered quantity is 1

    Please see screenshots
    Thank you
    Mauro

    April 23, 2019 at 3:27 pm #1093679
    profumopuntoit

    Adding
    div a.remove { display: table-caption; }
    fix the issue with remove x icon between 480 and 767px
    but I don’t know if it will conflict with other styles in other pages

    April 24, 2019 at 7:34 pm #1094121
    Victoria

    Hi profumopuntoit,

    Please let us know if you need any more help or we can close this.

    Best regards,
    Victoria

    April 25, 2019 at 11:54 am #1094358
    profumopuntoit

    Hello
    There is a way to show a caption to the two prices indicating that one is the price of product and the second the total?
    Page https://kriesi.at/support/enfold-feature-requests/ is freezed
    Will you consider updating your standard cart page with these styles in a future update?
    Thank you
    Mauro

    April 29, 2019 at 11:11 pm #1095506
    Ismael

    Hi,

    Thanks for the update.

    That is possible. Try this script in the functions.php file.

    dd_action('wp_footer', 'ava_custom_add_subtotal_text');
function ava_custom_add_subtotal_text(){
	?>
	<script type="text/javascript">
        (function($) {
            $('<span class="label">Subtotal</span>').prependTo('.product-subtotal');
        })(jQuery);
	</script>
	<?php
}

    The code above is going to add a “Subtotal” text right before the subtotal value.

    Best regards,
    Ismael

    April 30, 2019 at 5:00 pm #1095818
    profumopuntoit

    thank you but there is some error
    with
    dd_action(‘wp_footer’, ‘ava_custom_add_subtotal_text’);
    I receive a 500 error
    I changed it to
    do_action(‘wp_footer’, ‘ava_custom_add_subtotal_text’);
    and it displays some extra lines and the span with the text subtotal is not shown
    Please see attachment
    Thank you
    Mauro

    May 1, 2019 at 7:17 pm #1096242
    profumopuntoit

    Also this function makes the checkout fields grayed out and is impossible to complete the purchase
    please see attachment

    May 5, 2019 at 8:32 pm #1097488
    Ismael

    Hi,

    Thanks for the update.

    That should be “add_action”, not “do_action”. My bad. Please adjust the function name.

    Best regards,
    Ismael

    May 6, 2019 at 3:58 pm #1097717
    profumopuntoit

    Hi Ismael,
    thank you
    In mobile view it looks perfect. The problem is that this code is added also in desktop view.
    Please see attachment
    Thank you
    Mauro

    May 7, 2019 at 5:42 am #1097939
    Ismael

    Hi,

    Thanks for the update.

    Add this css code to hide the label on desktop view.

    @media only screen and (min-width: 768px) {
    .product-subtotal .label { display: none !important; }
}

    Best regards,
    Ismael

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