克隆“前进到购物车”按钮，并将其放在购物车页面的结账上方，但仅显示大小为320px

时间：2017-06-22 作者：Florante Ferrer

我克隆了Woocommerce购物车页面右上角的“继续购物车”按钮和浮动按钮。但是，我希望此按钮仅在浏览器被压缩（模拟移动显示）时出现，但在浏览器拉伸到PC显示器大小时消失。怎么做？

这是我提出的代码，但它不起作用。

if(width <= 320){    
    add_action( \'woocommerce_before_cart\', \'move_proceed_button\' );
function move_proceed_button( $checkout ) {
    echo \'<a href="\' . esc_url( WC()->cart->get_checkout_url() ) . \'" 
class="checkout-button button alt wc-forward" >\' . __( \'Proceed to 
Checkout\', \'woocommerce\' ) . \'</a>\';
    }
} else
if(width > 325){
    remove_action( \'woocommerce_before_cart\', \'move_proceed_button\' );
});
?>

2 个回复
最合适的回答,由SO网友:Florante Ferrer 整理而成

我终于找到了解决上述问题的办法。在您的wordpress功能中。php在子主题文件夹中，添加以下代码：

add_action( \'woocommerce_before_cart\', \'move_proceed_button\' );
function move_proceed_button( $checkout ) {
    echo \'<div class="mobile-checkout-btn text-right"><a href="\' . esc_url( WC()->cart->get_checkout_url() ) . \'" class="checkout-button button alt wc-forward" >\' . __( \'Proceed to Checkout\', \'woocommerce\' ) . \'</a></div>\';
}
上述代码将克隆“继续签出”按钮并将其置于签出上方。现在，使其仅在屏幕大小为移动设备大小时显示。在您的样式中添加此css代码。子主题文件夹中的css。

.mobile-checkout-btn {
    display: none;
    margin-bottom: 10px;
}

@media(max-width: 991px) {
    .mobile-checkout-btn {
        display: block !important;
    }
}
希望这对将来的人有所帮助。

SO网友:itzmekhokan

只需在woocommerce\\u before\\u cart操作挂钩中调用woocommerce继续签出按钮模板，如下所示-

add_action(\'woocommerce_before_cart\', \'add_wc_button_proceed_to_checkout\');
function add_wc_button_proceed_to_checkout(){
    echo \'<div class="wc-proceed-to-checkout">\';
    wc_get_template( \'cart/proceed-to-checkout-button.php\' );
    echo \'</div>\';
}

结束
标签： php   css   woocommerce-offtopic   hooks   小码农  

相关推荐

将类别帖子按字母顺序排列在Archive.php上

我有一堆类别，其中包含子类别和子类别，我想在我的archive.php. 子类别的标题列在其父类别的存档页上。只需列出类别和/或帖子的链接标题，仅此而已。一切都很完美，但在最后一步，我想按字母顺序排列实际帖子。所以我在我的archive.php<?php if (is_category()) { $this_category = get_category($cat); } $this_category = wp_list_categories(\'o