在WooCommerce中，我想將價格移動到添加到購物車小部件/模塊中，以便它與可用性文本保持一致。

在此屏幕截圖中，顯示了所需的價格位置:

在移動設備上觀看時，有許多未使用的空間，我想節(jié)約這些空間以優(yōu)化轉化率。

理想情況下，價格，可用性和添加到購物車按鈕將在第一次加載時可見，不需要滾動

我目前正在運行Astra theme和Elementor Pro builder

我在樣式中添加了一個Transform Translate CSS，但是我沒有把它發(fā)送到正確的位置。代碼很尷尬

我真的很感激任何幫助。

# # #可以自定義單個產(chǎn)品的價格位置。下面的代碼將在stock availability旁邊添加第二個產(chǎn)品價格，并增加一個選擇器類& quotis _ mobile & quot這將允許你顯示或隱藏取決于屏幕設備與(CSS媒體查詢)。

PHP代碼(此處僅針對簡單產(chǎn)品類型):

add_filter( 'woocommerce_stock_html', 'filter_simple_product_stock_html', 10, 3 );
function filter_simple_product_stock_html( $availability_html, $availability, $product ){
    // For simple products
    if ( $product && $product->is_type('simple') ) {
        // Apend product price html to product availability html (stock)
        return sprintf( '<p class="%s">%s</p>%s',
            esc_attr( apply_filters( 'woocommerce_product_price_class', 'price is_mobile' ) ),
            $product->get_price_html(), 
            $availability_html
        );
    }
}

代碼放在活動子主題(或活動主題)的functions.php文件中。測試和工程。

要使它像預期的那樣工作，您必須添加那些CSS規(guī)則，如:

@media screen and (max-device-width: 480px)  {
    .product-type-simple p.price {
        display: none;
    }

    .product-type-simple p.price.is_mobile, 
    .product-type-simple p.stock {
        display: inline-block;
    }
    .product-type-simple p.price.is_mobile {
        margin-right: 12px !important;
    }
}
@media screen and (min-device-width: 481px)  {
    .product-type-simple p.price.is_mobile  {
        display: none;
    }
}

因此，在移動設備上，默認產(chǎn)品價格將被隱藏，它將在庫存可用性旁邊顯示第二個克隆價格，如下所示:

否則，在其他設備上，它將顯示默認產(chǎn)品價格，并隱藏第二個克隆價格。