Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #850718

    Joao B
    Participant

    Hello I have a couple of questions regarding woocommerce on X

    http://www.informationstreet.com/shop-now/

    1)My adding to cart icon disappeared from navbar once the product is added, how can I fix that?

    2)How can I put the button under the price so it doesnt overlay the img of the products?

    Thanks

    #850719

    Joao B
    Participant
    This reply has been marked as private.
    #850725

    Zeshan
    Member

    Hi Joao,

    Thanks for writing in!

    #1: You need to enable Navbar Menu under WooCommerce in the Customizer if you want to show the cart button in the navbar (see: http://prntscr.com/aj99xx).

    #2: To show the “Add to cart” button below the price tag, add following CSS under Custom > CSS in the Customizer:

    .woocommerce li.product .entry-header .button {
      position: static;
      opacity: 1;
      margin-top: 10px;
    }
    

    Thank you!

    #850887

    Joao B
    Participant

    Hi Thanks for your help

    1)I am having a hard time aligning this Custom Headline and the cta Checkout and My Cart

    I would like the fonts to be the same if possible same as in CTA but really doesnt matter, and also that when responsive the height is the same and aligned.

    How can I achieve that I have tweaked closest I could but I dont know where to find exactly the font sizes.

    Let me know if its possible to do that

    2) I need that the links on that page be white, unless they are on the page (Examples All Products) Than I would Like it black. Also I dont want it underlined, and want it bold as normal custom headline. How Can I Achieve That?

    Password is above if you need

    http://www.informationstreet.com/shop-now/

    #850903

    Zeshan
    Member

    Hi Joao,

    #1: Under your “My Cart” column settings, change padding top and bottom to 1% instead of 1.8%. Then add following CSS code under Style field of “My Cart” headline settings (see: http://prntscr.com/7qeof1):

    line-height: auto;
    

    #2: Do you want all the links to be white on this page: ? If so, add following CSS under Custom > CSS in the Customizer:

    .page-id-5449 .x-main a {
      color: #fff;
      font-weight: bold;
    }
    

    If you have any additional questions at this time we kindly ask that you open them up in a separate thread. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

    Thanks!

    #851050

    Joao B
    Participant

    Hello I hav add this code for another few pages but probably I am doing something wrong, I found dificult to understand X paths sometimes

    I add for the page http://www.informationstreet.com/shop-now/dify/ the code:

    .page-id-5507.x-main a {
    color: #fff;
    font-weight: bold;
    }

    but it doesnt work, i did for a few more pages that are inside this category do I have do put something more on the path so it works?

    Thanks

    #851239

    Rupok
    Member

    Hi there,

    Thanks for writing in! You pasted code seems not correct as there should be a space after the page ID. Make sure to use the below code and don’t edit any space if you don’t understand the CSS structure :

    .page-id-5507 .x-main a {
      color: #fff;
      font-weight: bold;
    }

    Hope this makes sense.

    Cheers!

    #858272

    Joao B
    Participant

    Hi

    I have set my navabar to change sizes, when scrolling up and down, everything going good, but the woocommerce trolley is not following,

    I believe i need to ad the same css to the woocommerce, but I cant find the correct x path

    css: code

    .x-navbar.x-navbar-fixed-top .x-navbar-inner {
    transition: min-height 0.5s ease;
    -webkit-transition: min-height 0.5s ease;
    }
    .x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: height 0.5s ease, padding-top 0.5s ease;
    transition: height 0.5s ease, padding-top 0.5s ease;
    }

    .x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 0.5s ease;
    transition: min-height 0.5s ease;
    }

    .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    height: 60px;
    padding-top: 25px;
    }

    .x-navbar.x-navbar-fixed-top .x-brand {
    width: 120px;
    margin-top: 4px;
    }

    .x-navbar.x-navbar-fixed-top .x-navbar-inner {
    min-height: 60px;
    }

    .x-navbar {
    border:none;
    box-shadow:none;
    }

    .home .entry-content.content {
    padding-top: 0 !important;
    margin-top: 0 !important;
    }

    http://www.informationstreet.com

    #858372

    Lely
    Moderator

    Hello There,

    Please try adding this CSS:

    .x-navbar-fixed-top-active .x-navbar .desktop .x-nav > li.x-menu-item-woocommerce > a {
        padding-top: 25px;
    }

    Hope this helps.

    #858604

    Joao B
    Participant

    This doesnt solve my issue because it is static, If you apply this code the shopping cart steal doesnt look aligned with the links, any suggestion?

    #858736

    Christopher
    Moderator

    Hi there,

    Please update previous code to :

    .x-navbar  .x-nav > li.x-menu-item-woocommerce > a {
        padding-top: 30px !important;
    }
    .x-navbar-fixed-top-active .x-nav > li.x-menu-item-woocommerce > a {
        padding-top: 25px !important;
    }
    

    Hope it helps.

    #858809

    Joao B
    Participant

    Actually didnt make any difference… Still looks quite bad… I would like it to be aligned straight with navbar links when the bar is full and when it shrinks those code above dont do that…

    #859651

    Rad
    Moderator

    Hi Joao,

    Another support here and I’m not sure what should I look for. Would you mind providing a screenshot? The are straight aligned vertically at least on my end. And if you wish to restrict it to desktop only, then change it to this,

    @media ( min-width: 980px ) {
    
    .x-navbar  .x-nav > li.x-menu-item-woocommerce > a {
        padding-top: 30px !important;
    }
    .x-navbar-fixed-top-active .x-nav > li.x-menu-item-woocommerce > a {
        padding-top: 25px !important;
    }
    
    }

    Hope that helps.

    #860739

    Joao B
    Participant

    Hi

    thanks for your reply I hope the screenshot help us, this is how it looks when you scroll down:

    #860746

    Joao B
    Participant

    how i would like it to look like when scrolling: