Custom Shop Page - Slide Show and White Space - Support | Kriesi.at

Hello,

I created a custom shop page, and ran into a few issues.

1) The Av slideshow does not stretch to cover both ends on the custom shop page. Would you suggest any CSS coding to solve this issue?

2) The widgets appear on the custom shop page, but not on each of the category page? How do I insert widgets into each of the category page?

3) There is a big white space between the widget section and the product grid. Would you suggest CSS coding I could use to minimize the white space?

Please click on links in the private content to see the image description and the live page. Your suggestions to resolve the issues are much appreciated.

Thanks,
Nik

January 16, 2021 at 8:02 pm #1272949

Hey Nik,
Sorry for the very late reply and thanks for the links.
1 + 3) To stretch the slideshow full-width on the shop page that you linked to, and remove the grid container top padding, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top.archive #main > .template-shop > div {
	width: 100% !important;
	max-width: 2500px !important;
	padding: 0 !important;
}
#top.archive #main > .template-shop > div > main {
	max-width: 1310px !important;
	padding-top: 0 !important;
	padding-left: 7%;
}

After applying the css, please clear your browser cache and check.

2) The category (archive) pages are created automatically and are not editable with the Advanced Layout Builder, so to add widgets to the category pages please use the widget areas at WordPress > Appearance > Widgets

Best regards,
Mike

January 17, 2021 at 12:18 pm #1273048

Hi Mike,

Thank very much for the CSS code. It worked! On the widget, I did not want them to be on the sidebar, but rather above the product gallery as described in my link. See private content.

There is a big white space between the widget section and the product grid. Any CSS coding I could use to minimize the white space?

Cheers,
Nik

January 17, 2021 at 8:50 pm #1273158

Hi,
Glad to hear this helped, for your white space try this css:

#top.archive #after_full_slider_1 > div > div {
	padding-bottom: 0 !important;
}

For adding your widget section above your product grid on archive pages, we could try to inject the element shortcode in the functions.php like this example:

  add_action('ava_after_main_container', 'ava_after_main_title_mod');
function ava_after_main_title_mod() {
	if(is_woocommerce()) {
		echo do_shortcode("[av_sidebar widget_area='Shop Overview Page']");
	}
}

If you include your admin login in the Private Content area we could try to customize this for you.

Best regards,
Mike

January 20, 2021 at 7:45 am #1273939

Hey Mike,

Thank you very much for the coding.

1) The CSS works for the white space reduction on my custom Shop Page (using avia builder).

2) SHOP PAGE (using avia builder)
I added the element shortcode to my child functions.php. The widget appears below the menu, but above my avia slideshow, which is not what I want. The widget area has to be below the slideshow on the Shop Page.

3) CATEGORY AND PRODUCT PAGE
In the category and product page, the widget also appears below the menu. Like the Custom Shop Page, the widget stretches across the entire page width.

Is there a CSS code I could use to fix the issue? There are 2 widgets in the widget area, but only the product categories are viewable. The Product Search widget cannot be seen.

The links and admin login are in private content.

4) What I want to achieve using the Enfold Shop Page Template is

a) Shop Page
– An avia slideshow to replace the header banner
– 3 widgets in the widget area above the avia slideshow and below the product grid, which I understand is not possible, unless I edit the template.

b) Category Page is the same as the Shop Page, avia slideshow + 3 widgets in the widget area

I was not able to use the Enfold Page Template so I opted to create a Custom Shop Page using the avia builder.

Any help in resolving the issues is much appreciated.

Cheers,
Nik

January 20, 2021 at 9:21 pm #1274219

Hi,
Thank you for the feedback and the login, for this example please see the page in the Private Content area.
I copied your shop page slider & widgets shortcode and added to this function in your functions.php file:

add_action('ava_after_main_container', 'ava_after_main_title_mod');
  function ava_after_main_title_mod() {
	  $cs_slider = do_shortcode("[av_slideshow_full size='no scaling' min_height='0px' stretch='' control_layout='av-control-default' src='' attachment='' attachment_size='' position='top left' repeat='no-repeat' attach='scroll' conditional_play='' animation='slide' transition_speed='' autoplay='true' interval='5' lazy_loading='disabled' id='' custom_class='' av_uid='av-jnzjz'][av_slide_full id='1017' slide_type='' video='https://' mobile_image='' fallback_link='https://' title='' video_format='' video_ratio='16:9' video_autoplay='' video_controls='' video_mute='' video_loop='' caption_pos='caption_bottom' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' custom_title='' custom_content='' heading_tag='' heading_class='' link_apply='' link='' link_target='' button_label='Click me' button_color='light' link1='' link_target1='' button_label2='Click me' button_color2='light' link2='' link_target2='' overlay_enable='' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av_uid='av-l2nmn'][/av_slide_full][av_slide_full id='1013' slide_type='' video='https://' mobile_image='' fallback_link='https://' title='' video_format='' video_ratio='16:9' video_autoplay='' video_controls='' video_mute='' video_loop='' caption_pos='caption_bottom' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' custom_title='' custom_content='' heading_tag='' heading_class='' link_apply='' link='' link_target='' button_label='Click me' button_color='light' link1='' link_target1='' button_label2='Click me' button_color2='light' link2='' link_target2='' overlay_enable='' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av_uid='av-1f81b'][/av_slide_full][av_slide_full id='1005' slide_type='' video='https://' mobile_image='' fallback_link='https://' title='' video_format='' video_ratio='16:9' video_autoplay='' video_controls='' video_mute='' video_loop='' caption_pos='caption_bottom' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' custom_title='' custom_content='' heading_tag='' heading_class='' link_apply='' link='' link_target='' button_label='Click me' button_color='light' link1='' link_target1='' button_label2='Click me' button_color2='light' link2='' link_target2='' overlay_enable='' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av_uid='av-blh7z'][/av_slide_full][/av_slideshow_full]");
	$cs_widgets = '<div class="customsection">' . do_shortcode("[av_one_third first min_height='av-equal-height-column' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='0px,10px,0px,0px' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='onethird' aria_label='' av_uid='av-wlvxj'][av_sidebar widget_area='Product Category' av_uid='av-avo7j'][/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='0px,0px,0px,0px' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='onethird' aria_label='' av_uid='av-s9m5r'][av_sidebar widget_area='Price' av_uid='av-eio9b'][/av_one_third][av_one_third min_height='' vertical_alignment='' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='onethird' aria_label='' av_uid='av-s9m5r'][av_sidebar widget_area='Product Search' av_uid='av-ozlb'][/av_one_third]"). '</div>';
	  if(is_product_category( )) {
		  echo $cs_slider . $cs_widgets;
	  }
  }

In the shortcode I included custom classes and then added this css:

#top .customsection {
	width: 80%;
	margin: auto;
}
#top .customsection > .flex_column_table:nth-child(1) {
	margin-top: 50px;
}
#top .customsection > .flex_column_table {
	width: 33% !important;
}
html {
	background-color: #fff;
}

So this was meant to only show the slider and widgets on product category pages, which works, except it is also showing on your “shop” page and causing a conflict. Try removing changing your shop page back to the default to see if either this shows correctly or doesn’t show at all on the “shop” page, but does on the category pages. If it does we can adjust it further.

Best regards,
Mike

January 21, 2021 at 12:29 am #1274245

Hey Mike,

Thank you so much for your help and suggestions. I switched to the default Shop Page. Regretfully, the widgets don’t appear above the product grid on the Shop Page neither in the product category pages.

To achieve the layout I want on the Shop page, I understand that I have to edit the Enfold Shop template files. See post #1272603.

Please close this thread. I will have to find another alternative option to achieve the layout.

Cheers,

Nik

January 21, 2021 at 2:52 pm #1274377