如果可能的話，我需要一點指導。因此，我將 Hello Elementor 主題與 WooCommerce 插件一起使用。
在我的商店頁面（列出我的產品的位置）上，我想重新排列顯示在回圈產品網格中的產品資料。例如，我想將產品標題移動到產品圖片上方等等。
我通常在自己解決這個問題上取得了巨大的成功，但是，我無法在 WooCommerce 插件或 Hello Elementor 主題中找到正確的檔案進行修改，以便我可以重新排列這些資料。
由于我使用的是“產品”小部件（除了我展示我的產品的地方，最初，我認為它可能是 content-widget-product.php 檔案，因為以下代碼似乎與前端的顯示非常相關.
<li>
<?php do_action( 'woocommerce_widget_product_item_start', $args ); ?>
<a href="<?php echo esc_url( $product->get_permalink() ); ?>">
<?php echo $product->get_image(); // PHPCS:Ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<span class="product-title"><?php echo wp_kses_post( $product->get_name() ); ?></span>
</a>
<?php if ( ! empty( $show_rating ) ) : ?>
<?php echo wc_get_rating_html( $product->get_average_rating() ); // PHPCS:Ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php endif; ?>
<?php echo $product->get_price_html(); // PHPCS:Ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php do_action( 'woocommerce_widget_product_item_end', $args ); ?>
</li>
雖然，在洗掉以下代碼行后（作為測驗影像和產品資料是否會消失，一切似乎都保持原樣。
所以我有點不確定如何重新排列資料。
任何提示或指導將不勝感激！
旁注：只是為了確認，這不是我要修改的單一產品頁面，而是在我的商店頁面上的產品串列網格內的回圈中顯示的產品資料。
uj5u.com熱心網友回復：
content-product.php 是負責回圈內產品專案布局的檔案，例如產品存檔頁面。
除了一些 HTML 之外，該檔案還包含多個WooCommerce Hooks呼叫，負責產品專案的組合。
每個鉤子都附加了幾個回呼，然后回傳相關的產品專案 HTML。
有兩種方法可以在回圈中更改該產品專案布局：
- 覆寫
content-product.php活動（自定義）主題中的模板檔案。然后你可以處理這些鉤子呼叫的順序，例如在縮略圖上方顯示標題：
/**
* Hook: woocommerce_before_shop_loop_item.
*
* @hooked woocommerce_template_loop_product_link_open - 10
*/
do_action( 'woocommerce_before_shop_loop_item' );
/**
* Hook: woocommerce_shop_loop_item_title.
*
* @hooked woocommerce_template_loop_product_title - 10
*/
do_action( 'woocommerce_shop_loop_item_title' );
- 不過，最佳實踐是直接使用鉤子，并通過將回呼附加到負責的鉤子，讓您想要的 HTML 顯示在該布局中的所需位置。這可以在您的
functions.php或插件中完成。后者更優雅，因為它不依賴于某個激活的主題。
uj5u.com熱心網友回復：
您可以在小部件的高級設定中嘗試 CSS：
selector a.woocommerce-LoopProduct-link{
display: flex !important;
flex-direction: column !important;
}
selector .woocommerce-loop-product__title{
order:1;
}
selector img{
order:2;
}
selector .price{
order:3;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/352312.html
標籤：WordPress的 求购 元素