Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1401532

    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.



    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,



    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.



    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,

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Give Shop Page Glassy Header + Transparency’ is closed to new replies.