Move Product Title above Image Gallery on Mobile

[santosfel5]

I’m attempting to add the product title and price above the product gallery on mobile only. Is there an existing insertion code I can use to do this. I am using Woocommerce as the product platform.

Here is a sample product to see on the existing staging site: https://conscienceskin.wpengine.com/product/foaming-facial-cleanser/

This is the desired look I’m going for:

NOTE I’ve tried using this method, but it did not work.

Move Product Title on Single Product Page above Images on Mobile Only (woocommerce)

Currently on my X Theme store I built using Woocommerce,all of the single product pages have the images above the name of the product when viewing on a mobile device. How can I move the name of the product above the images for Mobile only? Thanks in advance.

[prakash_s]

Hello @santosfel5,

Thanks for writing to us

To display product title and price above the product gallery on mobile device, this feature is not offered in the theme and the builders.

Please try adding the following Javascript code into your Theme Options > Global Javascript area.

jQuery( function($) {

  mobile = $(window).width();
  if ( mobile <= 480 ){
    jQuery( ".product_title.entry-title" ).insertBefore( ".woocommerce-product-gallery" );
  }

} );

The purpose of providing the custom Javascript to show you how to add Javascript code to your site. Writing custom Javascript is outside the scope of our theme support. If you need more customization, you need to learn Javascript https://www.w3schools.com/js/default.asp https://www.w3schools.com/jquery/

Thanks

[santosfel5]

I was using this exact code before, but it didn’t work. It looks like the problem was with other javascript that was already present. Thanks for your help!

[prakash_s]

Hello @santosfel5

Gald that you are able to find out the issue and things are well for you.

Have a great day!
Thanks