Cómo organizar hook de precio y descripción corta en WooCommerce

Cuando estamos desarrollando nuestro sitio web en ocasiones queremos organizar la información de forma que se adapte mejor a nuestro diseño, la página del producto en WooCommerce generalmente contiene los detalles de nuestro producto organizados en una forma específica.

Algunos temas son compatibles para reorganizar esta información, así como algunos plugins como Elementor Pro, sin embargo, en WooCommerce no hay una opción sencilla de modificarlo, pero si podemos reorganizar esta información  usando algunos códigos que podemos añadir en el archivo function.php de nuestro tema.

Siempre tenemos que tener en cuenta que cuando añadimos un código en nuestro sitio web es importante añadirlo en function.php de un tema hijo de nuestro tema o a través de algún plugin como Code Snippets

Como mover el precio debajo de la descripción corta

Si queremos mover el precio de nuestros productos debajo de la descripción corta, solo tenemos que utilizar el siguiente código.

add_action('woocommerce_single_product_summary', 'move_single_product_price', 1);
function move_single_product_price() {
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 29);
}

De esta manera nuestra información estará reorganizada y el precio se ubicará donde deseamos.

Mover la descripción corta debajo de añadir al carrito

Si lo que deseamos es la descripción corta debajo del precio, variaciones o añadir al carrito, en este caso solo necesitamos usar el siguiente código.

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 10 );

De esta forma podemos organizar estos dos elementos del producto simple como deseamos ubicarlos de acuerdo a nuestro diseño.