Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – Trying to move wordpress title on mobile only

Currently trying to finish a WordPress build but I’ve ran into a slight problem.

I’m using the following Jquery code:

jQuery( document ).ready( function ($) {
    var mobile = $(window).width();
    if ( mobile <= 680 ){
        $( ".product_title.entry-title" ).insertBefore( ".woocommerce-product-gallery" );
    }
} );

So when the screen is less than 680px the class “product_title.entry-title” will be inserted before the “woocommerce-product-gallery” class. This basically moves the title ABOVE the product gallery on my product page.

BUT it’s bugging me out because this code is only triggered every time the page is refreshed. So if I load the page and resize the browser nothing will happen until I refresh it. Is there any alternative method I can use to avoid this?

Tags:

2

Answers


  1. 0

    Building off of @Partha Roy’s comment you could use a media query like so:

    .product_title.entry-title.mobile-only {
  display: block;
}
.product_title.entry-title.desktop-only {
  display: none;
}

@media (min-width: 680px) {
  .product_title.entry-title.mobile-only {
    display: none;
  }
  .product_title.entry-title.desktop-only {
    display: block;
  }
}

    Or in a non mobile responsive first strategy:

    .product_title.entry-title.mobile-only {
  display: none;
}
.product_title.entry-title.desktop-only {
  display: block;
}

@media (max-width: 680px) {
  .product_title.entry-title.mobile-only {
    display: block;
  }
  .product_title.entry-title.desktop-only {
    display: none;
  }
}

    And of course you’ll need two sets of HTML in positions where you want them.

    <div class="product_title entry-title desktop-only">...</div>
<div class="product_title entry-title mobile-only">...</div>

    You can refer to this similar question: How to show text only on mobile with CSS?

    Login or Signup to reply.
  2. 0

    You can use WordPress built-in “mobile detect” function wp_is_mobile to create a simple shortcode that can hide certain parts of your content from mobile visitors and-/or desktop visitors. The wp_is_mobile function returns true when your site is viewed from a mobile browser. Using this function you can create adaptive-/responsive WordPress themes based on visitor device.

    For example,

<?php  if( wp_is_mobile()){  ?>
 // mobile stuff goes here
   <div class="product_title entry-title mobile-only"> << Mobile Text >> </div>
<?php } else { ?>
   // desktop stuff goes here
   <div class="product_title entry-title desktop-only"> << Desktop Text >> </div>
<?php  } ?>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search