By default, Variant will appear under Product Price on the shop page.
To make a variant under the Product Title on the Shop Page, you can use this code to Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div.grid-item').each(function(){
var price = $(this).find('.grid-prices');
var variants = $(this).find('div.product-variants');
$(price).insertBefore(variants)
});
});
</script>
<style>
div.product-variants {
order: 1;
}
.grid-prices {
order: 2;
margin-top: 10px !important;
}
.sqs-add-to-cart-button-wrapper {
order: 3;
}
</style>
Result:
