Product Archive titles off center and count is highlighted

This CSS code should fix it for you.

.woocommerce ul.products li.product h3 {
    text-align:center;
}
.woocommerce ul.products li.product h3 mark {
    background:transparent;
    color: inherit;
}

Hope this helps!

Thank you! Should this go into Style.css or where?

Suggest you don’t use style.css because it may be overwritten by the next theme update.

I’m not familiar with your theme. Some themes have the facility to enter custom css. This may be at Appearance > Customise or Appearance > Theme Options. It may be called Custom CSS or Advanced Settings.

If your theme does not have this feature, you can use a plugin like this one:
https://www.ads-software.com/plugins/simple-custom-css/

Okay, so @wooassist those 2 snippets took care of the 2 issues I mentioned so thank you! My problem now, is that I can’t identify where to place those snippets to be able to have the changes stick on the site.

When I inspect either the product count or the category title on the site, the referenced CSS location says it’s inside the uploads folder inside some random Pagelines directory in a “compiled CSS Core” file. See here: https://screencast.com/t/l9Od7zZsLy

With the CSS that needs to be adjusted located in THAT file that’s basically inaccessible, what can I do to make the needed changes?

Nevermind, I figured it out! Thank you @wooassist! You’re a life saver!

See https://www.completespeech.com/shop/ Much appreciated!

So @wooassist, I have made significant progress on correcting the various styling issues with my client’s shopping cart, but the LAST thing I am having issues with, is increasing the font size of the .showcoupon and .showlogin elements, as well as the .woocommerce-info elements that go along with them (i.e. “have a coupon?” & “returning customer?”). When I add the code to the bottom of the custom code and save it and refresh, firstly it clears my cart so I have to start all over again, and when I get back to the checkout page, the styling is gone for whatever reason. The code I’m adding to style the 2 above mentioned elements is (and feel free to correct me if I’m wrong)

URL: https://www.completespeech.com/shop/cart/checkout/

This is how it looks: https://screencast.com/t/ieN2JPWZx2Dg

and this is how I want it to look: https://screencast.com/t/p02SoJnKcG

This is the code that makes it look how I want:

.woocommerce .woocommerce-info, .woocommerce-page .woocommerce-message, .showcoupon {
  font-size: 15px;
  color: #fff;
}

But every time I publish the addition of the above code to the code editor within Pagelines and refresh the page- the cart is emptied and I don’t have a chance to view the results of the addition of the code. Then if I do the process over again (add a product to cart, click go to checkout, the changes haven’t been saved and it’s back to the 26 lines of code I wrote to style other elements of the store, cart, and checkout pages.

Nevermind! I was able to get it to cooperate finally! The code that worked was the following:

.woocommerce .woocommerce-info, .woocommerce-message, .showcoupon, .showlogin, a:hover {
  font-size: 15px;
  color: white;
}

I’ll let you know if I have any other questions, but I’m getting close to finishing this project so I may not need it. Thanks!

@tproctor it’s great that you’ve worked this out on your own. Glad I could help you out on the process ??