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:
|
1 2 3 4 5 |
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 ); } |
Appearance > Customize > Additional CSS|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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; } |
