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

Woocommerce – Different Width for Image if Mobile – PHP

Below you will see that I am trying to add a 40% width to my image if not a mobile device. However, the image is still showing with 100% width even on Desktop Devices. You can view this page here: https://www.tattiniboots.com/product/terranova/

This is the code that I am using

require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;

// Any mobile device (phones or tablets).
if (!$detect->isMobile()) {
    add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);

    function bbloomer_add_below_prod_gallery()
    {
        global $product;
        $id = $product->id;
        if ($id == 5735) {
            echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
            echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
            echo '</div>';
        }
    }
} else {
    add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);

    function bbloomer_add_below_prod_gallery()
    {
        global $product;
        $id = $product->id;
        if ($id == 5735) {
            echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
            echo '<center><h2>NOT MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" width="40%">';
            echo '</div>';
        }
    }
}
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    Yes this solution was resolved by simple declaring the sizing options within CSS. Remember that it is also possible to add a class within php to the image you have added to further facilitate this CSS declaration


  2. 0

    Echoing html inside a php file is a bad idea, both for readability, and debugging. Having inline css is also not a good thing. I would honestly recommend using media queries instead of using mobile detect, because it’s not 100% accurate (it doesn’t recognize some phones, and you have to keep it up to date).
    With all that said, are you trying to “increase” 40% width to a 100% width image? It’s not possible to have more than 100% width. You can try to increase the width of the surrounding div with the “woocommerce-product-gallery” class.
    I also notice an inconsistency here:

    if ( !$detect->isMobile() ) {
  ... 
   echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
}

    It looks like it’s checking if it’s not mobile, and adding the mobile img, and the reverse for the else.

    Login or Signup to reply.
  3. 0

    I think you’ve choosen a bad way to solve this problem.the best way is using css (media query).
    you can’t use “%” in html tag width.

    Login or Signup to reply.
  4. 0

    width as an attribute inside the img tag always has a value in pixels (it’s written without the pixels, just as the number), so the way you wrote it won’t work.

    If you want a percentage value for width as an inline attribute for the img tag, you should use the style attribute. So your img tag should look like this:

    <img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" style="width:40%;">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search