在移动设备上提升产品数据 woocommerce答案

【问题标题】：Move up product data woocommerce on mobile在移动设备上提升产品数据 woocommerce
【发布时间】：2017-06-19 17:24:04
【问题描述】：

有没有办法在 MOBILE 上将 3 个下拉菜单部分移到产品名称和图库图片上方？

我正在使用 woocommerce 插件，而对于下拉菜单，我正在使用 PRODUCT DATA - VARiable 产品部分。

检查链接： Website

【问题讨论】：

标签： wordpress woocommerce customization

【解决方案1】：

我需要更多关于您的实际代码（或演示版本）的信息，才能实现您真正想要的。您可以在 function.php 中使用一些 jQuery，以下代码未经测试，但逻辑存在：

/*Move the variation div to another created one
======================================================================= */
add_action( 'wp_footer', 'move_variations_product_tab' );
function move_variations_product_tab() {
  if (is_product()) :
        $product = wc_get_product( get_the_ID() );
        if($product->is_type( 'composite' )){
   ?>
    <script>
        jQuery(document).ready(function($) {
            $(window).load(function() {
                $( ".variations_form" ).wrap( "<div id='variations-content'></div>" );
                $( ".woocommerce-product-gallery" ).before( "<div class='container product-before-gallery'></div>" );
                document.getElementsByClassName("product-before-gallery")[0].appendChild(
                document.getElementById("variations-content")
                );
            });
        });
   </script>
<?php
        }
endif;
}

将“product-short”替换为您的描述容器。

环绕要移动的 div。
在所需位置之前创建一个新类
将包装好的 div (#variations-content) 移到新创建的 div 下（.product-before-gallery）。

希望对您有所帮助！如果您需要帮助，请告诉我进展情况并提供更多信息。

干杯

【讨论】：

你好！我刚看到这个回复。我会试着让你知道。感谢您的帮助。