Custom button on top of shop main page (adjust the standard woocommerce page) - Support

Tagged: pagination, woocommerce

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
September 6, 2021 at 7:12 pm #1319891
zoltom
Participant
Hello,
First off, thanks for this great theme. I’ve been working with it for many years now and love everything about it.

I’ve been working on a website with a webshop and there’s one thing I just cannot figure out.
I know this is also a Woocommerce and plugin related question but I’m hoping you can help me out or, if not, direct me in the right direction.

I’m using the BeRocket filter plugin in combination with the WP Fly menu plugin.
Together they work great and give me a beautiful shop page with a nice fly out menu with filters.

But, if I use the advanced layout builder of enfold (which I would prefer) the fly out menu works but the filters do not do anything: CLICK

So I switched to using the standard Woocommerce page for which I added a button on top of the page (see the code on page: Example ) to trigger the WP fly in menu.
Now the filters work great until I go to the second page (using the pagination on the bottom). Then the button to activate the WP fly menu is no longer visible: CLICK

Like I said, I would love to use the advanced lay-out builder and also asked the BeRocket filter support to help me. This was their reply:CLICK
I added the code to the advanced lay out WordPress page but with no avail: CLICK

So I would either need the filter to work on the advanced layout builder shop page (preferably).
Or I need the button that triggers the menu on al shop pages not only the first page….

Hope you guys have some time to help me. If I can tackle this problem I can finish the project.
Let me know!

Regards,
Zoltom
- This topic was modified 3 years, 2 months ago by zoltom.
September 10, 2021 at 12:30 pm #1320393

zoltom
Participant

Anyone who can help me with this?
Would be widely appreciated!

September 10, 2021 at 1:48 pm #1320398
Mike
Moderator
Hey zoltom,
Thank you for your patience and for your explanation. Try adding the filter button by adding this code to the end of your functions.php file in Appearance ▸ Editor:
```
add_action('woocommerce_before_shop_loop', 'filter_button_before_shop_loop');
function filter_button_before_shop_loop() {
	if(is_shop()) {
		echo do_shortcode("[av_button label='FILTERS' icon_select='no' icon='ue800' font='entypo-fontello' link='manually,http://' link_target='' size='small' position='left' label_display='' title_attr='' color_options='color_options_advanced' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='custom' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#0a0a0a' btn_color_bg_hover='custom' btn_custom_bg_hover='#444444' btn_color_font='white' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' id='shopknop' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg='']");
	}
}
```
You can replace the button shortcode with yours from the screenshot, or try this as-is to test.

Best regards,
Mike
September 10, 2021 at 4:36 pm #1320430

zoltom
Participant

Hey Mike,

No problem, thanks for your response.
I’m going to try it next week and let you know if it worked out.

Thanks again!

September 11, 2021 at 5:07 pm #1320530

Mike
Moderator

Hi,
Ok, we will leave this open to hear back from you after your test.

Best regards,
Mike

September 13, 2021 at 10:56 am #1320696
zoltom
Participant
Hey Mike,
The button is showing in the other pages now, thanks! See page: CLICK
I do need some extra spacing below the button and the text is now black, but that should be fixable. Maybe that’s some extra code that needs to be added in the functions.php part? If it’s css I will probably manage myself.

The next problem:
The filters resets when going to the next page. So when using the filter on page one, the filters work, but when using pagination going to the next page the filters are reset and not working. Not sure if this is something Enfold related but maybe you have a clue?

I tried tweaking the plugin settings to no avail. The only options/settings I can find which could maybe relate to this are the following (yellow text is placed in by me, so you can see the complete code), but I’m not sure this has anything to do with the problem.

So maybe you can help me with tweaking the button and possibly make the filters work on all pages?
If not, I will ask the support of the filter plugin to see if they can help.

Thanks Mike!
- This reply was modified 3 years, 2 months ago by zoltom.
September 13, 2021 at 12:07 pm #1320712
Mike
Moderator
Hi,
Glad to hear this helped, please use css to add extra space below the button, perhaps like this:
```
#shopknop {
    margin-bottom: 20px;
}
```
as for the filtering plugin options and the pagination I’m not sure how this is being communicated to the next page, there are no classes, endpoints, or strings being saved in the page when an option is selected or unselected, from page 2 clearing the filter doesn’t reset the pagination.

Best regards,
Mike
September 21, 2021 at 5:33 pm #1321805

zoltom
Participant

Ok mike, thanks again. I’m going to ask a developer to look into this.
This is a bit beyond my coding knowledge.

September 22, 2021 at 12:37 pm #1321903

Mike
Moderator

Hi,
Very good then, 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
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Custom button on top of shop main page (adjust the standard woocommerce page)’ is closed to new replies.