Multiple Shop Theme Questions

Firstly thanks for the help Ismael. Sorry about posting multiple questions in a single thread. I wasn’t sure if that was allowed or not here. I will separate questions in the future.

1. This worked how I wanted paired with the background-color attribute.

However I now have a new problem. I didn’t fully notice before, but now when hovering over the magnifying glass in the search box it changes the color of the magnifying glass to black, which makes it blend with the background. How can I make the search bar magnifying glass change to green on hover?

1a.

1b.

2. Yes this is what I was needing, however it’s my fault for not being specific enough. With the previous code that worked on the products page, it centered both the product title and the cost. I needed cost centered too. It was only one set of code that did both for the products page, so I apologize for not being clear I wanted both centered, and this is applying to both Related Products (on individual product page) & Popular Products (on the homepage).

2a.

2-1. Popular Products has the correctly formatted header. Related Products is bold, smaller font and has a left justify. How can I adjust the Related Products heading to match Popular Products? In addition the font of the titles for Popular Products doesn’t match Related Products. I’m not sure where that font is set.

2-1a.

3. Yes exactly what I needed. Hides sorting options on “Shop” page which shows the product categories.

4. Sorry for the miscommunication on this adjustment. I know how to turn on the thumbnail for the product categories, which I do want. I did go to the categories and set the thumbnail, which I want to ONLY display on the product category (Shop) page. I do not want the category thumbnail to display as the banner on the products page once you select a category. Instead I was looking for code to replace that banner image with another image of my choice and have it centered since there doesn’t appear to be anyway to change that image through the theme UI itself.

4a.

4b.

Again thanks for all the help so far Ismael.

• This reply was modified 6 years, 6 months ago by kylebritton.

1. Thanks that was the code I needed.

2. Sorry you must have looked at the wrong area. You can see from pictures 2a & 2-1a in my previous post that those prices ARE NOT centered, in regards to “Related Products” & “Popular Products”. At this time ONLY my main Product Listing pages have price centered.

Also in regards to question 2 previously. I asked how can I change the font on the homepage “Popular Products” area to match the same font type of all the other areas. “Related Products” & my Product Listings match each other. It’s only “Popular Products” that doesn’t.

I also wanted the heading of “Related Products” to match “Popular Products”. i.e. larger text, centered, etc.

4. It’s a shame to see there is no way to adjust the banner at the top of each Product Listing page. I guess I will hide it for now and submit this as feedback for future improvements to the theme. There really should be a way to simply change this to an alternate image via setting a link. I mean 99% of the work is already done. It’s already got code to pull a image and insert it in the proper spot. It just needs a option to set the image link.

I found some CSS code that will hide that & replace it with an alternate image, however the problem is when referencing that banner, it seems it’s a global banner. So it sets the same image for every Product Listing banner. Is there anyway to tweak this to allow a different image on each Product Listing page banner?

i.e. I want the “Refrigerators” section to have a banner that says “Refrigerators” at the top. I want the “Dryers” section to say “Dryers”, etc.

.tax-product_cat .page-thumb {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(https://notrealdomain2.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */
}

Thanks again Ismael. If I could just get a follow up on questions 2 & 4, about changing the font type, centering prices, & if there is any modification to the posted code which would allow multiple banner images, since that code at least gives me what I want as a workaround from being able to directly replace the image.

• This reply was modified 6 years, 6 months ago by kylebritton.

2. This is not working for me unfortunately. I tried to modify the code to get it to work with no luck. I also removed all my custom CSS code to make sure nothing else was overriding the code you posted & that still didn’t make it work.

Login credentials have been provided in previous posts. Can you please login & go under Appearance > Editor > Style.css & adjust the “Center Price” code you provided to make it work?

4. Thanks for some additional tips on modifying the banners.

Thanks Ismael!

Thanks Victoria. Perfect!!