Before you ask please READ THIS

Colors in WooCommerce product category

AirAir
in Rife Posts: 10,000
Willie asked me on e-mail about various colors in the product category.



ScreenShots attached.
1.png
1463 x 451 - 47K
2.png
1183 x 619 - 52K

Comments

  • AirAir
    Posts: 10,000
    Hey WIllie:-)
    I want to change color and size(this is reading off of the description of category)
    You can target this part added by plugin with this custom CSS:
    .term-description{
        color: #0000ff;
        font-size: 20px;
    }
    However, for this to work you will have to remove styling that you have added to it while editing category.

    Please see:
    http://(yourwebsite.com)/wp-admin/term.php?taxonomy=product_cat&tag_ID=105&post_type=product&wp_http_referer=%2Fwp-admin%2Fedit-tags.php%3Ftaxonomy%3Dproduct_cat%26post_type%3Dproduct%26s%3DExtreme

    So you can either style it with custom CSS, that I gave you above, or right from editor in above link.
    I want to change color of the button
    Please use this custom CSS:
    .woocommerce ul.products li.product .button {
        background-color: #fff;
        color: #222;
    }
    .woocommerce ul.products li.product .button:hover {
        background-color: #222;
        color: #fff;
    }
    I dont want to display categories
    In child theme in file functions.php please add such code:
    add_action('after_setup_theme', function(){
        remove_action( 'woocommerce_before_shop_loop_item_title', 'apollo13framework_wc_loop_single_product_categories', 13);
    });
    I want to change color and size
    Please use such custom CSS:
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        color: #0000ff;
        font-size: 20px;
    }
    I also want to change the page number font
    Do you mean font-size & colors?

    With kind regards.
  • Posts: 2
    yes, font size and colors.
  • AirAir
    Posts: 10,000
    OK :-)

    Here is custom CSS for page navigation:
    /* all links in navigation */
    .navigation a, .navigation span {
        font-size: 10px;
        color: #3D3D3D;
    }
    /* current page */
    .navigation .current, .navigation a:hover {
        color: #fff;
        background-color: #bbb;
    }
    
    /* next/prev */
    .navigation .next, .navigation .prev {
        color: #222;
    }
    .navigation .next:hover, .navigation .prev:hover {
        background-color: #222;
    }
    Hope this will help.

    With kind regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion