Home>Support>Product catagories menu on a mobile device

Product catagories menu on a mobile device

By Joe B (2b sexy), 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi, im using the premium version Vantage theme, which is wonderful on the desk top. On the mobile however under the logo and menu bar, the product categories is the firs thing to show up. The categories list is quite extensive an looks just awful on the mobile, ive tried different options in the setting, but nothing changes, is it possible to have a drop down menu on the mobile only or do i need to install a plug in. I have looked into this option, but did not want to risk a comparability issue with the theme. Any advice or help would be greatly appreciated.
My website is www.2bsexy.co.uk
Many thanks

URL: http://www.2bsexy.co.uk

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Hi Joe

    Glad to hear Vantage is working out.

    A really basic option is to insert the following under Appearance > Custom CSS and hide that container below a certain resolution:

    @media screen and (max-width: 760px) {
    
    #pgc-2115-0-0 { display: none; }
    
    }
    

    That’s specific to just that container.

    I think that list would need to be a drop down or not. I don’t know of a widget that could turn it into one just for mobile. I don’t see any dropdown category widgets here: http://docs.woothemes.com/document/woocommerce-widgets/. Perhaps there is a third-party plugin that has a widget that could help.

  2. 9 years, 11 months ago Joe B (2b sexy)

    Hi, thanks for your help, I tried the code out, but on the mobile version I do need a product category menu, preferably a drop down one to make the display more pleasing to the eye. The last theme I used had this set as standard, but in all honesty the theme itself was not that clever to work with an I wasnt happy with the lay out. The Vantage is everything I need, the look on desktop is fantastic, its easy to work with, if it only had a drop down menu for mobile view it would be 100% for me.

  3. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    A drop down menu for WooCommerce categories is unfortunately not part of the standard WooCommerce widget list. Vantage doesn’t come with any widgets specific to WooCommerce.

    Here is a solution: https://gist.github.com/corsonr/6681929.

    I’ve worked up a child theme to make use of this: https://siteorigin.com/wp-content/uploads/2014/10/vantage-child-woo-cat-drop-down.zip. Install the child theme from Appearance > Themes > Add New: Upload Theme.
    Keep in mind that you will need to redo Appearance > Customize and Appearance > Menus settings after activating a child theme. Test the child theme before doing that.

    Use the following shortcode to insert the drop down list:

    [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
    

    Thanks to Remi Corson for this solution. His GitHub Gist is here: https://gist.github.com/corsonr.

  4. 9 years, 11 months ago Joe B (2b sexy)

    Wow, thank you for that, I will have a bash at it and fingers crossed it will work, im not an expert in this, in fact im quite the newbie, but with the help of google and a bit of patience I get by (all good fun working it out) its a great way to learn. Once again, many many thanks for the info, you are a STAR.

  5. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    For sure.

    So test the child theme, if it works for you do this.

    1. Re-activate the parent theme and open Appearance > Customize.
    2. Open a new tab and activate the child theme and open Appearance > Customize.

    Now you can manually copy all those settings across.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More