0

我有这个代码到“functions.php”，用于排序和每页下拉列表的产品：

// to change sort by text
add_filter( 'woocommerce_catalog_orderby', 'wc_customize_product_sorting' );

function wc_customize_product_sorting( $sorting_options ) {
    $sorting_options = array(
        'menu_order' => __( 'Ταξινόμηση', 'woocommerce' ),
        'popularity' => __( 'ταξινόμηση ανά πιο δημοφιλή', 'woocommerce' ),
        'rating' => __( 'Sort by average rating', 'woocommerce' ),
        'date' => __( 'ταξινόμηση ανά πιο πρόσφατα', 'woocommerce' ),
        'price' => __( 'ταξινόμηση ανά τιμή αύξουσα', 'woocommerce' ),
        'price-desc' => __( 'ταξινόμηση ανά τιμή φθήνουσα', 'woocommerce' ),
    );

    return $sorting_options;
}

// add a products per-page select dropdown to archive - above shop productloop
add_action( 'woocommerce_before_shop_loop', 'pro_selectbox', 25 );

function pro_selectbox() {
    $per_page = filter_input( INPUT_GET, 'perpage', FILTER_SANITIZE_NUMBER_INT );
    echo '<div style="float:left;" class="woocommerce-perpage">';
    echo '<select onchange="if (this.value) window.location.href=this.value">';
    $orderby_options = array(
        '9' => '8',
        '12' => '16',
        '24' => '24',
        '300' => 'All'
    );
    foreach ( $orderby_options as $value => $label ) {
        echo "<option " . selected( $per_page, $value ) . " value='?perpage=$value'>$label</option>";
    }
    echo '</select>';
    echo '</div>';
}
add_action( 'pre_get_posts', 'pro_pre_get_products_query' );

function pro_pre_get_products_query( $query ) {
    $per_page = filter_input( INPUT_GET, 'perpage', FILTER_SANITIZE_NUMBER_INT );
    if ( $query->is_main_query() && !is_admin() && is_post_type_archive( 'product' ) ) {
        $query->set( 'posts_per_page', $per_page );
    }
}

但我的问题是“每页产品”下拉列表位于“排序依据”下拉列表的下方。我想要它在它旁边。下面的示例图像。 图片示例截图

4

1 回答 1

2

您可能应该更改div为每页结果添加的内联样式。

function pro_selectbox() {
    $per_page = filter_input( INPUT_GET, 'perpage', FILTER_SANITIZE_NUMBER_INT );
    echo '<div class="woocommerce-perpage">';
    echo '<select onchange="if (this.value) window.location.href=this.value">';
    $orderby_options = array(
        '9' => '8',
        '12' => '16',
        '24' => '24',
        '300' => 'All'
    );
    foreach ( $orderby_options as $value => $label ) {
        echo "<option " . selected( $per_page, $value ) . " value='?perpage=$value'>$label</option>";
    }
    echo '</select>';
    echo '</div>';
}

相反...添加到您的主题或定制器中。一些 CSS 像：

.woocommerce-perpage{
    float: right;
    margin-left: 5rem;
    margin-top: 8px;
}

这会将 perpage 放在“订购”表单（下拉菜单）之后。您可以根据需要调整边距以对齐。

我的结果看起来像这样：

截屏

于 2020-09-18T21:28:44.813 回答