[Resolved] Having trouble customizing woocommerce cart for mobile.

Home Forums Support [Resolved] Having trouble customizing woocommerce cart for mobile.

Home Forums Support Having trouble customizing woocommerce cart for mobile.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1527700
    Anthony

    I keep getting the default cart being displaying content on top of each other rather than inline. Is there a way to change this?

    #1527704
    Elvin
    Staff
    Customer Support

    Hi,

    I keep getting the default cart being displaying content on top of each other rather than inline. Is there a way to change this?

    Can you link us to the site in question so we could take a closer look?

    You can provide the site details on the Private Information text field. Thank you.

    A wise man once said:
    "Have you cleared your cache?"

    #1528523
    Anthony

    I found a thread that helped me out a bit but the code didn’t fix my solution

    https://generatepress.com/forums/topic/mobile-friendly-woocomerce-cart-layout/

    #1528670
    Leo
    Staff
    Customer Support

    Try this CSS:

    td.product-quantity .quantity.buttons-added {
        display: flex;
    }

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

    #1529039
    Anthony

    I tried it alone and with the other code and tweaking it but nothing is giving me the result I want.

    #1529071
    Leo
    Staff
    Customer Support

    I’m not seeing my CSS being added.

    When I add it using the browser inspector tool, this is what I see:
    https://www.screencast.com/t/BQQuzxJE0hC

    You are also using Elementor to add that section so have you checked with their support team first?

    #1529119
    Anthony

    I found this and it really gave me a result i am happy with. Is there a way to add the price of the product right under the name? There is also a small square being cut out of the table heading do you know why that is?

    
    @media (max-width:768px) {
    	.woocommerce table.shop_table_responsive thead,
    	.woocommerce-page table.shop_table_responsive thead,
    	.woocommerce table.shop_table_responsive tr,
    	.woocommerce-page table.shop_table_responsive tr {
    		display: table-row;
    	}
    	/*Hide price and subtotal headers in cart table*/
    	.shop_table th.product-price,
    	.shop_table th.product-subtotal {
    		display: none;
    	}
    	/*Tweaking the layout of the cart table's header in mobile*/
    	.shop_table th.product-name {
    		text-align: left;
    		width: 100%;
    	}
    
    	.shop_table th.product-quantity {
    		text-align: right;
    	}
    	/*Avoid woocommerce message links overlaping the whole thing */
    	.woocommerce-message {
    		display: flex;
    		flex-direction: column-reverse;
    	}
    	/*Avoid woocommerce info links overlaping the whole thing */
    	.woocommerce-info {
    		display: flex;
    		flex-direction: column;
    	}
    
    	/*Tweaking the layout of the Coupon Area on cart*/
    	.am-cart-coupon input#coupon_code,
    	.am-cart-coupon .button {
    		width: 100%;
    		margin-bottom: 10px;
    	}
    
    	/*Tweaking the layout of Coupon Area on checkout*/
    	.checkout_coupon.woocommerce-form-coupon .form-row.form-row-first,
    	.checkout_coupon.woocommerce-form-coupon .form-row.form-row-last,
    	.checkout_coupon.woocommerce-form-coupon button {
    		float: none;
    		width: 100%
    	}
    
    	.checkout_coupon.woocommerce-form-coupon p,
    	.woocommerce-form.woocommerce-form-login.login p {
    		margin-bottom: 8px;
    	}
    
    	/*Bringing back item's image on cart table*/
    	.woocommerce #content table.cart .product-thumbnail,
    	.woocommerce table.cart .product-thumbnail,
    	.woocommerce-page #content table.cart .product-thumbnail,
    	.woocommerce-page table.cart .product-thumbnail {
            display: block;
            text-align: left !important;
        }
    
    	/*Resizing that image*/
        .woocommerce-cart table.cart img {
            width: 75px;
        }
    	
    	/*Removing other ::before elements on cart item descriptions*/
    	td.product-thumbnail:before, 
        td.product-name:before, 
        td.product-price:before, 
        td.product-quantity:before {
            content: "" !important;
        }
    	/*Remove border bottom from cells in product items on cart*/
        tr.woocommerce-cart-form__cart-item.cart_item td{
        	border-bottom: none!important;
        }
    	/*The css grid magic begins here:*/
        tr.woocommerce-cart-form__cart-item.cart_item {
        	display: grid!important;
        	border-bottom: 1px solid rgba(0,0,0,0.2);
        	grid-template-columns: 80px auto 100px;
    	}
    	/*Absolute positioning of the remove-item "X" button*/
    	tr.woocommerce-cart-form__cart-item.cart_item td.product-remove {
        	position: absolute;
    	}
    	/*Resetting the text align of the product name on cart item*/
    	tr.woocommerce-cart-form__cart-item.cart_item td.product-name {
        	text-align: left!important;
    	}
    
    	/*This is the mobile product price we added on cart.php @ line 86*/
    	.am-mobile-product-price{
    		display: block;
    	}
    	
    	/*Vertically centering the increase/decrease quantity buttons on cart items*/
    	tr.woocommerce-cart-form__cart-item.cart_item td.product-quantity{
    		align-self: center;
    	}
    
    	/*Hiding product price and subtotal cells from each table item*/
    	tr.woocommerce-cart-form__cart-item.cart_item td.product-price,
    	tr.woocommerce-cart-form__cart-item.cart_item td.product-subtotal {
        	display: none!important;
    	}
    	/*remove the alternate row shading*/
    	.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
    	.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td{
    		background: transparent!important;
    	}
    
    }
    #1529147
    Leo
    Staff
    Customer Support

    I’m seeing a bunch of code interfering from Elementor and a plugin called Jet Woo Builder.

    Were you able to check with their support first?

    #1529177
    Anthony

    I tried with jet woobuilder but their support team said they couldn’t help, for the most part it just allows styling of the colors on the cart table. The elementor support team has yet to respond to multiple questions. Im adding the css through simple css and its giving me the same result as the guy who was using just generatepress

    #1529183
    Leo
    Staff
    Customer Support

    Can you disable Elementor and Jet Woo Builder so we can have a clean look at what’s going on?

    #1529275
    Anthony

    Okay i went ahead and disabled them and added the code from my previous reply

    #1529674
    David
    Staff
    Customer Support

    Hi there,

    to display the Price below the product title in the Cart page, try this CSS:

    @media(max-width: 768px) {
        .woocommerce-cart table.shop_table_responsive tr {
            position: relative;
        }
        .woocommerce-cart tr.woocommerce-cart-form__cart-item.cart_item td.product-price {
            display: block !important;
            position: absolute;
            left: 80px; 
            bottom: -15px;
        }
        .woocommerce-cart tr.woocommerce-cart-form__cart-item.cart_item td.product-name {
            padding-bottom: 30px !important;
        }
    }

    Its about the only viable solution when dealing with tables, but it I would suggest you test thoroughly to make sure it doesn’t cause any unintended behaviour.

    The small square cutting the heading – i am not seeing that? Do you have a screenshot of the problem.

    #1530662
    Anthony

    This looks great, I think the issue was being caused by the other plugins code. Do you know where i could find the selectors to add custom css to the coupon and update cart buttons?

    #1530914
    David
    Staff
    Customer Support

    Tom provides some CSS here for the Update Cart button:

    https://generatepress.com/forums/topic/refresh-cart-button-style/#post-1051671

    To style the Apply Coupon button:

    .woocommerce-page table.cart td.actions .coupon .input-text+.button {
        /* Coupon Button Style */
    }
    #1531260
    Anthony

    Thank you so much!

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