Docs

[fastforwardcreative]

Hi there,

As I have searched through the archives for an answer, I’ve learned that the Shop and Product/Category pages are generated by WooCommerce and controlled by a combination of archive-products.php and functions.php.

What I want to be able to do is control some basic styling on these pages.

For example: on the Shop page (remapped to “Order” on my site http://www.twistwrap.com) I have set Woo to display Categories only. By default, X gives me large headline-style category names and product counts that have an ugly yellow highlight over them. I’d like to be able to put a border around each Category, make them appear smaller, use the Body font instead of the Heading font, and eliminate the product counts altogether (or at least remove the yellow highlight).

And on Product pages, there is a semi-opaque black strip along the bottom of each product image. Upon hover, this reveals a button. The button is following styling that I want to keep for the rest of the site, however it does not fit with the black background found here. How can I target these buttons to change their color?

[Rupok]

Hi there,

Thanks for writing in! I can help you to do those cosmetic changes. You can add this under Custom > CSS in the Customizer.

mark.count {
  display: none;
}
.product-category.product h3 {
  border: 1px solid #575f65;
  font-family: "Rubik",sans-serif;
  font-size: 20px;
  padding: 5px;
}
.woocommerce li.product .entry-header .button {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

Let’s adjust the CSS if needed.

Hope this helps.

Cheers!

[fastforwardcreative]

Thank you very much! That pointed me in the direction I needed to go.

I have two more question now.

1) After clicking on a category, SOME products correctly display “Select Options” on their buttons.

However some products (several within the http://twistwrap.com/product-category/mini-reels/ category, and all in the http://twistwrap.com/product-category/hand-reels/ category) have buttons that say “Add to Cart”.

How do I get them to say “Select Options”?

2) When I’m in http://twistwrap.com/order/ and other places on the site, and I click on a button, an ugly blue border appears after I click. It appears to be using the color I designated for global control, however I don’t want there to be any weird border appearing after a click. Why is that happening and how can I get it to stop?

Thank you so much!! I’m already much happier with the look of the site.

[Rupok]

Hi there,

Thanks for writing in!

#1. “Select Options” show for the variable products where size, color etc. needs to be selected. If you just open the product you will understand.

#2. That’s the focus state and you can remove this by adding this under Custom > CSS in the Customizer.

a:focus {
  outline: medium none !important;
}

Hope this helps.

[fastforwardcreative]

Oh, thank you. I applied that CSS, however I still see the outlines when I click. What is odd is that it doesn’t happen every time, it seems to appear maybe 1/3rd of the time for some reason. Maybe it only appears when it takes a bit longer to load?

Also, I think I understand what you are saying about the WooCommerce settings. The problem is that I have Minimum Quantity settings for each of these, due to the way they are sold. Do you know how I can force them all to say “Select Options” or something similar? The default behavior causes an error, although it does redirect them to the right page afterward.

[Darshana]

Hi there,

That is a Firefox related issue. You can add this under Custom > CSS in the Customizer.

a:focus, select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="submit"]:focus, input[type="checkbox"]:focus {
    outline: none;
}

Hope that helps.

[Author]

Posts