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: Rose Tyler
    Rose Tyler
    Support staff
    March 22, 2018 at 09:07

    Ok.
    You can use this custom css code in Theme Options > Custom css:

    .woocommerce-cart-tab {
        display: none;
    }

    to remove the cart beside the search.

    Regards

    Avatar: phssaddlery
    phssaddlery
    Participant
    March 23, 2018 at 06:37

    Thank you! It works perfectly.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 23, 2018 at 09:00

    You’re welcome!

    Regards

    Avatar: phssaddlery
    phssaddlery
    Participant
    March 26, 2018 at 07:04

    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

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 26, 2018 at 12:25

    Hello,

    1. You use default WC element. Please try to use [8theme] Product categories element.
    2. Make sure this is enabled http://prntscr.com/iwhsoy then
    http://prntscr.com/iwhsfl
    <?php echo get_post_meta(get_the_ID(), 'custom_link', true); ?>
    https://prnt.sc/iwhyde
    classico/woocommerce/single-product/product-thumbnails.php (do changes via child theme).
    3. http://prntscr.com/iwg96n
    4. To find out a needed class, you may simply inspect the page using devtools in chrome browser https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
    To access the DevTools, open a web page or web app in Google Chrome. Either:
    -Select the Chrome menu Chrome Menu at the top-right of your browser window, then select Tools > Developer Tools.
    -Right-click on any page element and select Inspect Element.
    The DevTools window will open at the bottom of your Chrome browser.

    Regards

    Avatar: phssaddlery
    phssaddlery
    Participant
    March 26, 2018 at 21:51

    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.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 27, 2018 at 08:47

    1. Please change the code to:

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

    2. Please try to use this code:

    .matching_reins {
        position: absolute;
        left: 50%;
        top: 50%;
    }

    Regards

    Avatar: phssaddlery
    phssaddlery
    Participant
    March 27, 2018 at 08:51

    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 🙂

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 27, 2018 at 09:21

    You’re welcome 🙂

    Regards

    Avatar: phssaddlery
    phssaddlery
    Participant
    March 27, 2018 at 19:00

    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!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 28, 2018 at 12:19

    Hello,

    There are no conflicts with our theme, so I would recommend you to check how this works with default WC theme – Storefront, then contact the plugin author about the problem.

    Regards

    Avatar: phssaddlery
    phssaddlery
    Participant
    March 28, 2018 at 22:15

    Thank you!

    For one category (Belts, Bracelets & Keyrings) I added a custom tab “Measurement”.
    https://bb.lucianwebservice.com/product/blue-ocean-croc-ladies-belt/

    When I do that, the Reviews tab dissapears. I am trying to add the Reviews tab back, I was able to add the tab title. Is there a shortcode or php code I can use to include the reviews form in this tab content?

    Thanks!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 29, 2018 at 08:28
    Avatar: phssaddlery
    phssaddlery
    Participant
    March 29, 2018 at 09:05

    Thank you. I read and a tried the article code. I thought your theme has a custom code for reviews tab.
    Does it?

    Like a function to add the review form in tge Review tab?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 29, 2018 at 10:26

    Hello,

    We did not rewrite functionality of Review tab in our theme. You need to check how this works with default WC theme – Storefront, so please activate the default theme and check. Likely it would be better to contact woocommerce support, all WC snippets work fine with our theme.

    Regards

  • 1 2
    Viewing 35 results - 21 through 35 (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.