Support will be limited from 22.05.2019 till 26.05.2019

We will answer all the questions from that period after we get back on 27.05.2019.

Have a great rest of May ;-)
Apollo13Themes Team
Before you ask please READ THIS

Colors in WooCommerce product category

in Rife Posts: 9,799
Willie asked me on e-mail about various colors in the product category.

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


  • AirAir
    Posts: 9,799
    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:
        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:

    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: 9,799
    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