Мобильная компоновка темы витрины магазина на всех устройствах/точках останова

#html #css #woocommerce #responsive-design #storefront

Вопрос:

Я хочу использовать мобильный список продуктов с одной колонкой с меню гамбургеров и т. Д.

Я хочу использовать мобильный макет темы витрины магазина по умолчанию для всех устройств/точек останова.

В настоящее время я пытаюсь использовать приведенный ниже код:

Я не хочу использовать дизайн рабочего стола, просто хочу использовать мобильный макет по умолчанию.

Я также заметил, что при использовании приведенного ниже кода переключатель подменю в меню ….не работает.

Правильно ли я все делаю?

Или есть какой-нибудь лучший способ сделать это?

Пожалуйста, ведите.

 add_filter( 'loop_shop_columns', 'loop_columns', 999 );
 
function loop_columns() {
   return 1; 
}

function storefront_styles_scripts(){
    
    if(! wp_is_mobile()){
    
        $desktop_css = '.woocommerce-active .site-header .main-navigation {
            width: unset !important;
            float: unset !important;
            margin-right: unset !important;
        }
        .col-full {
            width:100% !important;
            max-width: unset !important;
            margin-left: unset !important;
            margin-right: unset !important;
            padding: unset !important;
        }
        .site-header{
            border-bottom: none !important;
            padding-top: 0 !important;
        }
        .site-branding{
            position:absolute;
        }
        .menu-toggle, .handheld-navigation, .main-navigation.toggled .handheld-navigation, .main-navigation.toggled div.menu {
            display: block !important;
        }
        .site-description,
        .primary-navigation {
            display: none !important;
        }
        .handheld-navigation {
            display: block !important;
        }
        .main-navigation li{
            display:unset !important;
        }
        .main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
            padding: 1em 1em 0 1em !important;
        }'; 
    
    }   
    
    wp_add_inline_style( 'storefront-style', ''.$desktop_css.'');

}

add_action( 'wp_enqueue_scripts', 'storefront_styles_scripts', 11 );
add_action( 'wp_loaded', 'remove_unwanted_storefront_woocommerce');

function remove_unwanted_storefront_woocommerce(){
    
    remove_action( 'storefront_header', 'storefront_product_search', 40 );
    remove_action( 'storefront_header', 'storefront_header_cart', 60 ); 
}