Hi there,
What CSS changes have to be made to get the WooCommerce main shop page to display a fullscreen slider the same way as on regular pages?
It almost works but the glassy heady + transparency does not show. Also the fullscreen slider is not completely full-width.
See samples in private content. Appreciated.
Best,
Elmar
Hey El,
To make the shop header transparent and glassy try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 50, 1);
function avf_header_setting_filter_mod($header_settings) {
if ( is_shop() ) {
$header_settings['header_transparency'] .= " header_transparency";
$header_settings['header_class'] .= " av_header_top av_logo_left av_main_nav_header av_menu_right av_custom av_header_shrinking_disabled av_header_stretch_disabled av_mobile_menu_phone av_header_transparency av_header_glassy av_header_searchicon av_header_unstick_top_disabled av_minimal_header av_bottom_nav_disabled av_alternate_logo_active av_header_border_disabled";
}
return $header_settings;
}
to make your slider full width try this css:
.responsive #top.woocommerce-shop .container_wrap_first.template-shop > .container {
max-width: 100%;
padding: 0 !important;
}
Best regards,
Mike
Mike,
super helpful. For everyone: I test my Shop Setup in an unpolished page with the advanced layout editor and then copy+paste the page code to the actual shop page. Works brilliantly.
Best
Elmar
Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
Best regards,
Mike