#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 );
}