How to show product category title under the category image

The idea is to have Options & Description info available above the fold there, without having to scroll down for more.

1) Now it is setup on 2 cols like here: https://prntscr.com/irveci , having the short description shown above the options. In this case you can see that options are not fully shown above the fold.

But I am interested to show it in 3 cols like here: https://prntscr.com/irvgyz
I need to show the short description or the TABS (accordion style) on the right sidebar.

2) Alternatively: Is there a way to remove “PRODUCT INFORMATION” above the options (like shown in the 2cols screenshot), to lift the options a bit.

3) The CSS mentioned above works for short description, but I need to change the color for the full product description. What is the css class for that?

Thanks again!

Great! Thank you.

I still play around with the layout. I figured out how to remove the heading word PRODUCT INFORMATION using:

.product-information .title {
display: none;
}

1) How can I lift the price up a bit? (remove some of the space above it)

2) How can I manage the space under the product title and content? (less space)

See here: https://prntscr.com/is0q6e

Great and thanks again, Rose! I need to learn more CSS 🙂

Just this for today!

1)I found where to deactivate the newsletter (Promo Popup) in the right side top bar area widget. How do I make the Search box to fit there? (the search button goes on the second line) See here https://prnt.sc/is1kcc

2) In the left side top bar area I put a hyperlinked phone number. How can I change the color for that to black?

1)Ok, I reactivated top bar. See also private content for login.

On the phone number, I wanted to change the color for the hyperlink (I use a href=”tel:…)

On the search, I like it how it shows on mobile: https://prntscr.com/is3fgv , I wonder if on desktop can show up like that, close to the cart icon.

(if that’s possible, I will remove the phone number from the top left)

2) Is it possible to move the price below the description on the product page?

I solved 2) changed the order of price and short description, by putting these lines in the child theme functions:

/** to change the position of price, based on woocommerce_single_product_summary hook **/
remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 21 );

I solved 3) the color of the phone URL (I created a sub-class phonelink in the languages-area class)

For 1) Search field — I noticed that Product search widget works fine in that position for desktop, but for tablet is a bit off. The regular Search widget is off for both desktop and tablet. How can we fix this?
https://prnt.sc/it25qw
________
Something else:
On the homepage and category page: some categories have a longer title (like Belts, Bracelts, Keyrings) and when looking on the tablet, the title pushes up on the category image and shows in that white box. Tablet view: https://prntscr.com/it1hu5

I tried to adjust that with:
/* move category title under the category image */
.products-grid .product-category .categories-mask {
bottom: -100px; //was -75px
}
.products-grid .product-category {
margin-bottom: 80px; //was 60px
}
but now the space between the other category images and their title increased.
https://prntscr.com/it1iop
How do I change it without having the white box showing over? Is it possible to just print the category title under its image, and completly remove that white box?

Hi Rose,

I figured out most things, I just need some fine tunning. I copied the credentials in the private content here.

1) Search field — I noticed that Product search widget works fine in the header (top right) for desktop, and for tablet it shows the submit button under the search, nice aligned (probably that’s how it’s setup on mobile).
Search products on desktop: https://prntscr.com/itwlm5
Search products on tablet: https://prnt.sc/it25qw
(these look OK)

But the regular Search widget is off for both desktop and tablet. How can we fix this?
Search widget on desktop: https://prntscr.com/itwi3o
Search widget on tablet: https://prntscr.com/itwjri

2)On the homepage and category page: some categories have a longer title (like Belts, Bracelts, Keyrings) and when looking on the tablet, the title pushes up on the category image and shows in that white box. Tablet view: https://prntscr.com/it1hu5

I tried to adjust that with:
/* move category title under the category image */
.products-grid .product-category .categories-mask {
bottom: -100px; //was -75px
}
.products-grid .product-category {
margin-bottom: 80px; //was 60px
}
It looks ok, just that the space between the category images and their title increased.
https://prntscr.com/it1iop
How do I change it without having the white box showing over? Is it possible to just print the category title under its image, and completly remove that white background box?

Thanks — Lucian

Thank you, Rose! Both solutions work very nice on both desktop & tablet!

One small problem on the tablet: if you have something on the cart, the cart zone at the top right shows over the Search button like this:
https://prnt.sc/iu7qj4

In General -> Header Settings I enabled cart widget. I thought this is the cart showing next to the logo.

But as you can see there is a second cart at the top right, beside the Search box. (it expands)

Maybe we need to move the search a bit to the left to not get under the cart?
Or maybe is there a way to only show the cart beside the logo (as this one expands too)

It’s not a big deal, maybe I can leave it as it is. What do you suggest?

(I played around with showing/hiding the cart widget & search box in Header settings, but the search box is too large there)

No, you can see the issue only when you add at least one item in the cart.

I will let it as it is for now, it’s not a big issue.

You can give me a suggestion if you want. Just add something in the cart.

Thank you! It works perfectly.

A few more fine tunning:

1. How do I change the order of the categories on the homepage? This is the correct order I need to show: Bridles | Reins | Breast Collars | Bridle Accessories | Belts, Bracelets & Keyrings.

In homepage it is set to show in Menu Order, ASC, but doesn’t show properly. In WooCommerce -> Products -> Categories I ordered the categories by drag & drop.

Editing with WP Bakery builder shows this: https://prnt.sc/iwctcu (category order is Menu Order)

The code of homepage is this:
[vc_row full_width=”stretch_row_content_no_spaces” equal_height=”yes”][vc_column][product_categories orderby="menu_order" order="ASC" columns="4" ids="344, 79, 361, 80, 348" hide_empty="4"][/vc_column][/vc_row]

The category order works ok in https://bb.lucianwebservice.com/shop/ but not on the homepage: https://bb.lucianwebservice.com/ I guess they use different shortcodes.

What do I need to make it right?

2. How can I add a button (or a link) on the right of options OR under the gallery? See here: https://prntscr.com/iwdjq2

I need to do this only for some single product pages and each link will be different, depending on the product. Perhaps if I can put this code in a custom field or something.

3. I changed the newsletter icon with a truck icon, at the left of top search. How do I change the icon color to red?

4. What is the class for the menu navigation? I want to play with the horizontal spacing between main menu items, line height etc.

Thanks — Lucian

Thank you!

On 1.I was able to insert the [8Theme] Product Category and set it to Parent 0 to show only the top categories.

But now the category title show as when I started this ticket, in white boxes, inside the category image. See here: https://prnt.sc/iwqs6m

I have this code from you in the 8Theme Styling Global CSS, but does not work anymore. What do I need to add to it? I tried adding category-grid, but no luck.

/* category title under the category image */
.category-grid .products-grid .product-category .categories-mask {
bottom: -75px;
}
.category-grid .products-grid .product-category {
margin-bottom: 60px;
}
@media only screen and (max-width: 1250px){
.category-grid .products-grid .product-category .categories-mask {
background-color: transparent;
bottom: -70px;
margin-left: 0;
margin-right: 0px;
}
.category-grid .products-grid .product-category .categories-mask h4 {
font-size: 16px;
}
}
@media only screen and (max-width: 480px){
.category-grid .products-grid .product-category .categories-mask h4 {
font-size: 12px;
}
.category-grid .products-grid .product-category .categories-mask {
bottom: -65px;
}
}

On 2. I was able to create a custom field and show it as a button “Click Here for Matching Reins”. I just need to place the button to the right of variations, can you please send me the css code?
https://bb.lucianwebservice.com/product/english-raised-headstall/

I use a class named “matched_reins”.

This article shown me how to print in a specific position, I just need to place it to the right of variations, as there is more room there.
https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/#

* * *

Thank you for the help info sent. I try to use Inspect Element, but I am not always sure how to get to the right class for an element. I will search for some video tutorials.

Thank you very much! Both work perfectly!
https://bb.lucianwebservice.com/
https://bb.lucianwebservice.com/product/english-raised-headstall/

I was watching css tutorials with Inspect 🙂

1) Just one question about gallery (zoom and placement) on the product page.

Is it possible using your included gallery to magnify image to the right? (above the description area)

With the Classico included gallery there are some problems with the image placements:
(probably because images are different heights)
https://prntscr.com/isrh80
and
https://prntscr.com/isrh8s

For now I use YITH WooCommerce Zoom Magnifier, which shows the gallery ok, pictures the same size, and has the option to show the magnified image to the right. But sometimes the image is stuck on magnify, maybe there is a conflict with your gallery or something.
https://prntscr.com/isrh6z

Is there a way to do the same with the included Classico gallery (magnify to the right and gallery shown properly? Or what do you recommend?

My customer wants the magnified picture to show to the right.

(You can see the default gallery by deactivating YITH WooCommerce Zoom Magnifier)

Thanks!