How do I remove a form from HTML in a WordPress plugin without changing original code?

I have a redundant selector that appears on one of my webpages. See the attached screenshot. You'll see one selector on the left and one on the right. They have different sb numbers, but it appears they do the same thing as each other. Is there an easy way to eliminate this form code? I located and deleted the node in Chrome Inspect Element and it worked perfectly, but I don't know where to find the actual page that contains the code. I can locate CSS all the time and add my changes to my custom CSS page, but I can never identify a page title when it comes to the HTML. The form appears to be in the Woocommerce plugin.

Here is the form code that I wish to delete or mask from showing:

<form class="woocommerce-ordering" method="get">
	<select name="orderby" class="orderby" sb="2557303" style="display: none;">
		<option value="menu_order" selected="selected">Default sorting</option><option value="popularity">Sort by popularity</option><option value="rating">Sort by average rating</option><option value="date">Sort by newness</option><option value="price">Sort by price: low to high</option><option value="price-desc">Sort by price: high to low</option>	</select><div id="sbHolder_2557303" class="sbHolder"><a id="sbToggle_2557303" href="#" class="sbToggle"></a><a id="sbSelector_2557303" href="#" class="sbSelector">Default sorting</a><ul id="sbOptions_2557303" class="sbOptions" style="display: none;"><li><a href="#menu_order" rel="menu_order">Default sorting</a></li><li><a href="#popularity" rel="popularity">Sort by popularity</a></li><li><a href="#rating" rel="rating">Sort by average rating</a></li><li><a href="#date" rel="date">Sort by newness</a></li><li><a href="#price" rel="price">Sort by price: low to high</a></li><li><a href="#price-desc" rel="price-desc">Sort by price: high to low</a></li></ul></div>
	</form>

Is there by any chance an easy way to remove this form without messing around with the plugin code? Like perhaps a plugin where you can enter unwanted code and WordPress hides it from being displayed? Maybe that's a crazy expectation, but that would be an interesting plugin.

Maybe others have noticed this redundant selector in Woocommerce. As I mentioned, they do the same thing as each other, but one has more lowercase words than the other, so that tells me that the one I want to remove is probably an oversight or a mistake.

Any help will be greatly appreciated.

Best,
Kevin

  • PC
    • WPMU DEV Initiate

    Hiya,

    Greetings and thanks for posting on the forums.

    You seem to be using Woo Commerce plugin which is not one of our products however if you can give me a link to the site, I can see if it can be done via CSS without modifying the core files.

    Please advise.

    Cheers, PC

  • Weird Mike
    • Site Builder, Child of Zeus

    Does adding "display:none;" for that div or class not work by adding it to the custom styling in WooCommerce?
    Note* if it somehow get's overwritten just add !important to it. Just tested it on a similar instance on a clients site using WooCommerce.

  • kevin_m__schafer
    • New Recruit

    Hi @PC and @SplendidAngst,

    Thank you both for the reply.

    @SplendidAngst, the css for woocommerce appears to be un-formatted when I open the page. It's a real mess. I wouldn't know where to look for this. Did you create a custom css file? Is a custom css page possible for a plugin? Could you explain where you added your code?

    Any help would be greatly appreciated.

    Thanks,
    Kevin

  • Weird Mike
    • Site Builder, Child of Zeus

    The theme I'm actually using allows for custom styling to be added.
    Though, if you're looking to get rid of category/page specific form/drop down I could probably look into that a bit more, but you can't hide this on all pages with:

    form.woocommerce-ordering {
    float: right;
    margin: 0.8em 0 2em;
    display: none;
    }

    There is also a calling for "form.woocommerce_ordering" before that, but I didn't come across any issues not adding that to the custom styling with category pages.
    Hopes this helps.

  • PC
    • WPMU DEV Initiate

    It seems like a good discussion is going on here :slight_smile:

    @SplendidAngst is doing a great work by helping out the community here. Sending a few points your way for the great start and will be sending more post your solution !

    Cheers, PC

  • kevin_m__schafer
    • New Recruit

    Hi @PC,

    Sure, it's http://www.pokemonrancher.com

    It's still in development. My first big project! I'm using the theme and plugins that were picked out by the owner. It's a theme from MoJo, tailored for Woocommerce. The hardest part of the whole project will be the hundreds of graphics that need to be sized and uploaded.

    To see the issue, just click on the Shop tab in the navigation bar or on a category in the sidebar. I do normally have this site locked down with the "Under Construction" plugin, but I've disabled that for now.

    Best,
    Kevin

  • kevin_m__schafer
    • New Recruit

    Hi SplendidAngst,

    If we could have this implemented straight across the entire site that would be ideal. As you see in the screenshot on my original post there's one selector to the right, which we want, and the one we want to eliminate is the one on the left.

    Do you have your own testing site, or would you like admin access to mine?

    Best,
    Kevin

  • Weird Mike
    • Site Builder, Child of Zeus

    As I look at your code the ideal way to go would be to add
    .catalog-ordering { display: none !important; }
    In your custom CSS styling which should be located in the Theme options of your theme called "BAJIGOOR".
    That (from testing using Chrome 'Inspect Element') should eliminate that from showing up at all. Also in Chrome I've noticed that you have 2 menus that are populating the "Our Products" page. The one to the far right and one below "Showing all 8 results" so to also rid yourself of that one you would need to also add the CSS snippet to this div id #sbHolder_84602307 { display: none !important; }
    This should work. Now if you wanted to be category specific and hide that menu from being hailed into a category page you would want to add this code to your "category.php"

    if (!(is_category('red-pokemon'))){
            include(TEMPLATEPATH.'/orderby.php');
        }

    *red-pokemon* would be the slug of the category
    *orderby.php* is the menu that's being called in. Going about it this way you could avoid any conflicts on pages you wanted to have that option appear.
    Try this out and hopefully this solves your problem.

  • kevin_m__schafer
    • New Recruit

    Hi SplendidAngst,

    Okay, your first snippet removed my right-hand selector -- the one I want to keep, but not the left-hand one -- the one I want to remove. You're close.

    I then tried only your second snippet and that didn't remove either of the selectors. I didn't try your third snippet at this time.

    Thank you for helping on this.

    Best,
    Kevin

  • Weird Mike
    • Site Builder, Child of Zeus

    Are you by chance using a plugin called "jQuery Selectbox plugin"?

    Also this code .woocommerce-ordering { display: none !important; }
    Should remove that menu. sbHolder is a Jquery menu application that is all I could find for that id.

    *Note - I just refreshed your page and those 2 id/class lines swapped places. So now the above code doesn't work for that situation. I personally would have to look at the code to where you're calling in the sbHolder at if it's not a plugin.*

  • kevin_m__schafer
    • New Recruit

    SplendidAngst,

    Okay, we decided to remove both of these selectors because there's a set number of products, with new ones added only when a new category is added. Also, all of the prices will be the same. I used your codes, and it took two of them to make it fully happen.

    Here's what I'm using in my Custom CSS to completely remove both selectors:

    /* removes ordering selectors from product page */
    .woocommerce-ordering { display: none !important; }
    /* removes Sort By wording at right selector location */
    .catalog-ordering { display: none !important; }

    Thank you for the time you spent on this to pinpoint these snippets of code for me. More points on the way, my friend.

    Edit: I'm not using the plugin "jQuery Selectbox."

    Best,
    Kevin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.