重新订购Woocommerce单一产品和回声div周围移动和复制Woocommerce挂钩

Question

如何围绕下面代码中的操作包装div？

functions.php文件中的PHP：

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_title', 5 );

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 6 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_price', 6 );

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 30 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_excerpt', 10 );

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 6 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_add_to_cart', 6 );

问题背景信息：

我设法移动标题，价格，摘录，并添加到购物车之前的图像，所以现在我有如下设置的页面，这是我想要的。但是我想要一个div和类“移动摘要”围绕在第一组。

<div class="new-div-i-want-to-add">
    Title<br>
    Price<br>
    Add to Cart<br>
    Excerpt<br>
</div>

<div class="images">Images</div>
    <div class="summary">
    Price<br>
    Excerpt<br>
    Add to Cart<br>

</div>

我试过什么？

我不知道它叫什么所以什么都不知道。我学习创世纪和Woocommerce w/o以前在php或Wordpress (甚至博客作为一个用户)的经验。

Answer 1

我用不同的方式做了同样的事情，现在它像我想要的那样堆叠起来，用一个div包装内容。

这将单个产品woocommerce的输出堆栈如下：

1. 标题
2. 价格
3. 添加到购物车/属性
4. 节选
5. 元数据
6. 图片
7. 价格
8. 添加到购物车/属性
9. 选项卡
10. 升卖
11. 相关

因此，现在在大型视图中，我们将.product div.images向左浮动，.product div.summary向右浮动，清除后面的内容。隐藏大视口上的..footer部分，现在手机上的人不必滚动整个图像的高度来添加到购物车--如果他们愿意的话。

在functions.php中

if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {

// ==== wrap in div
  function output_opening_div() {
      echo '<div class="footer-cart-section">';
  }
  function ouput_closing_div() {
      echo '</div><!-- /.footer-cart-section -->';
  }

// ==== put the excerpt below the add to cart and before the meta
  remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt',20);
  add_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt',35);

// ==== move images (with the thumbs) below the content
    remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
    add_action( 'woocommerce_after_single_product_summary', 'woocommerce_show_product_images', 50);

// ==== move all the content after images
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

    add_action( 'woocommerce_after_single_product', 'woocommerce_output_product_data_tabs', 20);
    add_action( 'woocommerce_after_single_product', 'woocommerce_upsell_display', 20);
    add_action( 'woocommerce_after_single_product', 'woocommerce_output_related_products', 20 );

// ==== repeat cart after image with opening and closing div functions

    add_action('woocommerce_after_single_product','output_opening_div',9);

    add_action( 'woocommerce_after_single_product', 'woocommerce_template_single_price', 10 );
    add_action( 'woocommerce_after_single_product', 'woocommerce_template_single_add_to_cart', 10 );

    add_action('woocommerce_after_single_product','ouput_closing_div',10);


}// end if woocommerce

Answer 2

我会用jQuery做这件事，就像：

$('.element').wrapInner('<div class="mobile-summary"></div>');

在您希望代码工作之前，.element必须是div。

<div id="content>
 <div class="mobile-summary">
  <img src="image.jpg" />
 </div>
</div>

如果没有URL，很难给出100%的答案，但这会给你一个起点