Change headings

Hi Scott!

Changing the styles for those specific elements will require some custom CSS since there aren’t any controls that change the styles for those elements individually.

This CSS should change the titles on product category pages to white:

.tax-product_cat .page-title {
	color: #ffffff;
}

I am more than happy to help you target the subtitles on your category pages, but I am not exactly sure which element you are referring to. Is it the short description that appears under the product price that you are trying to change?

Hi Joseph,

I entered this in the customizer, but it didn’t change anything. Is there somewhere else I should be entering it?

Also, I added a ‘Subtitles’ plugin so I could list subtitles under products. However, it doesn’t allow for color customization so I’m sure there must be somewhere else I have to enter it.

Thanks!

Scott

Hi Scott,

Can you send me the full name of that subtitle plugin you are using or a link that plugin in the WordPress repository? I couldn’t locate a plugin called Subtitles, but once I get that link I will be able to do some testing and should be able to create the CSS you need to get things working.

The code that I sent you is only designed to work on the Category listing pages for your WooCommerce products and the titles on individual product pages will not be effected, do you need to change those titles as well?

Hi again,

Thanks very much for all your help. The plugin is called KIA Subtitles.

Also, I think I understand about the code above – that changed the category title on the category pages; but I want to change the individual product title colors on the category pages, not the overall page heading.

Thanks!

Thank you for clearing that up Scott!

The class .woocommerce-loop-product__title is used for the individual products titles on the category pages and you can swap that with the .page-title class used in the previous code. This is what the new code should look like:

.tax-product_cat .woocommerce-loop-product__title {
	color: #ffffff;
}

It looks like the KIA Subtitles applies the class .subtitle to the Subtitle elements added by that plugin and you should be able to change the color for that item using that CSS selector.

Please let us know if you have any other questions for us Scott!

Hi Joseph,

Thanks AGAIN for your help. That took care of my product pages.

Forgive my ignorance here, please. I’m much more skillful with HTML than CSS. I tried just changing out to .subtitle and it didn’t do the trick, I’m guess because it’s still looking for the product category page instead of the individual product pages. What do I need to do for that?

Nevermind – I got it!

Hi there Joseph – wondering if I can get your assistance again.

We have a plugin called ‘Woo Related Products’ to control what related products show on each item page. Underneath this are two buttons that say ‘Previous’ and ‘Next.’ Currently, they are both the same color. There are no options in the plugin to change coloring, so I’m assuming it must be elsewhere, but I can’t find it in the customizer either. Is it possible for you to generate a code that could rectify this?

Thanks!

Scott

Hi Scott!

Can you send us a link to a page on your website that has the pagination links from Woo Related Products that you are trying to change? That plugin most likely has its own classes that it adds that you can target to change the colors as needed.

We also have a guide in our support center that demonstrates how to use your web browser’s Developer Tools to customize CSS that should be a useful reference in case you ever want to try figuring out CSS selectors for elements on your website that you want to change in the future.

Hi Joseph,

Thanks very much. I went to do this, but man… I am just not sure where it’s showing up! I can change the hyphen color, but not the text color.

https://siegelministries.org/media/books/assembled-together/

This is an example of one of the pages. At the bottom under the ‘Related Products’ slider, you’ll see the Previous-Next buttons. All text is yellow.

Thanks!

Scott

Upon playing around with this, I discovered they change to black using the Links design editor in the customizer. However… That changes all links, of course, which I don’t want to do. I do want these to be black.

Actually, I think I’d like to just remove the boxes altogether. Any idea how to do that?

Hi Scott!

The only boxes I see in the Related Products section on that page are the Select Options ones below each product image, were you able to figure out how to remove those boxes already?

Hi Joseph,

I did get it! Sorry, I forgot to reply with that.

I’m facing another issue now… Lol. Actually three.

1) On our individual product pages, the alignment is off on the ‘Add To Cart’ function. I can’t seem to find where to fix this. Any ideas?

2) Our website operation is incredibly slow. It has been since day one, long before I entered any content or added plugins. I figured this was server related, but I just want to make sure there’s no setting I can do to fix this?

3) Is there a way to display the store’s breadcrumbs style on a none-store page? I want to link our podcasts with that breadcrumb, but it’s looking much more generic.

Thanks!

• This reply was modified 2 years, 9 months ago by smswise.
• This reply was modified 2 years, 9 months ago by smswise.

Hi Scott!

We currently have a bug report ticket in with our developers to address the problem with the Add to Cart button alignment. In the meantime you should be able to correct the alignment by adding the following CSS:

.palette-primary.woocommerce-page .single_variation_wrap .woocommerce-variation-add-to-cart.variations_button .btn.button-primary, .palette-primary.woocommerce .single_variation_wrap .woocommerce-variation-add-to-cart.variations_button .btn.button-primary {
	margin-top: 0;
}

The slow performance you are seeing while working in the WordPress admin could be related to your web server, especially if you noticed it prior to installing any plugins or additional themes. There is a plugin that might be able to help with the WordPress admin performance, Heartbeat Control, which limits the frequency of AJAX calls made while working in the WordPress admin.

Unfortunately there isn’t a way to extend the breadcrumb designs used on the product pages to non-product ones in our themes and we apologize for any inconvenience this causes you, but please let us know if you have any other questions Scott!