在 Woocommerce 中移动设备上的图片库上方移动标题和评级

Question

我正在尝试将我的标题和评分移动到 woocommerce 中的图片库上方，但仅限于移动设备。 桌面版应该保持不变。

我发现了一个 php 代码，我将其粘贴到我的主题 functions.php 中，它完成了工作，但它也将它们移到了桌面上。

有什么方法可以运行此 php 代码仅在移动设备上使用？

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

谢谢
维巴夫

Answer 1

Wordpress 提供了一个名为 wp_is_mobile^Docs 的函数，它允许您执行您要查找的操作：

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

注：

"它通过检测浏览器用户代理字符串（$_SERVER['HTTP_USER_AGENT']）来工作。"
“此功能将 return 适用于平板电脑，因为它也被视为移动设备。它不能替代 CSS 媒体查询或每个平台的样式."

在 Woocommerce 中移动设备上的图片库上方移动标题和评级

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

php

wordpress

woocommerce

custom-wordpress-pages

woocommerce-theming