If you’ve ever wanted to move your product title (or price) above your product images this CSS will help you do that.

It affects the shop module, default shop page, and related products.

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

/***********************************************/
/************* REORDER WOO ELEMENTS ************/
/***********************************************/
/*** SINGLE ITEM ***/
.woocommerce ul.products li.product a {
	display: flex; /* flexbox allows us to move elements around */
	flex-direction: column;
}
/*** PRODUCT IMAGE ***/
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	margin: 0 !important; /* this is needed to compensate for using flex above */
}
/*** PRODUCT TITLE ***/
h2.woocommerce-loop-product__title,
.related h2.woocommerce-loop-product__title {
	order: -1; /* -1 is like first/top */
}
/*** PRICE ***/
.woocommerce ul.products li.product .price {
	order: 0; /* 0 is like second/middle */
}
/*** STAR RATING ***/
.woocommerce ul.products li.product .star-rating {
	order: 1; /* 1 is like third/bottom */
}
/*** SALE BADGE ***/
.woocommerce ul.products li.product .onsale, 
.woocommerce-page ul.products li.product .onsale {
	top: 15% !important; /* moves the badge so it doesn't cover the top element */
}

Notes:

• You just need to play with the order number in the CSS to move them around. You can add more styling (font sizes, colors) using the same selectors (I have more help on that here and here if you prefer to code it), or of course you can just use the Divi customizer and module settings.
• This code is only using WooCommerce classes so it can be used on non-Divi themes, but most likely it will need adjustments.