I am trying to move my title and ratings above the image gallery in woocommerce but only on mobile. Desktop version should remain the same.

I found a php code that i pasted in my theme's functions.php and it does the job but it moves them above on desktop as well.

Any way to run this php code only on mobile?

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' );

function product_change_rating_position() {
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
    add_action( 'woocommerce_before_single_product', 'woocommerce_template_single_rating', 5 );
}

add_action( 'init', 'product_change_rating_position' );

Thanks
Vaibhav

CodePudding user response：

Wordpress provides a function called wp_is_mobile^Docs, which allows you to do what you're looking for:

add_action('init', 'product_change_title_position');

function product_change_title_position()
{
    if (wp_is_mobile()) 
    {
        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_rating_position');

function product_change_rating_position()
{
    if (wp_is_mobile()) 
    {
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
        add_action('woocommerce_before_single_product', 'woocommerce_template_single_rating', 5);
    }
}

Note:

• "It works through the detection of the browser user agent string ($_SERVER[‘HTTP_USER_AGENT’])."
• "This function will return true for a tablet, as it too is considered a mobile device. It is not a substitute for CSS media queries or styling per platform."