Move product SKU under the Add to cart button

You can move the position of the product SKU to be displayed underneath the main ‘add to cart’ button. We’ll use a custom function to move the hook, plus some custom CSS to tweak the style.

Firstly, you’ll need add the custom function within either a child theme’s functions.php file or via the Code Snippets plugin.

This is the custom function:

add_action( 'wp', 'shoptimizer_reorder_product_meta', 99 );
function shoptimizer_reorder_product_meta() {
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_template_single_meta', 15 );
}

Secondly, you’ll need to add some custom CSS to: Appearance > Customize > Additional CSS

div.product .product_meta {
border: none;
background: transparent;
text-align: left;
width: auto;
margin: 0;
clear: both;
left: inherit;
right: inherit;
font-size: 13px;
}

div.product .product_meta .posted_in,
div.product .product_meta .sku_wrapper,
div.product .product_meta .tagged_as {
display: block;
margin: 0;
}