Support » Plugin: WooCommerce Products Per Page » Doesn’t work with Flatsome Theme

  • Resolved dotcominfo

    (@dotcominfo)


    Functionally, the plugin is working correctly, but it “intrudes” into areas of the layout where the product category and subcategory grids for products are shown.

    Instead of like in your demo, where the dropdowns are placed above and below the grid of product thumbnails, they were placed next to that region in my customer site.

    Screencaps showing how it’s supposed to look vs. how it looks with your plugin.

    Before:
    Before your plugin

    After:
    With your plugin

    I can provide you with access to the admin if it helps resolve this problem.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Jeroen Sormani

    (@sormano)

    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

    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);

    Plugin Author Jeroen Sormani

    (@sormano)

    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

    dotcominfo

    (@dotcominfo)

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

    Plugin Author Jeroen Sormani

    (@sormano)

    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 );
    }
    
    
    dotcominfo

    (@dotcominfo)

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

    http://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! 🙂

    dotcominfo

    (@dotcominfo)

    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.

    Plugin Author Jeroen Sormani

    (@sormano)

    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

    dotcominfo

    (@dotcominfo)

    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.

    Plugin Author Jeroen Sormani

    (@sormano)

    dotcominfo

    (@dotcominfo)

    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.

    Plugin Author Jeroen Sormani

    (@sormano)

    Great to hear that!

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

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.