Doesn’t work with Flatsome Theme

Hi,

Thank you for creating a support thread / allowing me to help you ??

Also thanks for the screenshots, that helps a lot.

It looks like the theme you’re using is moving the ‘sorting’ dropdown to an entirely different position, but leaving the position where it was originally in there. This is where the PPP dropdown is added.

Could you do a search through your theme / child theme for the text: ‘woocommerce_catalog_ordering’ that should look like something:

add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

That way we can figure out where your theme is putting the sort dropdown and copy that location for the PPP dropdown.

Thank you,
Jeroen Sormani

• This reply was modified 7 years, 9 months ago by Jeroen Sormani.

I found something like it.

The only file that has this in flatsome is in the woocommerce subdirectory of the theme, and the file is called structure-wc-category-page-header.php.

The code in the page that references that is this block:

/* Add Ordering to Flatsome tools */
remove_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_result_count’, 20);
remove_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_catalog_ordering’, 30);

add_action( ‘flatsome_category_title_alt’, ‘woocommerce_result_count’, 20);
add_action( ‘flatsome_category_title_alt’, ‘woocommerce_catalog_ordering’, 30);

Thanks, that seems to be the code we’re looking for!

If you set the ‘location’ of the dropdown to ‘none’ it should be removed from (well, not added to) the page.

Then you can add it to the right position by adding the following to your themes functions.php file:

if ( function_exists( 'Woocommerce_Products_Per_Page()' ) ) {
    add_action( 'flatsome_category_title_alt', array( Woocommerce_Products_Per_Page()->front_end, 'products_per_page_dropdown' ), 31 );
}

Depending on what you like, you could try to set the 31 to 29 to load the PPP dropdown before/after the sorting.

Let me know how that goes!

Jeroen

I tried all this but nothing works. Any other ideas?

Hi,

Edit: When I was typing the stuff below the —– I noticed there was a error in the check, can you first try this before continuing below the —- ?

if ( function_exists( 'Woocommerce_Products_Per_Page' ) ) {
    add_action( 'flatsome_category_title_alt', array( Woocommerce_Products_Per_Page()->front_end, 'products_per_page_dropdown' ), 31 );
}

Thanks!
Jeroen

————
Allright,, lets try to verify if the action you found is indeed the right one, and if our added code is doing something. That can be done by the following two steps:

1) Comment out the line you’ve found:
add_action( ‘flatsome_category_title_alt’, ‘woocommerce_catalog_ordering’, 30);

When commented out it should remove the ordering dropdown from your page. If it isn’t we will know that there’s something else that is adding the ordering dropdown. If it does we know we are in the right spot.

2) When it is hiding, try adding the following code snippets to see if they are added at the location next to the ordering dropdown

add_action( 'flatsome_category_title_alt', function() { echo 'Here 1'; }, 31 );

if ( function_exists( 'Woocommerce_Products_Per_Page()' ) ) {
    add_action( 'flatsome_category_title_alt', function() { echo 'Here 2'; }, 31 );
}

That’s progress. After implementing your fixed code of section one, it started working but like this:

https://37.60.247.69/~dyeables/product-category/handbags/evening-handbags/

It puts your select both in the title bar (which I prefer), but it still also shows it below next to the products like before.

Also, I would prefer that this tool does not show up on any mobile device – only desktop. Maybe you could advise me on the CSS for that. If any of this would benefit from paying for a little bit of your time, I certainly wouldn’t have a problem with that if it’s reasonable. Let me know also, if you’d like to have access to the admin yourself in case you want to try any of these tweaks directly yourself. I’m sure it would certainly go quicker.

I appreciate your help so far – there’s absolutely a 5 star review revision I’ll be doing at the end of all this! ??

Also, regarding the commenting out of that code, and the rest of it. I’m not certain on how to handle this. I’m dealing with the child theme, so I shouldn’t need to comment out anything right – just put the new code in – is that correct? Not sure about how all that works between the main and child themes.

Hi,

Could you confirm whether or not you have the ‘location’ setting set to ‘none’ or something else?

The dropdown next to the products seems to be the same as in your initial screen, which would indicate it is still added to one of the original positions.

Here’s a sample of how you can hide it on screens smaller then 850px

@media screen and (max-width: 850px) {
	.wppp-select {
		display: none;
	}
}

PS. you could also try and hide the ppp dropdown next to the products with some CSS if there’s no good explanation as per why its showing there.
.shop-container .wppp-select { display: none; }
Note the best solution, but just a alternative.

Re commending / parent themes:
It is indeed discouraged to make permanent changes in a parent theme, but for debugging it is perfectly fine to comment out a line for a moment.

Let me nkow!
Jeroen

Can you clarify what you mean by “Could you confirm whether or not you have the ‘location’ setting set to ‘none’ or something else?”

I’m not sure what you’re referring to.

I’m referring to the top option here: https://s.w.org/plugins/woocommerce-products-per-page/screenshot-3.png?r=1600841

Hell yes! Changing the setting to “none” did the trick and your code to supress the display on mobile also worked! You didn’t need to help me with that, but I certainly appreciate it!

Thank you so much for your help with all of this. Top notch plugin – and support! My review and rating has been updated to reflect my overall satisfaction with you and your plugin.

Great to hear that!

Glad I could help, thank you for the updated review ??

A very useful post. Kudos to the Author for the outstanding level of support!

Summarizing, these steps did the trick for me with the last Flatsome (3.3.7).

in functions.php of the child theme:

add_action( 'flatsome_category_title_alt', array( Woocommerce_Products_Per_Page()->front_end, 'products_per_page_dropdown' ), 31 );

in style.css of the child theme, to fix a minor layout issue:

form.form-wppp-select.products-per-page { margin: 5px 0 0 0; }

And the “none” setting in WooCommerce > Settings > Product > Display.

Thank you!

With WP_DEBUG=true, and this code:

if( function_exists( 'Woocommerce_Products_Per_Page' ) ) {
    add_action( 'flatsome_category_title_alt', array( Woocommerce_Products_Per_Page()->front_end, 'products_per_page_dropdown' ), 31 );
    add_filter( 'wppp_ppp_text', 'ew_wppp_ppp_text', 10, 1 );
}

I’m getting the error_log filled with these:

PHP Notice: Undefined property: Woocommerce_Products_Per_Page::$front_end

How to get rid of them?
Thanks.

Make sure that code is not executed on any admin pages or during AJAX for example. The property should exist in any other case: https://github.com/JeroenSormani/WooCommerce-Products-Per-Page/blob/312d8e0624ab34acd8804c16f3b638e386968bee/woocommerce-products-per-page.php#L130-L130

Cheers,
Jeroen