Home>Support>Change the look of woo commerce categories list

Change the look of woo commerce categories list

By Graham24689, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi
When I use the “WooCommerce Product Categories” widget in page builder it doesn’t appear with any styling only as an unordered list, I assume I would apply styles through
edit widget-widget styles-attributes-
then there is
“widget class” and “css styles”

but I don’t know how to use these settings could you help or let me know where to read about these settings.

I know I can adjust the padding and background color but it’s the “widget class” and “css styles” I’d like to know how to use, it’s probably obvious I’m a beginner here so please keep this in mind.
Thanks Graham

URL: http://luvbaby.org/

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, 9 months ago Andrew Misplon
    Hi, I Work Here

    Hi

    Are you referring to the product categories list in your sidebar? Or is there another location you’re applying that?
    It’s not necessary to use the Page Builder custom classes feature here. We can target that widget without adding classes. How do you want to style it?

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

    Link I’m referring to: http://luvbaby.org/?post_type=product

  3. 9 years, 9 months ago Graham24689

    No I’m refering to the one on the home page of the site http://luvbaby.org/ the link you posted shows the widget in the sidebar where is displays ok but when placed in a widget area of a page builder page ( as on the home page) it displays as an unordered list with bullet points and links underlined, this is the one I want to change.
    Thanks

  4. 9 years, 9 months ago Graham24689

    It seems to display this way when I use the widget anywhere in page builder and I would just like it to look cleaner without the bullets and underline, if it’s possible to make the links show as buttons that would be a bonus.

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

    Please try the following under Appearance > Custom CSS (Vantage Premium) or in your own Custom CSS plugin / module (Vantage Free). In the case of Vantage try Simple Custom CSS or Jetpack Custom CSS:

    /* WooCommerce Product Categories Widget */
    
    .widget_woocommerce_product_categories ul.product-categories {
    list-style: none;
    margin-left: 0;
    }
    
    .widget_woocommerce_product_categories ul.product-categories li {
    margin-left: 0;
    }
    
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