How to show product category title under the category image

This topic has 35 replies, 2 voices, and was last updated 6 years ago ago by Rose Tyler

  • Avatar: phssaddlery
    phssaddlery
    Participant
    March 15, 2018 at 08:24

    Hi,

    By default the product category title shows in a box inside the category image. How can I make the category title to show under the category image?

    Here is how it looks now:
    https://bb.lucianwebservice.com/product-category/bridles/

    I searched the forum and docs but did not find how to do it.

    Thank you — Lucian

    34 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 15, 2018 at 11:35

    Hello,

    Please add this code in Theme Options > Styling > Custom css:

    .products-grid .product-category .categories-mask {
        bottom: -75px;
    }
    .products-grid .product-category {
        margin-bottom: 60px;
    }

    Regards

    Avatar: phssaddlery
    phssaddlery
    Participant
    March 15, 2018 at 11:54

    Thank you, Rose! Works great!
    https://bb.lucianwebservice.com/product-category/bridles/

    One more quick question: where can I enter the email for “Email to a friend”? I filled out the email in General – Contact form, but this seems to not be used for “Email to a friend”.

    Thanks!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 15, 2018 at 13:20

    Hello,

    You’re welcome!
    We’ve sent shortcodes.php and woo.php files to your registration email. You need to replace them in classico/framework folder via FTP to fix the problem with the email (General > Contact form).

    Regards

    Avatar: phssaddlery
    phssaddlery
    Participant
    March 15, 2018 at 18:33

    Works perfect now! Thank you for the files!

    I have a few more questions to finish the site launch.

    How can I show the description tab on the right sidebar on the product page?
    https://bb.lucianwebservice.com/product/english-raised-headstall/

    Is there a shortcode or something? I found how to hide the tabs from under or next to images, but not sure how to show the tabs again in the right sidebar.

    And where to change the product description and additional info font / color?

    I tried this in the Global CSS settings but doesn’t change anything:
    .product-information .short-description p {
    color: #000000;
    }

    Thanks!

    Avatar: phssaddlery
    phssaddlery
    Participant
    March 16, 2018 at 05:27

    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!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 16, 2018 at 11:45

    Hello,

    You can change Single Product Page Layout in Theme Options > E-commerce > Single Product Page.
    To remove the short description http://prntscr.com/irz92g can be used this code:

    .product-information .short-description {
        display: none;
    }

    3.

    .tabs .tab-content, .tabs .tab-content a {
        color: #000000;
    }

    Regards

    Avatar: phssaddlery
    phssaddlery
    Participant
    March 16, 2018 at 13:18

    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

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 16, 2018 at 14:26

    You’re welcome!
    1.

    .single-product .product-information .price {
        margin-top: 0px;
        line-height: 1;
        margin-bottom: 15px;
    }

    2.

    .single-product .page-heading {
        margin-bottom: 0px;
    }

    Regards

    Avatar: phssaddlery
    phssaddlery
    Participant
    March 16, 2018 at 14:33

    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?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 16, 2018 at 15:40

    I do not see the top bar on your site. Have you disabled it?
    If you added the number via a text widget, this article will be useful for you https://www.w3schools.com/html/html_css.asp, for example <p style="color:blue;">This is a blue text</p>
    Please activate the top bar so I can inspect the code via browser console and give you advice about the search, also you can provide temporary wp-admin access in Private Content.

    Regards

    Avatar: phssaddlery
    phssaddlery
    Participant
    March 16, 2018 at 16:00

    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?

    Please, contact administrator
    for this information.
    Avatar: phssaddlery
    phssaddlery
    Participant
    March 18, 2018 at 09:51

    A recap for my previous reply (credentials in the private content of the above post)

    1) For the desktop search bar it’s ok as a search field & submit button, like here https://prnt.sc/is1kcc , it just need to fit in the header properly.

    2) Is it possible to switch the price with the short description on the product page? (so the price shows above the options, and short description above price) like here: https://prnt.sc/isrh4i

    3) The color of the phone URL link (in header) should be black.

    And one more:

    4) I have a question about gallery (zoom and placement) on the product page.

    With the Classico included gallery it looks like this:
    (probably because images are different heights)
    https://prntscr.com/isrh80
    and
    https://prntscr.com/isrh8s

    My customer wants the enlarged image to show to the right.

    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.
    https://prntscr.com/isrh6z

    Is there a way to do the same with the included Classico gallery?

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

    Avatar: phssaddlery
    phssaddlery
    Participant
    March 18, 2018 at 21:58

    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?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 19, 2018 at 11:42

    Hello,

    Sorry for the delay due to the weekends.
    Let’s solve your problems step by step because numerous questions produce numerous answers and I’m confused a little bit. Please write unsolved questions one by one with numbers.
    Thanks in advance.

    Regards

    Avatar: phssaddlery
    phssaddlery
    Participant
    March 20, 2018 at 18:40

    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

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 21, 2018 at 10:09

    Hello,

    1.

    @media only screen and (max-width: 1290px) and (min-width: 992px){ 
    .top-bar .widget_product_search .woocommerce-product-search input[type="search"] {
        width:  auto !important;
    }
    }

    2. Please change the custom code to this:

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

    Regards

    Avatar: phssaddlery
    phssaddlery
    Participant
    March 21, 2018 at 11:02

    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)

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 21, 2018 at 13:50

    You’re welcome.
    Have you sorted out http://prntscr.com/iua9tk ?

    Regards

    Avatar: phssaddlery
    phssaddlery
    Participant
    March 21, 2018 at 17:36

    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.

  • 1 2
    Viewing 20 results - 1 through 20 (of 35 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.