Woocommerce Product Page Title Above Image

[Dan1el]

Hello,

I am trying to get my product title on the single product page to display at the very top of the page above the image, so it has full-page width as well.

Can you please help, everything I have tried has failed!

Many thanks
Daniel

[jade]

Hello Daniel,

Please install and activate the child theme and login through FTP then edit the functions.php then add this code:

function product_change_title_position() {
	remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
	add_action( 'woocommerce_before_single_product', 'woocommerce_template_single_title', 5 );
}

add_action( 'init', 'product_change_title_position' );

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[Dan1el]

@jade

function product_change_title_position() { remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_title’, 5 ); add_action( ‘woocommerce_before_single_product’, ‘woocommerce_template_single_title’, 5 ); } add_action( ‘init’, ‘product_change_title_position’ );

Jade, your a star, thank you

Can I ask you one more question in relation to this please, how do i also move my add to basket above the short description so that is it is directly under the price?

[jade]

Hi Daniel,

That should be possible by using CSS. Please try this code in X > Theme Options > CSS:

.single-product.woocommerce div.product .summary {
    display: flex;
    flex-direction: column;
}

.single-product.woocommerce div.product .summary .price {
    order: 1;
}

.single-product.woocommerce div.product .summary .woocommerce-product-details__short-description {
    order: 3;
}

.single-product.woocommerce div.product .summary .cart {
    order: 2;
}

.single-product.woocommerce div.product .summary .product_meta {
    order: 4;
}

• CSS Flex - https://goo.gl/S2Ncde

Please note that this is something that goes beyond the scope of our support since this is something that does not come native to the theme. Kindly get in touch with a developer if you require further changes.

Hope this helps.

[Dan1el]

Awesome, thank you

[jade]

You’re most welcome, Daniel.