Reply To: Visual changes on Composite Product pages

Hello wildguitars,

1. Changing width of columns in the desktop

Please add the below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for Desktop:

.component:not(.selection_thumbnail_hidden) .composited_product_details_wrapper > div.details,
div.component .composited_product_images,
body.woocommerce-page div.product div.composited_product_images{
	width: 50%;
}

2. On the mobile

Please add the below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for Mobile section:

.component:not(.selection_thumbnail_hidden) .composited_product_details_wrapper > div.details,
div.component .composited_product_images,
body.woocommerce-page div.product div.composited_product_images{
	width: 100%;
}

.summary-add-to-cart-form-composite .component:not(.selection_thumbnail_hidden) .composited_product_details_wrapper> div.details{
	padding: 0;
}

.composited_product_details_wrapper{
	display: flex;
	flex-wrap: wrap;
}

.composited_product_images.images{
	order: 2;
}

Regards,