Question

0

256

Views

Move title & ratings above image gallery on mobile devices in Woocommerce

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

over 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-04-13T21:12:35.820Z

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."

0

256

Move title & ratings above image gallery on mobile devices in Woocommerce

1 answers

0

Find remote jobs

Andres GPT