使用下拉菜单分期显示产品价格

Posted 2023-03-25

【中文标题】使用下拉菜单分期显示产品价格

【英文标题】：Show the product price in installments using a dropdown menu

【发布时间】：2020-08-23 16:32:29

【问题描述】：

我想添加一个下拉菜单，访问者可以在其中选择 12 个月，并根据该选择分期显示每月价格。

假设我有一个价格为 120 美元的产品。横幅将通知客户：

"您可以在安装中购买商品，选择编号"

客户将选择例如 3 个月，在下拉菜单下方的横幅中，结果将为 40 美元/月

目前我的代码只能使用 12 个月。

add_action( 'woocommerce_after_add_to_cart_button', 'show_installments', 20 );
function show_installments() 
    global $product; 
    $id = $product->get_id();
    $product = wc_get_product( $id );
    $a   = $product->get_price();
    $b   = 12;
    $min = 25;
    $c   = round( $a / $b, 2);

   if ($a > $min)  
       echo '<p class="p2_installments_12months">Purchase with'.$c.'€ per month for 12 months </p>';
      

【参考方案1】：

可以使用如下代码，注意下拉和编辑文本的交互还需要jQuery

function show_installments() 
    global $product; 

    // Get product id   
    $product_id = $product->get_id();

    // Get price
    $price = $product->get_price();

    // Set min price
    $min_price = 25;

    if ( $price > $min_price ) 

        echo '<div class="my_select_box">';

        woocommerce_form_field( 'month_options', array(
            'type'          => 'select',
            'label'         => __('You can purchase the item in installemets, select the the number'),
            'required'      => false,
            'return'       => false,
            'options'   => array(
                ''      => 'Select...',
                '1'  => '1 month',
                '2'  => '2 months',
                '3'  => '3 months',
                '4'  => '4 months',
                '5'  => '5 months',
                '6'  => '6 months',
                '7'  => '7 months',
                '8'  => '8 months',
                '9'  => '9 months',
                '10'  => '10 months',
                '11'  => '11 months',
                '12'  => '12 months',
            )
        ), '' );

        echo '</div>';

        echo '<div class="p2_installments_12months"></div>';

        ?>
        <script type="text/javascript">
        jQuery(document).ready(function ($) 
            var product_price = <?php echo $product->get_price(); ?>;

            $( '[name=month_options]' ).change(function() 
                var dropdown_val = this.value;

                if ( dropdown_val >= 1 ) 
                    var price_per_month = ( product_price / dropdown_val ).toFixed(2);

                    $( '.p2_installments_12months' ).html( '<p class="p2_installments_12months">Purchase with ' + price_per_month + ' € per month for 12 months </p>' );
                 else 
                    $( '.p2_installments_12months' ).html( '<p class="p2_installments_12months"></p>' );
                
            );
        );
        </script>
        <?php
       

add_action( 'woocommerce_after_add_to_cart_button', 'show_installments', 20 );

【讨论】：

非常感谢！我尝试使用“php widget”插件将其添加为小部件中的代码，但它似乎无法运行。在functions.php中完美运行！但它出现在添加到购物车按钮下

它确实会出现在购物车按钮之后，这通过使用woocommerce_after_add_to_cart_button，就像您现有代码中的情况一样。因此，如果您想在其他地方看到它，则必须调整 hook accordingly。也可以考虑阅读What should I do when someone answers my question?问候

感谢您的澄清，是否可以在侧边栏小部件中显示此代码？