This is a quick CSS snippet that will make the top part of your WooCommerce single product pages into one column instead of two, making the images and pricing info fullwidth.

If you want more focus on your images than the two-column layout allows this may be helpful.

The CSS can go in your child stylesheet OR appearance > customize > additional CSS OR Divi theme options > custom CSS box.

/**********************************************************/
/******** REMOVE COLUMNS FROM SINGLE PRODUCT PAGE *********/
/**********************************************************/
#product .woocommerce .clearfix {
	display: flex;
	flex-direction: column;
}
.woocommerce .product .summary {
	background: #f5f5f5; /* background color of the details/pricing area */
	padding: 30px;
}
.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce div.product div.summary {
	width: 100%;
}
.woocommerce div.product div.images .flex-control-thumbs li {
	width: 10%;
}
.woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
	clear: right;
}
.woocommerce div.product div.images .flex-control-thumbs li:nth-of-type(4n) {
	margin-right: 6.6666%;
}

Notes:

• Personally I think this works best with landscape-oriented photos rather than portrait (wide over tall) because the longer photos take up quite a bit of space, but totally up to you.