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

[rlmills3rd]

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.

[mldarshana]

Hi There,

Thanks for writing in! 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" );
  }

} );

Hope that helps.

[rlmills3rd]

That successfully moved the product title but now the spacing is off a bot There is a large gap underneath the images/thumbnails where the product title was previously. How can I adjust this? Also, I’d like to add space underneath the title and above the image. Thanks!

[mldarshana]

Hi there,

Add the following CSS rules into your Theme Options > Global CSS area.

@media (max-width:480px){
  .summary.entry-summary {
    margin-top: 10px !important;
  }
  .product_title.entry-title {
    margin-bottom: 15px;
  }
}

Hope that helps.

[rlmills3rd]

Thanks! Now for adjusting the JS you provided for larger mobile screens, should I just duplicate it but adjust the "if ( mobile <= 480 ){ " portion with the size I want?

[nabeel]

Hi again,

Yes that’s right, just change the size you want in the code.

Let us know how this goes!