Artomultiplo's Generatepress Woocommerce Starter Child

style.css

/*
Theme Name: Artomultiplo GP Child
Template: generatepress
Theme URI: https://generatepress.com
Author: Roberto Enrique Briceno Garcia
Author URI: https://artomultiplo.eu
Description: A woocommerce optimized GP child
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amgpc
Tags: two-columns, three-columns, one-column, right-sidebar, left-sidebar, fluid-layout, fixed-layout, responsive-layout, flexible-header, full-width-template, buddypress, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options, light, white, dark, black, blue, brown, gray, green, orange, pink, purple, red, silver, tan, yellow
*/

* {
	box-sizing: border-box;
}
/*Reduce the spacing on woocommerce tables*/
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 5px 10px !important;
}

/*Adding a highlight border in the order review area at checkout*/
#order_review {
	box-sizing: border-box;
	border: 3px solid blue;
	padding: 5px;
}

/*Tiding the order review title a little*/
#order_review_heading {
	box-sizing: border-box;
	color: #fff;
	background: blue;
	display: block;
	padding: 10px;
	margin-bottom: 0;
}

/*Resizing the quantity buttons sitewide*/
.do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden):after,
.do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden):before,.woocommerce form .quantity.buttons-added .minus,.woocommerce form .quantity.buttons-added .plus,.woocommerce form .quantity.buttons-added .qty {
	width: 30px !important;
	min-height: 30px !important;
}

/*Removing some Cart totals ::before elements*/
.woocommerce .cart-collaterals table.shop_table_responsive tr td::before,
.woocommerce-page .cart-collaterals table.shop_table_responsive tr td::before {
	content: none;
}

/*Remove the alternating background color and adding a separator for cart items*/
.woocommerce .cart-collaterals table.shop_table_responsive tbody th,
.woocommerce-page .cart-collaterals table.shop_table_responsive tbody th,
.woocommerce .cart-collaterals table.shop_table_responsive tbody td,
.woocommerce-page .cart-collaterals table.shop_table_responsive tbody tr {
	border: 1px solid rgba(0, 0, 0, .1) !important;
	background: transparent;
}

/*Hacking the width of header rows in cart collaterals table*/
.woocommerce .cart-collaterals table.shop_table_responsive tbody th,
.woocommerce-page .cart-collaterals table.shop_table_responsive tbody th {
	display: table-cell;
}

/*Checkout*/

/*Adding a border around the login and coupon dropdowns in checkout */

form.woocommerce-form.woocommerce-form-login.login,
form.checkout_coupon.woocommerce-form-coupon {
	box-sizing: border-box !important;
	padding: 15px !important;
	border-left: 4px solid #1e73be !important;
	border-right: 4px solid #1e73be !important;
	border-bottom: 4px solid #1e73be !important;
	border-top: none !important;
	border-radius: 0 !important;
	margin-top: -15px !important;
}

/*Making the store notices boxes smaller*/
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	padding: 8px 10px !important;
	border: 0;
	border-left: 5px solid rgba(0, 0, 0, .3) !important;
	margin-bottom: 10px;
}

/*Hacking the width of header rows in order review table on checkout*/
.shop_table.woocommerce-checkout-review-order-table th.product-name {
	width: 50%;
}

/*Mobile styles*/
@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;
	}


}

/*Not Mobile*/
@media (min-width:769px) {

	/*Hide product price added on cart.php for larger than mobile*/
	.am-mobile-product-price{
		display: none;
	}
	
}

/*Small desktop*/
@media (min-width:769px) and (max-width:1024px) {
	/*Slightly different layout for cart in smaller desktops*/
	.am-woo-cart-container {
		display: block;
		max-width: 900px;
		margin: 0 auto;
	}

}

/*Standard Desktop*/
@media(min-width:1025px) {
	/*Rearranging the cart page*/
	.am-woo-cart-container {
		display: grid;
		grid-template-columns: 750px auto;
		grid-gap: 20px
	}

}

.am-cart-form-container {
}

/*Unfloating and expanding cart collaterals*/
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
	float: none;
	width: 100%
}

Hi

Many thanks for this one. I need this so bad
However, when applying the code, the Remove product X icon appears in middle, in front of the product (not in order)
Any idea why this happens ?

Hi @azhah, honestly I can't remember exactly at what point in the GP woocommerce customizations I upladed this stylesheet.
Right now I'm working on a new Woocommerce Child that will be available in the next months.
I'll try to upload it here: https://github.com/protorob/artomultiplo-generatepress-woo-base (I'm not that good using git)
That said, you can take a look at the rendered styles on pasticceriasicilia.com where I'm using the current version of the generatepress woocommerce modifications.

Hi there! I've been using this code to edit the cart page on my website. However, we have a new feature where customers can "view details" of the addons they've added to their order. Would you be able to offer some assistance as to making this look a bit more uniform? I've attempted multiple things but I'm afraid my knowledge isn't quite there yet... Please see image attached. Many thanks - Ceri